【css】レスポンシブコーディングでボックスの横幅と高さの比率を維持しながら可変させる方法

レスポンシブ対応のコーディングでボックスの横幅と縦の幅の比率を一定に維持したいと考えたことはないでしょうか？　例えば、右に画像<img>、左にテキスト一文だけのボックスを並べて配置、高さは揃えたいといった場合がこのケースに当たると思います。
この場合両方が<img>要素であれば、容易にできるのですが、一方がボックスの場合縦幅の比率（％）の設定するのが難しかったりします。
今回は、ボックスの縦横比率の設定方法をご紹介いたします。この方法を使えばボックス要素の縦横比をまるで<img>のように操れるようになる便利な方法ですので是非ご一読ください。

横幅と縦幅の比率（％）を計算する方法
paddingを使う方法
疑似要素（beforeもしくはafter）を使う方法
ボックスを横並びにするときは注意が必要です

横幅と縦幅の比率（％）を計算する方法

ボックスの縦横比率は横幅を基準として高さを算出します。式で表現すると次のようになります。

高さの比率（%）= 高さ ÷ 横幅 × 100

サンプルとして、横幅200px 高さ150px のボックスの比率を計算すると

150÷200×100　＝　75

となり横幅（100％）に対する高さの比率は75％になります。

比率の計算については以前の記事で簡単に計算できるツールを用意しておりますのでご活用ください。「→比率計算ツールはこちらをクリック」
ちなみにこちら、レスポンシブの比率計算を想定した表記になっておりますが、「親要素のpxサイズ」のところに横幅（px）「子要素のpxサイズ」のところに高さ（px）を入力すると「計算結果」に高さの比率（%）が表示される仕組みになります。

比率の計算で横・高さの比率はわかりましが、これを単純にwidth・height プロパティにそれぞれ設定しても効果はありません。ボックスの比率を維持させるには、paddingを使う方法と疑似要素（beforeもしくはafter）を使う方法の2通りがあります。

paddingを使う方法

まずは、paddingを使って、横幅、高さの比率を維持する方法をご紹介します。

サンプル（横幅100％高さ35％で設定）

html

<div  class=”box”><span>テキスト</span></div>

1	<div class=”box”><span>テキスト</span></div>

css

.box{
	width:100%
	height:auto;
	padding-top:35%;
	position:relative;
}
.box span{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.box{

width:100%

height:auto;

padding-top:35%;

position:relative;

}

.box span{

position:absolute;

top:50%;

left:50%;

transform: translate(-50%, -50%);

}

結果↓（ブラウザー画面のサイズを変更することで可変することをご確認いただけます）
※サンプルソースに記載はないですがボックスの位置をわかりやすくするためbackground-colorを設定してあります

テキスト

ここで重要なポイントは高さの比率を維持するためにpadding-topに高さの比率（%）を設定していることです。heightに比率（%）を設定しても効果はないのですが、paddingに設定した場合は効果があります。もちろん、padding-topの代わりにpadding-bottomを使うことも可能です。

注意したいポイントとしては、サンプルのように、ボックスの中にテキストなどの要素が含まれる場合、padding(%)+要素の高さがボックスの高さになってしまいますので、サンプルのように、position:absolute;を使って内包する要素の高さがカウントされないようにする必要があります。

この方法はiframeと特に相性がいい設定方法で、たとえば、google mapの埋め込み、yotubeの埋め込みを可変させたい場合など、手軽に導入できてとても便利な方法です。

疑似要素（beforeもしくはafter）を使う方法

paddingを使って高さの比率を維持する方法をご紹介しましたが、ボックスの中の要素をposition:absolute;で配置するのが難しい場合もあります。　例えば、ボックスの中の要素が長文のテキストだったりすると、サイズによってはボックスからはみ出すといった問題がおこります。疑似要素（beforeもしくはafter）を使った方法はこういった問題に対処できます。

サンプル（疑似要素beforeを使用した場合）

html

<div class=”box”><p>テキスト…テキスト</p></div>

1	<div class=”box”><p>テキスト…テキスト</p></div>

css

.box {
	display:flex;
}
.box:before{
	content:"";
	display: block;
	width:0;
	height:0;
	padding-bottom:35%;
	
}
.box p{
	padding:10px;
}

.box {

display:flex;

}

.box:before{

content:"";

display: block;

width:0;

height:0;

padding-bottom:35%;

}

.box p{

padding:10px;

}

結果
※サンプルソースに記載はないですがボックスの位置をわかりやすくするためbackground-colorを設定してあります

これは内包する要素に少し長めのテキストを配置した場合のサンプルです。ブラウザーのサイズ変更しても横幅・高さの比率は維持されますが、テキストが高さの比率をオーバーして下に延びた場合はその高さに準じて高さが変化することが確認できると思います。

ここで重要なポイントは横幅・高さの比率を維持したい要素にdisplay:flex;を設定することです。これを設定することで、疑似要素（beforeもしくはafter）とボックス内のが横並びに配置され疑似要素（beforeもしくはafter）の高さが反映されます。

疑似要素（beforeもしくはafter）には、paddingで高さの比率（%）を設定しておきます。width:0;を設定することで、ボックス内の要素（サンプルの場合の）の横幅が100％であっても横並びが維持されます。

ボックス内の要素（サンプルの場合の）の高さが疑似要素（beforeもしくはafter）の高さを超えた場合は、そちらの高さが優先される仕組みになり、ボックス内の要素をposition:absolute;で配置した場合に起こる問題を回避できます。

ボックスを横並びにするときは注意が必要です

複数のボックスを横並びにしてその高さを比率で設定する場合、比率を計算する際の横幅は個々のボックスの横幅ではなく全体の横幅になります。
例えば、横幅1000pxの親要素の中に、横幅200px 高さ150px　で5つのボックスが並ぶ場合の高さの比率（%）の計算式は下記になります。

高さ150 (px) ÷親要素の幅1000(px) ×100 = 15%

ちなみに内包するボックスの横幅は200÷1000×100で20％になります。

html

<ul>
<li><span>テキスト</span></li>
<li><span>テキスト</span></li>
<li><span>テキスト</span></li>
<li><span>テキスト</span></li>
<li><span>テキスト</span></li>
</ul>

<ul>

</ul>

css

ul{
	display:flex;
	list-style:none;
}
ul li{
	width:20%;
	height:auto;
	padding-bottom:15%;
	position:relative;
}
ul li span{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}