【CSS】2段カラム、片側は横幅を固定（可変レイアウト）

2段カラム（2段組み）で、片側の横幅を固定した可変レイアウト（リキッドレイアウト）の基本的な方法を紹介します。通常ブログレイアウトはだいたい2段で、右サイド側のメニュー部分はアフィリエイトバナー等が入る関係で横幅を固定にしている場合が多いです。

float（フロート）でもできますが、現在はflexbox（フレックスボックス）が主流ですので左右レイアウトはを利用します。下はまだ右側が固定されていない状態です。

※数字を真ん中に表示させるCSSはCSSの見栄えが複雑になってしまうため割愛しています。

HTML

<div class="content-body"> <div class="content-left"><span>左</span></div> <div class="content-right"><span>右</span></div> </div>

CSS

.content-body{   /*display:flexを設定、初期値*/ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; align-content:stretch;   /*表示用*/ background-color:#ccc; width:100%; min-height:300px; }   /*左側*/ .content-left{ background-color:#999; min-height:300px; }   /*右側*/ .content-right{ background-color:#666; min-height:300px; }

左

右

左側をwidth:calc(100% – 右側サイズ)にする

私はこれが一番理解もしやすく簡単だと思ってますが、marginやpadding等の調整が入ると多少面倒なため好き嫌いの分かれるところなのかもしれません。右側のボックスの横幅を全体から引いたサイズを左側に割り当てるだけです。calc(の間にスペースが入っていると効きません。また、(100% – 右側サイズ)はマイナスの左右にスペースが必要です。今回はmarginやpadding等が入っていませんので、そのまま右側のボックスの横幅を入れればよいのですが、marginやpaddingが入っている場合はその分を引いた数値を入れる必要があります。

CSS

 /*左側*/ .content-left{   /*右側のボックスの横幅を全体から引いたサイズを左側に割り当てる*/ width:calc(100% - 200px);   background-color:#999; min-height:300px; }

左（可変）
width:calc(100% – 200px);

右（固定）
width:200px;

左側をflex:1 1 auto、右側をflex:0 0 右側サイズにする

次にflexboxの機能を利用した方法です。

この方法はflex-directionがrowの状態でflex-basisに200pxを割り当てているので、メディアクエリ等でflex-directionをcolumnに変更した場合はflex-basisの方向が天地に変わるのでflex:0 0 200pxをflex:0 0 autoにするなどの調整が必要です。

CSS

 /*左側*/ .content-left{   /*flex-grow:1、flex-shrink:1、flex-basis:autoを指定*/ flex:1 1 auto;   background-color:#999; min-height:300px; }   /*右側*/ .content-right{   /*flex-grow:0、flex-shrink:0、flex-basis:200pxを指定*/ flex:0 0 200px;   background-color:#666; min-height:300px; }

左（可変）
flex:1 1 auto;

右（固定）
flex:0 0 200px;

左側にflex:1、右側は固定したい右側サイズにする

先程よりも更に短いCSSで可能な方法です。

flex:1;は、flex-grow:1;flex-shrink:1;flex-basis:0;をそれぞれ指定したのとまったく同じです。詳しくは、「【CSS】flexboxの基本（子要素）」を参照ください。

CSS

 /*左側*/ .content-left{   /*flex:1とするだけ*/ /*下記はflex-grow:1;flex-shrink:1;flex-basis:0;をそれぞれ指定したのとまったく同じです*/ flex:1;   background-color:#999; min-height:300px; }   /*右側*/ .content-right{   /*固定したいwidthを200px指定*/ width:200px;   background-color:#666; min-height:300px; }

左（可変）
flex:1;

右（固定）
width:200px;

以上3つが代表的な片側固定の可変レイアウトの方法です。