iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio

サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった（Can I Use）からついに自分のブログでも取り入れることに決めた。aspect-ratioのマークアップ

10 modern layouts in 1 line of CSS｜Google Chrome Developers

縦横比を指定したいタグにaspect-ratioの縦横比の必要な値とそこまでコンテンツを十分に広げるためのwidthとheightの値を入力する。iframeタグを16:9で表示するサンプルHTML<iframe src="https://example.com"></iframe>CSSiframe {aspect-ratio:16 / 9;width:100%;height:100%}デザインに必要なCSSの要素は三つで、それぞれの値は縦横比を指定するaspect-ratioが任意で、widthとheightはaspect-ratioの縦横比を十分にレスポンシブで整えるべくは常に「100%」となる。iframe以外のタグを使う場合、例えば領域のdivなどではheightを省略してwidthだけ記載してもaspect-ratioが機能することもある。iframeタグにwidthとheightの属性でサイズが指定されている場合でもCSSのwidthとheightの値が優先されるからそれらの属性を必ずしも消す必要はない。iframeタグにwidthとheightを付ける場合HTML<iframe src="https://example.com" width="100%" height="100%"></iframe>CSSiframe {aspect-ratio:16 / 9}CSSでwidthとheightを指定せず、iframeタグにそれらの属性を付けて「100%」を指定しらながらaspect-ratioだけ使っても結果は同じになる。aspect-ratioの入力値について二つの仕方で値を入力できる

横幅 / 縦幅

縦横比として半角スラッシュ（/）で区切って前に横幅、後に縦幅を単位なしで入力する。
例＿16:9ならば「16 / 9」と書く。

縦幅の横幅に対する割合

縦横比の縦幅を横幅で割った数値（横幅÷縦幅の答え）を単位なしで入力する。
例＿4:2ならば「2」と書く
計算式のcalc()を使うこともできる。
例＿7:5ならば「calc(7 / 5)」と書く。

aspect-ratioはiframe以外のタグでも縦横比を指定するために使えるけど、とにかくどんなデバイスの異なる画面幅でも表示するコンテンツの縦横比を一律で維持できるようになるから非常に便利だ。

縦横比を指定する従来の方法

最初は親要素にCSSで内側の余白のpaddingを付けてiframeの形を変える方法を使った。不要な親要素を置いて余分な余白を付けたりしなくてはならないのがデザインとして苦肉の策だった。しかし、その後、CSSの計算式のcalc()が出てiframeの縦横比を算出する方法が可能になったので、良いと思って使っていた。

それでもレスポンシブに対応するにはその他の振り分けの指定が必要になったり、マークアップが煩雑になるかも知れないから完全に理想的な方法とは呼べなかったし、iframeの縦横比を一発で指定できる方法があれば全てが上手く行ってマークアップも簡単なはずだから待ち望まれた。

aspect-ratioは正にコンテンツの縦横比を整えることに特化したCSSだから使えるようになって対応ブラウザが増えて実際に役立てられるようになったのは喜ばしい。

コメント