[CSS] いろんなアスペクト比に対応する!iframe,canvasの縦横を維持させる方法

レスポンシブデザインに、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:956.25%
4:375%
3:266.6666%

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

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

アスペクト比計算ツール
アスペクト比計算ツールはWebアプリで、アスペクト比を計算できる。任意の横幅と縦幅を入力してその比率を導き出せる仕様だ。またプリセットが備わっていてメジャーな縦横サイズ値のボタンをクリックすることで、簡単に比率を確認できる。

Googleマップを可変にする

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

See the Pen pozbXrx by Takuya Takaku (@takuya-takaku) on CodePen.light

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。