Bootstrapで画像・動画・iframeを比率維持でレスポンシブにする方法！初心者向けratio完全解説
生徒
「スマホで見ると、画像や動画の形が崩れてしまいます…」
先生
「それは画面サイズに合わせて伸び縮みできていない状態ですね。」
生徒
「Bootstrapで簡単に直す方法はありますか？」
先生
「ありますよ。.ratioを使うと、比率を保ったまま表示できます。」
1. レスポンシブと比率維持とは何か
レスポンシブとは、スマートフォンやタブレット、パソコンなど、画面の大きさに合わせて表示が変わる仕組みのことです。
比率維持とは、縦と横の形を崩さずに大きさだけを変えることです。写真を無理に引き伸ばさず、元の形を守るイメージです。
2. 画像や動画が崩れる原因を知ろう
画面が小さくなったとき、幅だけを縮めると高さとのバランスが崩れます。これが画像や動画が縦長や横長になる原因です。
ゴム風船を横だけ引っ張ると形が変わるように、比率を守らないと見た目が悪くなります。
3. Bootstrapのratioクラスとは
Bootstrap5にはratioという便利な仕組みがあります。これは、表示する箱に「この比率で表示してね」と教えるものです。
動画やiframe、画像を包むだけで、画面サイズに合わせて自動で調整されます。
<div class="ratio ratio-16x9">
<img src="/img/sample150-100.jpg" alt="サンプル画像">
</div>
4. よく使う比率の種類を覚えよう
ratioには、あらかじめ用意された比率があります。よく使われるのは16対9と4対3です。
16対9は動画向け、4対3は昔のテレビや資料向けと考えると分かりやすいです。
<div class="ratio ratio-4x3">
<img src="/img/sample120-120.jpg" alt="正方形に近い画像">
</div>
5. 動画をレスポンシブ対応させる方法
動画は特に比率が崩れやすい要素です。ratioを使うと、スマホでも黒帯が出ず、きれいに表示されます。
動画プレイヤーを箱に入れる感覚で使うと理解しやすいです。
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
6. iframeを安全に表示する考え方
iframeは、地図や外部ページを表示するために使われます。画面サイズが変わると、はみ出すことがあります。
ratioを使えば、枠の中にきちんと収まり、スクロールの手間も減ります。
<div class="ratio ratio-1x1">
<iframe src="https://example.com"></iframe>
</div>
7. ratioを使うときの注意点
ratioは必ず親の箱として使います。直接画像や動画に付けても動きません。
「包む箱を作る」という意識を持つことで、レイアウトの失敗が減ります。
8. 初心者が覚えておくと安心なポイント
画像や動画は、どの画面でも同じ形で見えることが大切です。ratioを使うだけで、難しい計算は不要になります。
Bootstrapのコンテナと組み合わせることで、自然で見やすいページが作れます。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
