HTML・CSSの困りごと#1　要素の上下marginをどうとるか？要素を縦に積む場合

HTMLやCSSは、慣れれば非常に簡単です。HTMLで文章に見出し・段落・表など意味を付け、CSSで色や線・余白などデザインを付けていきます。勉強する為の本もたくさん出ていますし、スクールも多くあります。困ったらネットで検索すれば、様々な回答を得ることができます。
しかし、いざコーディングをしようとすると、どうすればいいのかわからず手が止まってしまう。
それはなぜでしょう？
それは、自分が作りたいサイトの正解は、誰も教えてくれないからです。

コーディングにはルールはありますが、正解はありません。コーダーの解釈や考えに依存する部分が多くあります。

別々のコーダーにデザインだけを渡し、コーディングを依頼すると、全く違うHTMLとCSSが出来上がってくるでしょう。
しかし、運用や拡張性を考えた場合、良し悪しは明確に表れてきます。

ホームページは制作したら終わりではなく運用があることが大前提です。ページの追加・内容の変更・項目の削除など更新や変更が入ることが多々あります。制作時にこのことをよく理解していないと、ページを追加したら全体のデザインのバランスがおかしい・内容を変更したらデザインが崩れた・項目を削除したら見づらくなったなど問題が起こります。どのような運用をしていくか想定し、汎用性の高いコーディングを意識することが大切です。

困ったときは、より最適な方法は何か考えることがキーとなり、"どうコーディングすればいいのか"がだんだん見えてきます。

「HTML・CSSの困りごと」では、私が良いものを作ろうと思いたどり着いた答えを、紹介していきます。決して正解ではないですし、この答えも日々進化していくでしょう。困ったときの参考として読んでいただければ幸いです。
では、第一弾「要素の上下marginをどうとるか？要素を縦に積む場合」いってみましょう！

marginの相殺を理解する

コンテンツの基本的な構造として、大見出し、段落、リスト、小見出し等の要素を縦に並べる形があります。
この場合、どのように縦のmarginを付けていけばいいでしょうか？ポイントは、各要素を汎用的に使用した際のmarginの相殺を考慮することです。

例えば、h1のmargin-bottomは18px、段落pのmargin-topは7pxに設定されています。このh1とpを縦に並べた場合、h1のmargin-bottomの18pxとpのmargin-topの7px、両方のmarginが有効にはなりません。
この場合、値が大きい方であるh1のmargin-bottomの18pxのみ有効となります。pのmargin-topの7pxは相殺されて無効となってしまいます。

どんな要素が隣り合っても余白のバランスが崩れないことが大切

各要素は、使いまわしが前提です。各要素の隣り合うものは決まっていません。どんな要素が隣り合っても、余白のバランスが崩れないことが大切です。
要素の上下にmarginを設定し、隣り合った場合どちらの要素marginを残したいのかで数値を決めていくとよいでしょう。

まとめ

制作をしていると、どうしても制作目線で捉えがちになってしまします。しかし、「どうコーディングをすればいいのか」悩んだときは、「このホームページはどう使うのか」というお客様目線に立ち返ってみるとよりよい解決の糸口が見つかるでしょう。