この節について
第6章では、第2章と第3章で学習してきたmarginの制御方法について復習をしてきました。
第6章自体がmarginについてのまとめなので、この節はまとめのまとめということになってしまいますが、第6章で復習した事柄について整理していこうと思います。
後で困らないようにmarginを設定するためのポイント
marginについてのポイントが第2章と第3章に散らばっていたので、「第6章 1節 marginを制御する方法について復習しよう」でまとめました。
基本的にBlockクラス(=モジュール)にはmarginを設定せず、設定する場合は隣接兄弟要素セレクタ、first-child、last-child、not(:first-child)などの条件付きでmarginを設定すると後で邪魔にならないようにできます。
また、余白を設定または変更したくなる理由が、「隣接兄弟要素が変化した」「first-childが変化した」「last-childが変化した」「なんらかの要素と隣接している(first-childでない)」などの場合は、それらに対応するセレクタを意識して使用すると余白の管理がしやすくなると思います。
この節のおわりに
marginについて「第6章 1節 marginを制御する方法について復習しよう」にまとめた内容を、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。
動的に表示要素が変化するWebサイトの制作や運用をするにあたっては、第6章の練習問題で行った内容が参考になると思いますので、動的なWebサイトの制作や運用に携わる予定のある方は理解しておくと良いと思います。