レスポンシブで要素の縦横比を維持する

レスポンシブで要素の縦横比を維持する

デバイスの表示領域サイズに合わせて、表示を最適化するレスポンシブデザイン。ページ内の要素の幅サイズを、親要素に対して相対値（%）で指定することが多くなります。

画像要素であれば、幅を相対値で指定すれば、高さもアスペクト比（縦横比）を維持して調整されます。では、そのほかの要素については、どのようにアスペクト比を維持すればよいのでしょう？

今回は、レスポンシブで要素の縦横比を維持する方法をご紹介します。

サンプル コード

  1. <!--  HTML  -->
  3. <div id="sample">
  4.   <div></div>
  5. </div>
  1. /*  CSS  */
  3. #sample{
  4.   padding: 20px 0;
  5.   border: 1px solid gray;
  6. }
  7. #sample div{
  8.   padding-top: 25%;  /* 1/4×100 */
  9.   background: pink;
  10. }

サンプル 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） でアスペクト比を維持する手法の応用編を書きたいと思います。お楽しみに！