Bootstrapで画像・動画・iframeを比率維持でレスポンシブにする方法！初心者向けratio完全解説

画像・動画・iframeを比率維持でレスポンシブに（.ratioの活用）

先生と生徒の会話形式で理解しよう

生徒

「スマホで見ると、画像や動画の形が崩れてしまいます…」

先生

「それは画面サイズに合わせて伸び縮みできていない状態ですね。」

生徒

「Bootstrapで簡単に直す方法はありますか？」

先生

「ありますよ。.ratioを使うと、比率を保ったまま表示できます。」

1. レスポンシブと比率維持とは何か

レスポンシブとは、スマートフォンやタブレット、パソコンなど、画面の大きさに合わせて表示が変わる仕組みのことです。

比率維持とは、縦と横の形を崩さずに大きさだけを変えることです。写真を無理に引き伸ばさず、元の形を守るイメージです。

画面が小さくなったとき、幅だけを縮めると高さとのバランスが崩れます。これが画像や動画が縦長や横長になる原因です。

ゴム風船を横だけ引っ張ると形が変わるように、比率を守らないと見た目が悪くなります。

Bootstrap5にはratioという便利な仕組みがあります。これは、表示する箱に「この比率で表示してね」と教えるものです。

動画やiframe、画像を包むだけで、画面サイズに合わせて自動で調整されます。


<div class="ratio ratio-16x9">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</div>

ブラウザ表示

ratioには、あらかじめ用意された比率があります。よく使われるのは16対9と4対3です。

16対9は動画向け、4対3は昔のテレビや資料向けと考えると分かりやすいです。


<div class="ratio ratio-4x3">
    <img src="/img/sample120-120.jpg" alt="正方形に近い画像">
</div>

ブラウザ表示

動画は特に比率が崩れやすい要素です。ratioを使うと、スマホでも黒帯が出ず、きれいに表示されます。

動画プレイヤーを箱に入れる感覚で使うと理解しやすいです。


<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

ブラウザ表示

iframeは、地図や外部ページを表示するために使われます。画面サイズが変わると、はみ出すことがあります。

ratioを使えば、枠の中にきちんと収まり、スクロールの手間も減ります。


<div class="ratio ratio-1x1">
    <iframe src="https://example.com"></iframe>
</div>

ブラウザ表示

ratioは必ず親の箱として使います。直接画像や動画に付けても動きません。

「包む箱を作る」という意識を持つことで、レイアウトの失敗が減ります。

画像や動画は、どの画面でも同じ形で見えることが大切です。ratioを使うだけで、難しい計算は不要になります。

Bootstrapのコンテナと組み合わせることで、自然で見やすいページが作れます。