CSS余白設定の三原則

CSS

フロントエンド開発において、CSSでの余白設定はデザインの整合性を保つために非常に重要です。以下に、CSS余白設定の三原則を紹介します。

1. 基本的に margin-top を使う

余白を設定する際は、基本的に margin-top を使用することを推奨します。これにより、後からの調整が容易になり、コードの可読性も向上します。

2. margin-bottom は最終手段

どうしても margin-top では対処できない場合にのみ margin-bottom を使用します。これにより、予期せぬ余白の競合を防ぐことができます。

3. 隣接セレクタを活用する

隣接する要素間の余白を設定する場合は、隣接セレクタ（例： .item + .item）を利用します。これにより、特定の要素間のみ余白を適用し、不要な余白の調整を避けることができます。

設定の優先度

要素がどれだけネストしていても、以下の優先度を守ることで余白設定が簡単になります。

  1. 親要素の padding で周囲の余白を取る
    • 親要素の padding を使って、上下左右の余白を設定します。
  2. 子要素間の余白は margin-top で取る
    • 親要素の padding ではカバーできない子要素間の余白は、子要素の margin-top で設定します。

隣接セレクタの具体例

以下のコード例では、隣接セレクタを使って同一の要素間に余白を設定しています。

Bad Example:

cssコードをコピーする.item {
  margin-top: 10px;
}
.item:first-child {
  margin-top: 0;
}

Good Example:

cssコードをコピーする.item + .item {
  margin-top: 10px;
}

線の引き方

余白設定と同様に、要素間の線の引き方も重要です。

  • 親要素の border で枠線を設定する
    • 親要素に border を設定して、全体の枠線を引きます。
  • 要素間の線は border-top / border-left で設定する
    • 要素間の横線や縦線は、それぞれ border-top や border-left を使って設定します。

まとめ

CSSでの余白設定は、コードの保守性や見た目の整合性に大きな影響を与えます。margin-top を基本に、必要に応じて margin-bottom や隣接セレクタを使いこなし、効率的で整然としたデザインを実現しましょう。