CSS: グループ

背景色

グループに背景色をつけるとグループのボックスがわかりやすくなります。

下記のコードを追加してください。

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

#intro #pageHeader { background-color:#ff9999; margin:10px; }
#intro #quickSummary { background-color:#ffaaaa; margin:10px; }
#intro #preamble { background-color:#ffcccc; margin:10px; }
#supportingText #explanation { background-color:#99ff99; margin:10px; }
#supportingText #participation { background-color:#aaffaa; margin:10px; }
#supportingText #benefits { background-color:#ccffcc; margin:10px; }
#supportingText #requirements { background-color:#ddffdd; margin:10px; }
#supportingText #footer { background-color:#eeffee; margin:10px; }
#linkList #lselect { background-color:#9999ff; margin:10px; }
#linkList #larchives { background-color:#aaaaff; margin:10px; }
#linkList #lresources { background-color:#ccccff; margin:10px; }

作業用に一時的につけるのならば色は何でも構いません。

今後、cssZenGardenJpn.htmで作業をしていくにあたって、div要素がどのような構造を持っているかを把握することが重要になります。それぞれのidを確認しておいてください。

枠 border

グループを枠で囲います。

下記のコードを追記してください。

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

#intro { border:1px solid #ff9999; margin:10px; }
#supportingText { border:1px solid #99ff99; margin:10px; }
#linkList { border:1px solid #9999ff; margin:10px; }

１つ上のレベルのグループを枠線で囲いました。こちらのidも確認しておきましょう。

#introと#supportingTextの間、すなわち赤と緑の間の部分に着目してください。

この状態では、赤枠に10pxの下マージン（緑枠の10pxの上マージンと折込）があり、緑枠の中にh3の1emの上マージンがあります。

これを下記のように#supportingTextの枠線だけ消したらどうなるでしょうか。

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

#intro { border:1px solid #ff9999; margin:10px; }
#supportingText { /* border:1px solid #99ff99; */ margin:10px; }
#linkList { border:1px solid #9999ff; margin:10px; }

結果は、赤枠とh3の間は1emのマージンになります。なぜでしょうか。

まず、#supportingTextの10pxの上マージンとh3の1emの上マージンが親子関係で隣接するために折込が発生して1emの上マージンになります。さらに、赤枠の10pxの下マージンと折込が発生するため、1emの上マージンになるのです。

このようにグループに枠が指定されていない場合には、グループ内の最上部にある要素の上マージンはグループの上マージンと隣接するため折込が発生します。グループに枠を指定するとマージン同士が隣接しなくなるため、折込が発生せずに両方のマージンが有効になります。枠を指定した際に空白が増えることがあるのはこのためです。下マージンも同様です。

一般的には、グループ内の一番上の要素の上マージンを付けない方が簡単です。

幅 width

見出しの幅と文章の幅を揃える際には、見出しと文章のそれぞれに幅指定するのではなく、それらを包含するグループに幅を設定した方が、後から変更する際に１か所の変更になるので簡単です。

下記のコードを追記してください。

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

#intro #preamble h3 { width:600px; }
#intro #preamble p { width:600px; }

#intro #preamble { width:600px; }

見出しや段落が背景色からはみ出してしまった人がいるかと思います。それは、h3やpに枠内余白・枠・周辺余白が設定されているとそれぞれの大きさが600pxを超えてしまい、#preambleの幅600pxからはみ出してしまったのです。

グループ内の要素に幅指定を行う場合には、周辺余白まで含めた大きさがグループの幅指定を超えないようにします。越えてしまった場合には、グループの大きさを変えずに内容だけあふれて表示するのがCSSの仕様です。見た目の違いが生ずる原因となるので超えないようにしましょう。

上の2行（#intro #preamble h3、#intro #preamble p）を削除して、#preamble内に収まることを確認してください。収まらない場合には、自分で設定したh3やpの幅設定がないか、確認してください。

収まることが確認できたら#intro #preambleの設定は削除してください。

周辺余白 margin

グループとグループの間隔はグループの余白で調整します。

枠を持たないグループの場合には、最上部にある要素の上マージンを削除してグループの上マージンで調整します。下マージンも同様です。

下記のコードは頭で確認すればいいので、作業して確認する必要はありません。

#intro #preamble { margin-top:2em; }
#intro #preamble h3 { margin-top:2em; }

また、グループをまとめて字下げする場合には、グループに左マージンを指定します。

中央寄せ margin

グループを中央に寄せたい場合には、幅を指定してグループの左右マージンをautoにします。

#intro #preamble {
    margin-right:auto;
    margin-left:auto;
    width:600px;
}

この中央寄せの書式は重要です。「幅指定と左右マージンオートで中央寄せ」と覚えてください。

どうようにして、左右の片方を0、もう一方をautoにすることで右寄せ、左寄せが作れるので、試してみてください。

課題

グループに独自のスタイルをつけよ。

最初にこのページで作業したグループのスタイル（背景と枠線など）を削除して、自由な発想で作業してください。