【モジュールの余白】汎用

こんにちは！sunaです！
前回の記事では、「モジュール同士の関係」と「リスト」モジュールについてご紹介しました。

今回は「汎用」モジュールの余白の考え方についてご紹介します！

汎用モジュールとは

「汎用」モジュールとは、ここではサイト内で繰り返し使用されるモジュールのことを指します。
具体的には以下のモジュールが該当します。

・テキスト
・リスト（通常・順序・注釈）
・テキストリンク
・テーブル
・ボックス
・メディア（テキスト+画像）

見出しモジュールやボタンモジュールも繰り返し使用されますが、
個別に余白を指定することが多いため今回は除外します。

汎用モジュールの余白の考え方

それでは、「汎用」モジュールの余白について考えていきましょう。

「汎用」モジュール自体にマージンを指定すると、他のモジュールと隣接した際にマージンの相殺が起こり、モジュールの組み合わせによっては、想定していた値と異なる余白になってしまう場合があります。

そのため、「汎用」モジュール自体にはマージンを指定せず、「汎用」モジュール同士が隣接した場合の余白だけを指定する方法を推奨します。

「汎用」モジュール同士の余白を指定する際は、情報のまとまりの大きさを考えましょう！

ページ内の情報は、以下の余白で区切られます。

・ モジュール内の余白
・ モジュール同士の余白
・ セクション同士の余白

※ 見出しごとに区切られる情報のまとまりを、ここではセクションと表現します。

各モジュールで指定する余白について

「リスト」モジュールは、ページ内では最も小さい情報のまとまりであるため、サイト上で最も小さい余白を指定しています。（第2回「リスト」モジュール参照）

セクション内にあるモジュール同士の余白は、セクション同士の余白よりも小さい値を指定します。

モジュール同士の余白は、「リスト」モジュール内の余白よりも大きく、
「見出し」モジュールの中で最も低いレベルの見出しのmargin-topよりも、小さい値を指定します。

まとめると下記のようになります。

「リスト」モジュール内の余白 < モジュール同士の余白 < セクション同士の余白

当ブログの「モジュールの余白」シリーズでは、最も小さい余白を基準に余白を指定していきます。

※ 「リスト」以外のモジュール内余白については、セクション同士の余白まで決めた後に指定していきます。

今回のまとめ

「汎用」モジュールの余白は…
1. モジュール自体のマージンは指定せず、「汎用」モジュール同士が隣接した場合の余白のみ指定しよう！
2. 以下の通りになるように、「リスト」モジュールの余白を基準に指定しよう！
「リスト」モジュール内の余白 < モジュール同士の余白 < セクション同士の余白

次回は「ボタン」モジュールの余白についてご紹介します！