What's wp ?

What's wp ?

eycatch

HTMLとCSS

カスタ
カスタ
HTMLとCSSはなにがちがうにゃ?
ワープ
ワープ
HTMLは表示する内容を見出しや段落等と意味付けして要素にしていくにゃ。CSSはHTMLの要素に対して表示の仕方を指定していくにゃ。

HTML

ワープ
ワープ
HTMLの要素は開始タグと終了タグで囲むにゃ。終了タグがない空要素というのもあるにゃ。タグ名によって要素を意味付けしているにゃ。ブロックエディタの1つのブロックはHTMLの複数の要素からできているにゃ。その中でも主なタグを知っているとブロックを理解しやすくなるにゃ。
ブロック主なタグ
[whatswp-dashicon type="heading"] 見出しh1,h2,h3...
[whatswp-dashicon type="image"] 画像img
[whatswp-dashicon type="paragraph"] 段落p

CSS

ワープ
ワープ
CSSはHTMLのどの要素に対してスタイルを指定するかをセレクターに書くにゃ。セレクターはタグ名、class名、id名等色々あるにゃ。どんな種類のスタイルかをプロパティで、値をプロパティ値で指定するにゃ。スタイルには背景色や文字の色、枠線、マージン等たくさんの種類があるにゃ。

HTMLとCSS

HTML

<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
<link href="style.css" rel="stylesheet">
<style>
h1, h2 {
  color: #887766;
}
</style>
</head>
<body>
<h1 style="background-color:#e8d8cc">タイトル</h1>
<img src="image.png">
<h2>見出し</h2>
<p>文章</p>
</body>
</html>
ワープ
ワープ
HTMLは主にhead要素とbody要素からできているにゃ。headの中には、titleにページのタイトル、linkでCSSファイル指定する等本文以外のものを書くにゃ。本文はbodyの中に書くにゃ。CSSはファイルで指定する方法(5行目)と、style要素で指定する方法(6行目~10行目)と、style属性で指定する方法(13行目)があるにゃ。

コメント

コメント

<!DOCTYPE html>
<html>
<head>
<style>
/* CSSのコメント */
</style>
</head>
<body>
<!-- HTMLのコメント -->
</body>
</html>
ワープ
ワープ
CSSのコメントは/*から*/まで、HTMLのコメントは<!--から-->までにゃ。

参考

コメントはこちらから