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

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

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

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

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

サンプル コード

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

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