はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう!という内容になっております。 前回はCSS設計の第一歩として、「抽象化」・「分ける」 という2つの視点からホームページを眺めてみて、その中で共通するメディアやボタンといったコンポーネントについてお話ししました。 今回はそこからもう少し視野を広げて、複数のコンポーネントが集まったセクションがあり、そのコンポーネント同士の隙間(margin)をどのように設定するか、というテーマで考えていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 ボタンとメディアという2つのコンポーネントの関係について説明しました。 このメディアにはボタンが内包されており、ボタンのクラス名を.media-btnとするのか、.btnとするのかという問題でしたね。 そして、この