CSSを使って説明リストのスタイルを整えていきます。
- 見出しのスタイリング
- リストのスタイリング
- divのスタイリング
見出しのスタイリング
・前回まででHTMLのマークアップをしてCSSのファイルを作ってきました。
・今回はスタイリングをしていきます。
・まず見出しのスタイリングから始めていきます。
・今回はセレクタはh1でいいでしょう。全体像として文字の大きさを少し小さくして見出しの下に線を入れて余白を少し付けていきたいと思います。
・まず文字の大きさは18pxにしていきたいのでfont-size: 18px;としていきます。下線は太さ1pxを実線で引きたいのでborder-bottom: 1px solid;
とします
・余白はがないので上下に8px左右に16pxつけていきたいと思いますのでpadding: 8px 16px;と指定し、下線の下にも余白がほしいので16pxつけていきましょう。margin-bottom: 16px;でいいですね。
・こんな感じです。
h1 {
font-size: 18px;
border-bottom: 1px solid;
padding: 8px 16px;
margin-bottom: 16px;
}
リストのスタイリング
・次にリストのスタイリングをしていきます。
・まずdlとddは初期設定でマージンが設定されているのでコントロールしやすいように0にしていきましょう。
・マージンを0にすると全部詰まってくれるので余白をしっかりと設定していきましょう。
・ではdtとddにpaddingを8px設定して全体的に均等に余白を作っていきます。
divのスタイリング
・最後に一つ一つの質問と答えをペアとしてわかりやすくするために回答のあとに少し多めの余白を付けておきます。
・セレクタはdlの直下のdivに指定したいのでdl > div {}とします。
・マージンに8pxの余白をつけたいのでmargin-bottom: 8px;としておきます。
・こんな感じですね。
dl {
margin: 0;
}
dl > div {
margin-bottom: 8px;
}
dt {
padding: 8px;
}
dd {
padding: 8px;
margin: 0;
}