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

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

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

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

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

サンプルコード

<!--  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

外側のボックスは、右下の角をドラッグするとサイズを変えられます。ピンク色のボックスは、レスポンシブに幅が変わっても4:1アスペクト比を維持します。

サンプル Demo の使い方

サンプル Demo では、挙動がわかりやすいように、次のコードを追加しています。

/* CSS */
#sample{
  overflow: auto;
  resize: both;
}

外側のボックスは、右下の角をドラッグしてサイズを変更でき、コンテンツがあふれる場合にはスクロールバーが表示されます。内側のピンク色のボックスは、外側のボックスに追従してサイズを変化させますが、アスペクト比(縦横比)は一定のまま変わりません。

なお、IE、Edge、iOS Safari をお使いの方は、執筆時点では reseize プロパティが実装されていないため、残念ですがドラッグではサイズ変更できません。ブラウザのウインドウ幅を動かしたり、デバイスを横向きにして画面を回転させ、表示の変化をご確認ください。

コード解説

/* CSS L2-5 */
#sample{
  padding: 20px 0;
  border: 1px solid gray;
}

#sample は、アスペクト比を維持させる div からみて、親要素になります。

ここでの指定は、視覚的にわかりやすくするためのもので、アスペクト比を維持させるために必要なものではありません。

/* CSS L6-9 */
#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で維持されるというわけです。