CSSで段組レイアウトのテンプレート：3段組、バー可変幅、左・右・中央順

レイアウト

ウィンドウや画面の幅によって図のように並びが変わります。

実際の様子（デモ）

実際に、PCでウィンドウ幅を変えたり、スマートフォンなどで縦横を変えてみてください。

コードとCSS解説

<div id="boxA">
  <p>A</p>
</div>

<div id="wrap">
  <div id="boxB1">
    <p>B1</p>
    <p>内容　内容　内容　内容　内容　内容　内容　内容・・・内容</p>
  </div>
  <div id="boxB2">
    <p>B2</p>
    <p>内容　内容　内容　内容　内容　内容　内容　内容・・・内容</p>
  </div>
  <div id="boxB3">
    <p>B3</p>
    <p>内容　内容　内容　内容　内容　内容　内容　内容・・・内容</p>
  </div>
</div>

<div id="boxC">
  <p>C</p>
</div>

@media screen and (min-width:641px){
  #wrap {
    display: flex;
    justify-content: space-between;
  }

  #boxB1 {
    box-sizing: border-box;
    width: 20%;
    order: 1;
  }

  #boxB2 {
    box-sizing: border-box;
    width: 15%;
    order: 3;
  }

  #boxB3 {
    box-sizing: border-box;
    width: 65%;
    order: 2;
  }
}

1

ブレイクポイント（縦並びと横並びの境目）で、641px以上で横並びにしています。

3

Flexboxで子要素を横並びにします。

4

最初の子要素を左端に、最後の子要素を右端に、します。子要素全ての合計幅が100%未満の場合に、各子要素間に隙間を作ります。

8,14,20

border込みでの幅指定になります。各boxにborderがない場合は不要です。

9

左サイドバーの幅です。

15

右サイドバーの幅です。

21

中央の幅です。100% - 左サイドバーの幅 - 右サイドバーの幅 にします。それより減らすと両脇に隙間を作れます。

10,16,22

各box配列の、左からの順です。

補足

上記デモや画像は見た目の体裁のため、下記の通りCSSで各box内の文のmarginを消しています。実際ご利用の際はこれは不要です。

div[id^=box] p	{
  margin: 0;
}

ご利用

• ソースコードは無料フリーです。
• コード記述枠内（どこでも可）をダブルクリックすると黒く反転しますので、コピー&ペーストしてお使いください。
• 著作権について詳しくは免責事項 - 著作権を参照願います。