HTML

以下で紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。

HTML

<div class="wrapper">
	<div class="main">
		<!-- 可変 -->
	</div>
	<div class="side">
		<!-- 固定 -->
	</div>
</div>

また、今回は下のイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固定幅はいずれも300pxという内容になります。

CSSで片方可変、片方固定のカラムレイアウトを実装する方法 目次

1. float + negative margin
2. float + calc
3. table
4. flexbox

1. float + negative margin

カラムレイアウトでよく使用されるfloatにネガティブマージンを組み合わせる方法です。
実装にはCSSを下記のように記述します。

CSS

.wrapper {
	overflow: hidden;
}
.main {
	float: left;
	width: 100%;
	margin-right: -300px;
	padding-right: 300px;
	box-sizing: border-box;
}
.side {
	float: right;
	width: 300px;
}

メイン要素にサイド要素の幅である300pxをネガティブマージンとして記述し、padding-rightにも同じ数値を指定します。
ここではメイン要素にpadding指定しているためbox-sizing: border-box;を記述していますが、メインの中にある要素でpaddingなど指定する場合はbox-sizingの記述は必要ありません。

目次へ

2. float + calc

同じくfloatを使用する方法ですが、こちらはメイン要素の幅指定部分にcalcを使用します。
実装にはCSSを下記のように記述します。

CSS

.wrapper {
	overflow: hidden;
}
.main {
	float: left;
	width : -webkit-calc(100% - 300px) ;
	width : calc(100% - 300px);
}
.side {
	float: right;
	width: 300px;
}

目次へ

3. table

displayでtableを用いる方法で、実装にはCSSを下記のように記述します。

CSS

.wrapper {
	display: table;
	width: 100%;
}
.main,
.side {
	display: table-cell;
	vertical-align: top;
	text-align: left;
}
.side {
	width: 300px;
}

※vertical-align: top;とtext-align: left;の記述はレイアウトを実装するために必要なものではないので、必要なければ削除して問題ありません。

目次へ

4. flexbox

displayでflexboxを用いる方法で、実装にはCSSを下記のように記述します。

CSS

.wrapper {
	display: -webkit-flex;
	display: flex;
}
.main {
	-webkit-flex: 1;
	flex: 1;
}
.side {
	width: 300px;
}

目次へ