コピペでできる簡単なレスポンシブのカラムレイアウト

2020年6月12日 4分

wordpressには、手軽にカラムレイアウトが組めるブロックがあります。

「bootstrap使わない」「wordpressじゃない」場合で、LPの作成にカラムレイアウトを作る場合、HTMLとCSSのコピペでできるカラムレイアウトです。

スマホでご覧の方は、サンプルは全てシングルカラムで記載されていますがご容赦ください・・・。

カラムレイアウトとは？
レスポンシブの2カラムレイアウト
レスポンシブの3カラムレイアウト
レスポンシブの4カラムレイアウト

カラムレイアウトとは？

カラムは、紙物のデザインで並列に2個ブロックを作ることを、ホームページを作る場合も同じく最初に段組みを行い、おおまかなデザインやコンテンツの配置などを決めます。

ダントツに一番人気のBootstrapは、Twitter社が開発しているCSSフレームワークで、ウェブサイト制作時に使用頻度の高いスタイルをひとまとめにしたパッケージで、カラムレイアウトが含まれます。

＞ Bootstrap

WEBサイトの構成は、2カラムとか3カラムの構成がありますが、最近は1(シングル)カラムのWebサイトが多く見られます。

福岡ソフトバンクホークスのホームページのキャプチャ — 2カラムの福岡ソフトバンクホークスホームページ

以下からコピペカラムレイアウトになりますが、必要なプロパティは3つで、これ以外の数値をいじって3つや4つなどの並列並びにしています。

box-sizing: border-box はレスポンシブデザインで結構使うので、覚えとくと便利です。

コピペCSSの補足

display: flex
＝要素を並列に横並びにするコードです。
flex-wrap: wrap
＝ display: flexで横並びにさせた要素を回り込みさせるコードです。
box-sizing: border-box
＝ paddingなどで、ボックス自体の大きさが変わらない便利なコードです。

念の為、flex-wrapとdisplay にはIEのベンダープレフィックスも記載していますので、こちらもそのままコピペするようにしましょう。

レスポンシブの2カラムレイアウト

カラム同士に隙間もない、真ん中で2つに割れる並びのカラムレイアウトのHTML＋CSSです。

CSSのブレイクポイントは、width 640px でシングルカラムになるようにしていますが、media screen and (max-width: —px)のwidthで、ブレイクポイントを指定してお使いください。

ここに内容

コードを表示する

HTML

<div class="col_2">
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
</div>

CSS

/* 2カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 640px) {
	.col_2 > div{
		width: 100%;
	}
}

レスポンシブの3カラムレイアウト

3カラムのレスポンシブデザインで、ブレイクポイントにwidth1090pxで2カラム。480pxで1カラムに可変するように設定しています。

ここに内容

コードを表示する

HTML

<div class="col_3">
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
</div>

CSS

/* 3カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 1090px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}

レスポンシブの4カラムレイアウト

4カラムのレスポンシブデザインで、ブレイクポイントにwidth1090pxで3カラム。480pxで2カラムに可変するように設定しています。

ここに内容

コードを表示する

HTML

<div class="col_4">
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
	<div>
		ここに内容
	</div>
</div>

CSS

/* 4カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 1090px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}