HTMLファイルに見出しを付けます
■STEP2 見出し サンプルを表示
★見出しを付ける
見出しをつけましょう。
<H1>、<H2>、<H3>、<H4>、<H5>、<H6>タグを使用します。
順番に文字の大きさが大〜小と変わります。
<h1>見出し１です</h1>
<h2>見出し２です</h2>
<h3>見出し３です</h3>
<h4>見出し４です</h4>
<h5>見出し５です</h5>
<h6>見出し６です</h6>
表示
見出し１です
見出し２です
見出し３です
見出し４です
見出し５です
見出し６です
★見出しに色を付ける
見出し<H3>に色を見出しをつけましょう。
文字の色を赤、背景を緑にしてみます。
h3 {
color: red; /* 文字色は赤 */
background: green; /* 背景は緑 */
}
ソースコード（HTML)
<h3>見出し３です</h3>
<p>ここの部分を変えてみました。</p>
表示
見出し３です
ここの部分を変えてみました。
ez-HTMLの使い方：
■スペシャルサイドバーから色の値を入力する
★見出しのボックスを大きくする
見出し<H3>の背景部分を大きくしてみましょう
パディングを増やせば、背景部分が大きくなります。
パディングを5mm、マージンを1cmにして、枠線も入れてみます。
ソースコード（CSSファイル）
h3 {
color: red; /* 文字色は赤 */
background: green; /* 背景は緑 */
border-style: solid; /* ボーダーラインの線種は実線 */
padding: 5mm; /* パディングは5mm */
margin: 1cm; /* マージンは1cm */
}
ソースコード（HTML)
<h3>見出し３です</h3>
<p>ここの部分を変えてみました。</p>
表示
見出し３です
ここの部分を変えてみました。
単位は、em、px、cmなどで、単位なしではダメなようです。autoを指定すると上下左右自動設定になります。
また、値は1〜4個指定でき、２つの場合は上下・左右、３つ指定すると上・左右・下、４つだと上・右・下・左の順となります。
padding、marginは、上下左右を個別に指定することもできます。
margin-bottom.........下マージンを指定する
margin-left..................左マージンを指定する
margin-right...............右マージンを指定する
margin-top.................上マージンを指定する
よく見ると、枠線が赤になっています。枠線の色を指定しないと文字色と同じになるのでしょうか、確認。
文字色 color: red; を color: yellow; に変更します。
見出し３です
やはり、枠線も黄色になってしまいました。
念のため今度は、文字色は赤で枠線を青に指定してみます。
文字色 color: red;の状態で、枠線の色 border-color: blue; を追加します。
見出し３です
その通りになりました。
なお、border-style:を指定しなければ枠線は表示されないようです。
border-color: や border-width: （枠線の太さ）だけの指定では表示されません。
ez-HTMLの使い方：
■スペシャルサイドバーから色の値を入力する
ステップ２までで学んだ内容だけでホームページを作りました。ボタンをクリックしてください。 スタイルシートは、一度保存してからかまたは直接見てください。