IE6-8 is Not Supported

CSS のみで高さを可変にして要素の比率を維持するテクニック

1:1 や 2:1 など比率を維持したままグリッド配置するときに重宝する CSS の小ネタです。
JS を使ってわざわざ height の値を計算する必要がなくなります。

1. padding の特性を理解する

CSS のみで比率を固定する場合 padding の値を利用します。
padding は % で値を指定した場合、width の数値を基準 (100%) とします。
この単純な仕組みを理解しておけば好きな比率の要素を作ることができます。

2. コードを書いてみる

実際にコードを書いてみます。 まず、 :before 擬似要素に padding-top で要素の比率を指定します。
要素内が padding-top で埋まってしまうのは absolute 属性の .inner を配置することで回避します。基本はこれだけです。

<div class="box ratio-1_1">
	<div class="inner">
		<p>1 : 1</p>
	</div>
</div>
.box {
	position: relative;
	width: 50%;
	height: auto;
	background: #444;
}
.ratio-1_1:before {
	content: "";
	display: block;
	padding-top: 100%; /* 1:1 */
}
.inner {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

3. 色々な比率の要素を作成する

上で作ったものは padding-top: 100%; を使用したので 1:1 になりましたが、値を変えれば当然比率も変わります。 よく使いそうな比率の要素の サンプルページ を作ったので確認してみてください。おおよそではありますが、黄金比や白銀比も作れますよ。
比率とは関係ありませんが display: table; を使えば要素内を縦横中央寄せにできます。

<!-- 1:1 -->
<div class="box ratio-1_1">
	<div class="inner">
		<div class="table">
			<p>1 : 1</p>
		</div>
	</div>
</div>

<!-- 2:1 -->
<div class="box ratio-2_1">
	<div class="inner">
		<div class="table">
			<p>2 : 1</p>
		</div>
	</div>
</div>

<!-- 4:3 -->
<div class="box ratio-4_3">
	<div class="inner">
		<div class="table">
			<p>4 : 3</p>
		</div>
	</div>
</div>

<!-- 16:9 -->
<div class="box ratio-16_9">
	<div class="inner">
		<div class="table">
			<p>16 : 9</p>
		</div>
	</div>
</div>

<!-- 8:5 -->
<div class="box ratio-8_5">
	<div class="inner">
		<div class="table">
			<p>8 : 5<br /><span>≒黄金比</span></p>
		</div>
	</div>
</div>

<!-- 7:5 -->
<div class="box ratio-7_5">
	<div class="inner">
		<div class="table">
			<p>7 : 5<br /><span>≒白銀比</span></p>
		</div>
	</div>
</div>

<!-- 1:2 -->
<div class="box ratio-1_2">
	<div class="inner">
		<div class="table">
			<p>1 : 2</p>
		</div>
	</div>
</div>
/* BOX WIDTH */
.box {
	position: relative;
	top: 0; left: 0;
	width: 10%;
	height: auto;
	background: #444;
}

/* BOX RATIO */
.ratio-1_1:before {
	content: "";
	display: block;
	padding-top: 100%; /* 1:1 */
}

.ratio-2_1:before {
	content: "";
	display: block;
	padding-top: 50%; /* 2:1 */
}

.ratio-1_2:before {
	content: "";
	display: block;
	padding-top: 200%; /* 1:2 */
}

.ratio-4_3:before {
	content: "";
	display: block;
	padding-top: 75%; /* 4:3 */
}

.ratio-16_9:before {
	content: "";
	display: block;
	padding-top: 56.25%; /* 16:9 */
}

.ratio-8_5:before {
	content: "";
	display: block;
	padding-top: 62.5%; /* 8:5 ≒ 黄金比 */
}

.ratio-7_5:before {
	content: "";
	display: block;
	padding-top: 70%; /* 7:5 ≒ 白銀比 */
}

/* ADD YOUR CONTENT */
.inner {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}
.inner p {
	color: #FFF;
	font-size: 15px;
}

/* CONTENT CENTERING */
.table {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
.table > * {
	display: table-cell;
	vertical-align: middle;
}

EX. 実践的なデザインに組み込む

使いやすい 1:1 の比率で グリッドデザインのデモ を作ってみました。
Media Queries と組み合わせれば簡単にスマホ対応もできるし、使いやすくてなかなか便利!

この小技自体は前からあるし大したことはしていないのだけど、比率固定のグリッドデザインもよく見かけるので覚えておいて損はないかも。Instagram と連携したサービスとかに使いやすそうですね。

ads by google