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

レイアウト

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

実際の様子（デモ）

実際に、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>

<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: 70%;
  }

  #boxB2 {
    box-sizing: border-box;
    width: 30%;
  }

}

1

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

3

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

4

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

8,13

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

9

左コンテンツの幅です。合計100%未満で隙間を作れます。

14

右サイドバーの幅です。合計100%未満で隙間を作れます。

補足

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

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

ご利用

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