<h1> 見出し

ページの見出し、h1要素

師匠

ほな、ぼちぼち行くで。

師匠

まず、見出しや。
中身が無くても、見出(みだ)しは大事や。

男は「 中身 」や無い!
男は「 ()だしなみ 」や!

弟子

(しーん)

師匠

この 高レベルなギャグ が理解できるようになってから 出直して来い!

弟子

わっはっはー。

師匠

感じの悪いやっちゃなー。
まー、ええわ。
見出しや。

<h1>一番大きい見出し</h1>

一番大きい見出し

師匠

左のコードを実行すると、右の結果になる。
以上。

弟子

??? もう少し詳しく。。。

師匠

ギャグの理解レベル が低いヤツには、教えてやられへん。

弟子

HA! HA! HA! HA! HA! HA! HA! HA! HA! (中略) HA!

師匠

HA! HA! HA!って、なにを 外人みたいなバカ笑い しとんねん。

師匠

前に説明したように、これからの説明には 下のテンプレートを使う。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>




</body>
</html>
師匠

で、今からは全部のコードは書かない。
<body>要素内 (つまり、<body></body> で囲まれた部分 )のコードだけを書く。

師匠

そやから、下の左のコードがあったら、それを(下の右のコードみたいに)<body>要素内に書けってことや。

<h1>一番大きい見出し</h1>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>


<h1>一番大きい見出し</h1>


</body>
</html>
師匠

書き方 & 実行の仕方は前に説明したから、忘れてたら 復習しとけよ。
実行したら、下の図みたいな結果になるやろ。

師匠

ということを、毎回 いちいち説明してられへんから、下のように書くからな。
左のコードを実行すると、右になるんや。

<h1>一番大きい見出し</h1>

一番大きい見出し

弟子

HA! HA! HA! HA! HA! HA! HA! HA! HA! (中略) HA!

師匠

まだ 笑とったんか・・・?
今の話、聞いとったんか ???

小さい見出し、<h2> ~ <h6>

師匠

<h1>は 一番大きい見出しや。
他にも、<h2><h3><h4><h5><h6> がある。
数字が小さくなるほど、小さい見出しや。

<h1>一番大きい見出し</h1>
<h2>二番目に大きい見出し</h2>
<h3>三番目に大きい見出し</h3>
<h4>四番目に大きい見出し</h4>
<h5>五番目に大きい見出し</h5>
<h6>一番小さい見出し</h6>

一番大きい見出し

二番目に大きい見出し

三番目に大きい見出し

四番目に大きい見出し

五番目に大きい見出し
一番小さい見出し
弟子

<h6>とか、本文の文字よりも 小さくありませんか?

師匠

ま、そうや。
でも、まー ええねん。
普通は、 CSS という機能を使って、文字の大きさとか、色とか、枠線とかを変えるんや。

師匠

CSSは、もうちょっと説明しないと、ゴチャゴチャになりそうやから、まー、待て。

要素の周りの点線

師匠

HTMLのテンプレートの中の<style>要素を、 削除 してみ。
( つまり、ハイライトしている部分消す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>


<h1>一番大きい見出し</h1>
<h2>二番目に大きい見出し</h2>
<h3>三番目に大きい見出し</h3>
<h4>四番目に大きい見出し</h4>
<h5>五番目に大きい見出し</h5>
<h6>一番小さい見出し</h6>


</body>
</html>
師匠

見出しの周りの点線が消えたな? (下右図)
これが、本来の表示や。

師匠

<style>の中の設定は、この点線を表示するためのものや。
あった方が説明しやすいからな。
これには、CSSの機能を使っている。

師匠

見出しの説明は、これくらいにしとく。
男は「 中身 」やなくて、「 ()だしなみ 」からな。

弟子

HA! HA! HA! HA! HA! HA! HA! HA! HA! (中略) HA!

師匠

少しは 分かってきたようやな。

復習

  • 大きい見出し <h1> - <h2> - <h3> - <h4> - <h5> - <h6> 小さい見出し