レスポンシブで要素の縦横比を維持する
レスポンシブで要素の縦横比を維持する
デバイスの表示領域サイズに合わせて、表示を最適化するレスポンシブデザイン。ページ内の要素の幅サイズを、親要素に対して相対値（%）で指定することが多くなります。
画像要素であれば、幅を相対値で指定すれば、高さもアスペクト比（縦横比）を維持して調整されます。では、そのほかの要素については、どのようにアスペクト比を維持すればよいのでしょう？
今回は、レスポンシブで要素の縦横比を維持する方法をご紹介します。
サンプル コード
<!-- HTML -->
<div id="sample">
<div></div>
</div>/* CSS */
#sample{
padding: 20px 0;
border: 1px solid gray;
}
#sample div{
padding-top: 25%; /* 1/4×100 */
background: pink;
}サンプル DEMO
このサンプルは、ボックスの右下角をドラッグすることで、親要素のサイズに応じた変化をご確認いただけます。
resize プロパティに対応していないブラウザ（IE 11 / iOS Safari 13）では、ブラウザウインドウのサイズを変化させたり、デバイスの向きを変えたりしてご確認ください。
サンプル Demo の使い方
外側のボックスは、右下の角をドラッグしてサイズを変更でき、コンテンツがあふれる場合にはスクロールバーが表示されます。内側のピンク色のボックスは、外側のボックスに追従してサイズを変化させますが、アスペクト比（縦横比）は一定のまま変わりません。
コード解説
/* CSS L3-6 */
#sample{
padding: 20px 0;
border: 1px solid gray;
}
#sample は、アスペクト比を維持させる div からみて、親要素になります。
ここでの指定は、視覚的にわかりやすくするためのもので、アスペクト比を維持させるために必要なものではありません。
/* CSS L7-10 */
#sample div{
padding-top: 25%; /* 1/4×100 */
background: pink;
}
background プロパティの指定も、視覚的にわかりやすくするためのもので、アスペクト比を維持させるために必要なものではありません。となると、肝心なのは一つだけ！
padding-top プロパティを25%に指定しています。padding プロパティを相対値（％）で指定するとき、その基準値は親要素の width の値になります。padding-top や padding-bottom でも同様です。
今回の場合は、 #sample の幅の25%（1/4）が #sample div の padding-top の値になります。#sample div は空のため、内容の高さ（height）が0となり、padding-top の値だけがボックスの高さになります。#sample div は display も width もデフォルトのままですから、幅は親要素と同じになります。したがって、#sample div の高さはその幅の1/4になり、アスペクト比は4:1で維持されるというわけです。
おわりに
今回はベーシックな要点だけを取り上げてみました。で、この手法をどうやって活かせばいいの？と思われるかもしれません。
次回以降、padding-top（あるいは padding-bottom） でアスペクト比を維持する手法の応用編を書きたいと思います。お楽しみに！