CSSで要素を3分割にする方法

はじめに

Webデザインにおいて、要素を均等に分割することは非常に一般的な要求です。特に、3分割は多くのレイアウトで利用されます。今回は、CSSを使って要素を3分割する方法をご紹介します。

基本的な3分割の方法

CSSで要素を3分割にするためには、各要素の幅を100%の3分の1に設定する必要があります。以下のコードは、その基本的な方法を示しています。

.col3 {
  width: calc(100% / 3);
}

このコードを使用することで、クラス col3 を適用した要素は、親要素の幅の3分の1の幅を持ちます。例えば、親要素の幅が300pxの場合、各 .col3 要素の幅は100pxになります。

3分割レイアウトの実装例

具体的な例として、3つのボックスを横並びに3分割する方法を見てみましょう。

<style>
  .container {
    display: flex;
  }
  .col3 {
    width: calc(100% / 3);
    border: 1px solid #000;
    box-sizing: border-box;
  }
</style>

<div class="container">
  <div class="col3">ボックス1</div>
  <div class="col3">ボックス2</div>
  <div class="col3">ボックス3</div>
</div>

Flexboxを使ったレイアウト

上記の例では、Flexboxを使用して要素を横並びに配置しました。Flexboxは、レスポンシブデザインにおいて非常に強力なツールです。display: flex; を親要素に設定することで、子要素を自動的に並べてくれます。

注意点

• 境界線の影響：上記の例では、各ボックスに境界線を設定していますが、境界線の幅が計算に影響を与えないように box-sizing: border-box; を使用しています。
• レスポンシブデザイン：小さな画面でも3分割レイアウトを適切に表示するためには、メディアクエリを使用してデザインを調整することが重要です。

まとめ

CSSを使って要素を3分割にする方法は非常にシンプルですが、Flexboxを併用することでさらに強力なレイアウトが可能になります。