この節について
これまでmarginを制御する方法についていくつかのポイントを学習してきましたが、比較的わかり難い部分でもあると思いますので、これまで学習してきたポイントについて振り返っていきましょう。
これまで学習してきたポイントのまとめ
概要
これまで学習してきたポイントのうち、marginが関係する項目を箇条書きにすると以下のようになります。
- 位置調整のプロパティはBlockクラスに設定しない
- モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する
- 2つの要素間のmarginを設定するときは後の要素に設定する
- 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する
位置調整のプロパティはBlockクラスに設定しない
これは「第2章 2節 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう」で学習した最重要ポイントの一部です。
そこからmarginに関係するポイントだけを抜粋すると「marginはBlockクラスに設定しない」というポイントがあります。
実際には、Blockクラスのmarginは、first-childやnot(:first-child)などの擬似クラスを使用したり、隣接兄弟要素セレクタを使用するなどして、条件付きで設定する方が編集効率の面で効果的な場合が多くありますが、第2章の段階では最も簡単で覚えやすい方法として「marginはBlockクラスに設定しない」としました。
擬似クラスや隣接兄弟要素セレクタを使用して条件付きでmarginを設定する方法については、この第6章のmargin設定についての練習問題をやりながら具体的に学習できるようにしています。
モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する
これは「第3章 8節 mod-header-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。
2つの要素間のmarginを設定するときは後の要素に設定する
これは「第3章 4節 mod-heading-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。
「2つの要素間のmarginを設定するときは後の要素に設定する」ということを推奨しています。
隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する
これは「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。
これについては、この第6章のmargin設定についての練習問題をやりながら、より具体的に学習できるようにしています。
first-childの前やlast-childの後の余白が変化する箇所は擬似クラスセレクタで親要素のpaddingを制御する
これも「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。
これについても、この第6章のmargin設定についての練習問題をやりながら、より具体的に学習できるようにしています。
この節のおわりに
marginを制御する方法についてより深く学んでいく前に、これまで学習してきたポイントについて振り返ってきました。