モジュール作成とマージンの話

規模がでっかいサイトを制作する時に、モジュールって作りますよね。
そんなモジュールを作る時に気にしたいポイント。
そう・・・マージン・・・！

100ページとか1000ページのサイトを構築する場合、モジュールで組むページや、CMSから更新するページがかなり多くなります。
そうなってくると当然、モジュールを作成していない人もページを作ることが多くなります。

「カラムの中にテーブル入れたらブサイクになった！」
「サンプルのhtmlは綺麗だったのに、h2の上が謎の巨マージン入ってる！」
「このページとあのページでマージン違う？」

みたいな修正が必ずと言っていいほど出てきます。

まぁ、量産や運用のときにきちんとドキュメントを用意すれば回避できる部分が多いし、
修正きたならするしかないんですが、継ぎ足しでcss書きしていくと複雑になるし、
できれば最初から「どんなhtmlでもどんとこい」と言いたい。

ので、デザイン・マークアップの時点でルールをつくっておくと幸せ。幸せの第一歩！！

---

マージンにおけるポイント

ざっくりはこの2つのポイントが大事。

①上マージンのみで考えた方がいい。

②できれば、見出し以外のモジュールの上マージンはできるだけ揃えておく方がいい。

理由をそれぞれあげていきます。

①下マージンがついていると・・・

• 例えばh2の下に本文や細かい文字がきたときに、あきすぎた印象になる。
• 下マージンは詰めたい時に指定が難しくなる(ネガティブマージンはなるべく使いたくない)が、上マージンの場合は兄弟セレクタを使って調整がしやすい。
• コンテンツ最後のマージンがコンテンツ(・ページ)によってまちまちになる場合がある。

コンテンツにマージンを持たせておけば基本は大丈夫だが、入れ子になっているとマージンが加算されてマージンが広くなってしまう場合がある。

②モジュールによってマージンがバラついていると・・・

• 見出し以外のモジュールは、情報の詳細度や重要度が「ページ・コンテンツによる」ため、マージンに意味を持たせるのは違和感につながる。
• テーブルレイアウトやカラムレイアウトで、モジュールを組み合わせるとガタガタになる可能性がでる。
  (左カラムの画像は上マージン20px, 右カラムのh3は40pxなど。これはカラムの中のモジュールは打ち消しマージンつけるなどで解決はします。複雑になる)
• スタイル指定が増え、カニバリやすくなる。

---

マージンのルール(仮)

それを踏まえた、細々した私のおすすめ。(超個人的見解なのでご容赦ください🙏)

h1

• メインビジュアルに入ることが多いので、デザイン性優先したい。
  他コンテンツのマージンとの共存は気にしない。

h2~h5 見出し

• 【大前提】上マージンとフォントサイズなどで差をつける。下マージンはつけない。
• たくさんマージン開けたくなりますが、テキストの少ないページでスカスカになりやすいので、文字量によって印象が変わるのも頭の片隅に。
• h2 + h3 などのパターンは必ず検討。
• h2などの大きい見出しの下に細かいパーツがくる想定もする
• デザインによっては下マージンをつけざるをないと思うので臨機応変に。ただしその場合は、各モジュールとの兼ね合いを丁寧に考えること
• トップページやキーとなるページのh2などは別で用意するなどして・・・デザインを捨てたくない気持ちのバランス取ります・・・

テキストなどのパーツ・モジュール

• 基本的に上マージンは揃っていると組みやすい。
• 同じ要素が続く場合などは詰めることも検討。(.img + .img)
• 上下に積む場合以外に、カラムやテーブル、リストなど、モジュールが入子になる場合も注意が必要

  • カラムで左右に入るモジュールが別の場合も想定する。マージンを揃えるor削除する
    

    .column > * {
      margin-top: 0;
    }
    

  • テーブルの中のモジュールは、マージンを減らすor削除する

    .table .td > *:first-child {
      margin-top: 0;
    }
    

  • リストの中のモジュールは、子リスト、テキスト、リンク、モジュールでないテキスト(pですらない)が入る想定でマージンを調整。

    <li><p>ピータグ</p></li>
    <li><a href="#">エータグ</a></li>
    <li>モジュールじゃないテキスト</li>
    

• コンテンツの最初と最後のマージンを考慮する
  • コンテンツの最初 = メインビジュアルやh1の下は一定のマージンにする。
    その下の最初のアイテムは上マージンを削除。
    h2が入っても、いきなり画像やテキストが入っても対応できるように。
  • コンテンツの最後 = 関連リンク、footerなどのコンテンツが続いた時に、マージンにばらつきが出ないようにする。
    下マージンつけてなければ、あまり気にせず。

---

これが正しい！わけではないので、
いちエンジニアの経験則からくる懸念点、みたいなものと思ってくださいな。

以上。個人的モジュールのマージンへの想いでした。