CSS: 見出し

文字のサイズ font-size

文字サイズを指定します。

相対指定の「em」で指定するのが望ましいと言われています。主要なブラウザの標準の文字サイズは16ピクセルになっています。

css Zen Garden（日本語版）サンプルファイル style.css

#intro #pageHeader h1 {
    font-size:1.5em;
}
#intro #pageHeader h2 {
    font-size:1.25em;
}

#introと#pageHeaderでh1とh2を制限していますが、cssZenGardenJpn.htmではh1とh2はそれぞれ1ヶ所しか登場してないので、単にh1とh2の表記でも同じです。

文字揃え text-align

文字揃えを指定します。下記のスタイルを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

h1, h2 {
    text-align:center;
}

h1とh2をまとめて設定しています。別々に指定しても構いません。

確認ができたら、この部分のスタイルは削除してください。

文字色 color と背景色 background-color

文字色と背景色を指定します。あまり近い色を指定して読みにくくならないように注意します。

赤字部分が追記事項です。全体を置き換えてしまっても構いません。

css Zen Garden（日本語版）サンプルファイル style.css

#intro #pageHeader h1 {
    font-size:1.5em;
    color:#5555ff;
}
#intro #pageHeader h2 {
    background-color:#73a1ff;
    color:#ffffff;
    font-size:1.25em;
}

枠 border

枠を指定します。全体を囲まないのも一つの手です。

枠内余白の指定方法については、右のメニューの「ref:ボックス」に枠関連の項目があるので、先にそちらを読んでから戻ってきて操作してください。

赤字とh3,#preamble h3が追記です。全体を置き換えても構いません。

css Zen Garden（日本語版）サンプルファイル style.css

#intro #pageHeader h1 {
    border-bottom:solid 2px #5555ff; /* 下線 */
    font-size:1.5em;
    color:#5555ff;
}
#intro #pageHeader h2 {
    border-left:solid 1.25em #73a1ff; /* 左に太い線 */
    font-size:1.25em;
}
h3 {
    border:3px double blue; /* 二重線を使うときは線の太さを太め（3px以上）に */
}
#preamble h3 {
    border-color:red; /* #preambleの中のh3だけ枠線の色を赤で上書き */
}

「h2」は左罫線を１文字分の太さにすることで箇条書きの記号のような表現をしています。

「h3」は制限をしていないので、すべてのh3について適用されます。よって、「#preamble h3」には枠線の種類や太さは改めて指定する必要がないのです。

このように、全体は統一した書式にし、特定の箇所のみ書式を一部変更するといった使い方がよく使われます。しっかり覚えましょう。

枠内余白 padding

枠内余白を調整します。背景色は枠線部分まで塗られるため、背景色の範囲調整にも使用します。

枠内余白の指定方法については、右のメニューの「ref:ボックス」に「枠内余白」の項目があるので、先にそちらを読んでから戻ってきて操作してください。

あらかじめ設定されている枠内余白の大きさはブラウザによって異なるため、ブラウザでの差がでないように最初に全ての要素「*」の枠内余白の大きさを「0」にし、必要な箇所は自分で枠内余白を設定するようにします。

赤字と*が追記です。全体を置き換えても構いません。

css Zen Garden（日本語版）サンプルファイル style.css

* {
    padding:0; /* 最初に枠内余白は0に */
}
#intro #pageHeader h1 {
    border-bottom:solid 2px #5555ff; /* 下線 */
    padding-bottom:3px; /* 下線との間隔 */
    font-size:1.5em;
    color:#5555ff;
}
#intro #pageHeader h2 {
    border-left:solid 1.25em #73a1ff; /* 左に太い線 */
    padding-left:0.5em; /* 左の太い線との間隔 */
    font-size:1.25em;
}
h3 {
    border:3px double blue; /* 二重線を使うときは線の太さを太め（3px以上）に */
    padding:3px;
}
#preamble h3 {
    border-color:red; /* #preambleの中のh3だけ枠線の色を赤で上書き */
}

周辺余白 margin

周辺余白を調整します。

周辺余白の指定方法については、右のメニューの「ref:ボックス」に「周辺余白」の項目があるので、先にそちらを読んでから戻ってきて操作してください。

あらかじめ設定されている周辺余白の大きさはブラウザによって異なります。また、他の要素の周辺余白も考慮しなければならないので、最初に周辺余白の大きさを0にします。

赤字が追記です。全体を置き換えても構いません。

css Zen Garden（日本語版）サンプルファイル style.css

* {
    margin:0; /* 最初に周辺余白は0に */
    padding:0; /* 最初に枠内余白は0に */
}
#intro #pageHeader h1 {
    margin:1em 0 2em 0; /* 上に1em, 下に2emの余白 */
    border-bottom:solid 2px #5555ff; /* 下線 */
    padding-bottom:3px; /* 下線との間隔 */
    font-size:1.5em;
    color:#5555ff;
}
#intro #pageHeader h2 {
    margin:1em 0; /* 上下に1emの余白 */
    border-left:solid 1.25em #73a1ff; /* 左に太い線 */
    padding-left:0.5em; /* 左の太い線との間隔 */
    font-size:1.25em;
}
h3 {
    margin:1em; /* 上下左右に1emの余白 */
    border:3px double blue; /* 二重線を使うときは線の太さを太め（3px以上）に */
    padding:3px;
}
#preamble h3 {
    border-color:red; /* #preambleの中のh3だけ枠線の色を赤で上書き */
}

段落のマージンがなくなるのでかなり読みづらくなりますね。

h1には2文字文の下マージンがあり、h2には1文字分の上マージンがあります。

h1とh2の間隔は3文字分の大きさになりそうですが、実際にはh1の下マージン2文字分になります。その理由は「マージンの折込」です。

課題

見出しに独自のスタイルをつけよ。「ref:フォント」を参考に上記にない書体(font-family)や太さ(font-weight)などのプロパティを使っても良い。