レスポンシブデザインに、iframeやcanvasのメディアタグ埋め込みが要求される場合、表示を維持するため縦横サイズが保たれた状態にしなければならない。きっとそのようなケースに少なくない。

そのようなときは、おそらくpadding-top: 56.25%;とかpadding-top: 75%;とかpadding-top: 66.6666%;などプロパティを目にすることもあると思う。

これは矩形要素がアスペクト比を維持するために適用するCSSプロパティのひとつなのだが、その比率によって数値が変わるわけだ。たとえば、横1920px縦1080pxの比率は「 16:9 」に該当する。横1024px縦768pxの比率は「 4:3 」に該当する。

ところが、デザインによってはこの限りではない。黄金比や白銀比だってあるし、固有の比率に調整しなければならないことだってある。

このエントリーでは、デザイン固有の縦横を維持させる方法を紹介したい。

アスペクト比とは

アスペクト比は、矩形の縦横比率のこと。縦横比でも通じる。また映像デバイスの場合、画面比率と呼ばれることもある。

レスポンシブデザインがデファクトスタンダードとなった昨今では、メディアタグを可変対応するときにアスペクト比が用いられる。

埋め込みタグを可変にする

それでは埋め込みタグを可変にする記述を確認してもらいたい。

HTML

<div class="wrapper">
  <iframe src="xxxxx" width="xxx" height="xxx">
</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  padding-top: ◯◯%; // 👈 ココ
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上記の例では、<iframe>だけれど<canvas>でも同様にすればよい。

まず埋め込みタグを梱包する要素が必要だ。上記の例では、<div class="wrapper">が梱包要素だ。この梱包要素でアスペクト比を維持して、埋め込みタグはそこにフィットさせるというのが作法になる。重要なのは梱包要素のpadding-top: ◯◯%;だけで、そのほかのプロパティは大概変わることがない。

さてポイントのpadding-top: ◯◯%;であるが、アスペクト比で変わる。前述したように、padding-top: 56.25%;やpadding-top: 75%;を目にしたことがあるのではないかと想像できたのは、オーソドックスなアスペクト比に準拠した％値だったからだ。

せっかくだから、そのまま覚えてしまうのがよいと思える。早見表を用意した。

アスペクト比	パーセント
16:9	56.25%
4:3	75%
3:2	66.6666%

ここまでは、もっとも代表的な比率をもとに算出した結果であるが、デザイン固有のサイズだった場合は、別途アスペクト比を求めなければならない。計算しなければならないわけだ。これが面倒くさい。きっとこの対応を求められた頃には、計算式を忘れてしまっていることだろう。

だからツールを使うことをオススメする。

Googleマップを可変にする

Googleマップの埋め込みタグを可変にしてみたい。この場合のアスペクト比は、「 5:3 」という世にも珍しい比率で試したい。計算したサイズは、横500px縦300pxである。

まとめ

デザイン固有の縦横比を維持させる方法の紹介だった。一般的なアスペクト比であるならば、早見表のとおりにpadding-top: ◯◯%;を指定するとよい。デザイン固有のサイズを求められたならば、ツールを活用してみてはどうだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。