iframeタグのコンテンツの画像比をCSSのcalc()でレスポンシブに整える

HTMLのiframeタグのコンテンツは画像比がデバイスの画面幅にレスポンシブで統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。以前、何とかならないかと悩んでYouTube動画をレスポンシブで正確に表示する方法を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。しかし近年はもう一つの方法が可能で、CSS関数のcalc()を使ってiframeタグのコンテンツの画像比を計算しながらレスポンシブにバランスを崩さず、親ボックスのコーディングを省いて子の埋め込みをストレートに表示できる状況に変わって来たので、改めて取り上げてみたい。追記：2021年の終わり頃からaspect-ratioというiframeタグの縦横比を一発でレスポンシブに指定できる要素が多くのブラウザで対応して来てcalc()のコーディングを置き換えることにした。CSSのcalc()でiframeタグのコンテンツの画像比を指定する方法太陽電池式の卓上電子計算機（黒）

Solar calculator by AlexanderStein / Pixabay

レスポンシブ対応にはサイトの横幅を基準にして数学の比例式の内積は外積に等しい性質を用いて縦幅を割り出すように記載する。

参考サイト

説明できる？比例式"内項の積＝外項の積"

例えば画像比が16 : 9で、iframeタグのコンテンツの横幅が320pxでは縦幅は「16 : 9 = 320px : 縦幅」の比例式から「9 × 320px = 16 × 縦幅」となり、「縦幅 = 2860px ÷ 16」と導かれる。CSSのcalc()の記法では足し算／加法は半角プラスの「+」、引き算／減法は半角マイナスの「-」、掛け算／乗法は半角アスタリスクの「*」、割り算／除法は半角スラッシュの「/」を使う。足し算と引き算の値は単位あり（length）で、掛け算の掛けられる側か掛ける側の一つまでと割り算の割られる側の値は単位あり、その他は単位なし（number）になる。そして加減の記号は値との間に「1px + 2px - 3px」のように半角スペースを必ず取る。さもないと値の一部（マイナス）として読み込まれるから演算はエラーになってしまう。乗除の記号は「1px*2/3」のように値と隣り合ってもエラーにはならない。見辛いので、間違えないためには半角スペースを取るのが望ましい。その他、複数の計算の順番を半角括弧の「()」で分けたり、一つの式の中に他の計算のためのcalc()を追加しても構わない。デザインの注意点としてサイトで表示するカラムの左右に余白がある場合はiframeタグのコンテンツの横幅から各々の余白の長さを差し引いて計算しなくては縦幅が大きくなり過ぎてしまう。後、基準となる横幅には固定値を使わなくてはならない。%の相対値を使うと縦幅を算出する際に基準が横幅ではなくて親ボックスの縦幅になってしまう。calc()の計算がバラバラになってデザインが崩れるのを防ぐために基準となる横幅には固定値を使う。するとサイトで表示するカラムの両側に隙間があるかどうかも考慮しなくてはiframeタグのコンテンツの横幅が合わなくなるかも知れない。一般的にスマホと縦向きタブレットは画面の横幅一杯で、横向きタブレットとパソコンは両側に隙間ができるデザインが多い。前者は画面の横幅に、後者はカラムの横幅にコンテンツの横幅を合わせなくてはならない。少なくとも二つの場合を想定してCSSをメディアクエリの@media screenで振り分けて記載すると良いと思う。コーディングのサンプル

子猫との元気な触れ合い｜些細な日常

iframeタグのコンテンツの画像比が16 : 9、サイトの表示するカラムの左右の余白が16pxずつ、カラムの横幅を769px以上と768px以下の二つ（概ね横向きタブレットの画面幅からカラムの両側に隙間を取るデザイン）に振り分ける。HTML<iframe src="コンテンツURL" width="640" height="480"></iframe>CSS@media screen and (min-width:769px){ .post-body iframe {width:737px;height:414.5625px;} } @media screen and (max-width:768px){ .post-body iframe {width:calc(100vw - 32px);height:calc((100vw - 32px) * 9 / 16);} }ドライブから埋め込みコードのHTMLを取得している。デフォルトではwidthとheight（縦幅と横幅）で、640×480の大きさで、4 : 3の画像比が取られている。CSSでレスポンシブに横向きタブレット以上ならばカラムか縦向きタブレット以下ならば画面幅に横幅を合わせながらそれを基準としてcalc()を使って縦幅を計算して画像比を16 : 9で表示している。サンプルのドライブの埋め込みの場合はコンテンツの画像自体の画像比は変わらなくてiframeタグの表示領域の画像比だけを変えられる。他の場合、YouTubeの埋め込みなど、iframeタグの表示領域とコンテンツが一致していると両方の画像比を同時に変えられる。大きなデバイス用の@media screen and (min-width:769px)：画面の最小幅を769pxとする振り分けのカラムの横幅にコンテンツを合わせるデザインはレスポンシブではなくて常に同じサイズで表示されるから横幅のwidthも縦幅のheightもcalc()を使わずに自分で計算して固定値で指定できる。カラムの横幅が769pxで、左右の余白が16pxずつとするとiframeタグのコンテンツの横幅は「769px - 16px - 16px」を解いて「737px」になる。縦幅は横幅を基準とした画像比から割り出せる。16 : 9の画像比で仕上げるならば比例式の内積は外積に等しい性質から「737px : 縦幅 = 16 : 9」の「縦幅 × 16 = 737px × 9」を解いて「414.5625px」になる。縦幅にcalc()を使った場合のソースコード.post-body iframe {width:737px;height:calc(737px * 9 / 16);}※heightの値には計算結果の「414.5625px」が適用される。値によって割り切れなくなるので、かりに必要なのは固定値でも縦幅にcalc()を使って計算式で記載しておくと閲覧者のブラウザに任せて――小数点以下の扱いが変わり得る――デザインを付けられる。小さなデバイス用の@media screen and (max-width:768px)：画面の最大幅を768pxとする振り分けの画面の横幅一杯にコンテンツを表示するデザインの横幅のwidthには可変単位のvwの画面幅に対して100%を意味する「100vw」を使う。左右の16pxずつの余白を引くと値の計算式は「calc:(100vw - 32px)」になる。縦幅の値の計算式も横幅を基準にして画像比と比例式の内積は外積に等しい性質から「calc((100vw - 32px) * 9 / 16)」によって導き出される。CSS関数の計算の順番が影響するので、先に解くために横幅の引き算が入った部分は半角括弧に入れなくてはならない。

コメント