TailwindCSS aspect-ratio テクニック三選｜aspect-videoやaspect-squareが効かないときの解決法

TailwindCSS aspect-ratio（アスペクト比）が思い通りにならない？aspect-video が効かない、画像が歪む、iframe のレスポンシブ対応など、よくある3つの落とし穴と解決法を実例付きで解説します。

この問題、見覚えありませんか？

TailwindCSS aspect-ratio（アスペクト比）の指定で「効かない」と感じたことはありませんか？

「aspect-video を付けたのに16:9にならない」「画像に aspect-square を付けたら歪んでしまった」——こうした悩みを抱える方は多いのではないでしょうか。

今回は、TailwindCSS のアスペクト比指定でよくある3つの落とし穴と、その解決法を一緒に学んでいきましょう。

【体験談】私がこの記事を書いたきっかけ

私自身、今回の失敗例を整理していて「これは自分も同じようにつまずきそうだ」と感じました。

同じ理由、同じ原因で、おそらく何度も試行錯誤して期待の結果にたどり着くまで時間がかかることでしょう。

だからこそ、この記事でつまずきやすいポイントを整理しておきたいと思いました。

テクニック三選

それでは、TailwindCSS の aspect-ratio でよくある落とし穴と解決法を3つ紹介します。

テクニック1: aspect-video を付けたのにアスペクト比が変わらない

誤解シナリオ:

1. 読者Aさんは、動画プレースホルダーを16:9にしたい
2. 公式ドキュメント（https://tailwindcss.com/docs/aspect-ratio）で aspect-video を見つける
3. 「これで16:9になる！」と思い aspect-video を適用
4. 「あれ？アスペクト比が変わらない…」と困惑

NGパターン:

<div class="w-64 h-48 aspect-video bg-white flex items-center justify-center">
  aspect-video なのに 16:9 にならない
</div>

OKパターン:

<div class="w-64 aspect-video bg-white flex items-center justify-center">
  aspect-video で 16:9 になった
</div>

解説:

aspect-video は width と height の両方を指定すると効かない。両方指定すると、そちらが優先されてアスペクト比が無視されます。

width か height のどちらか一方だけを指定すれば、aspect-ratio が正しく適用されます。

ポイント:

aspect-* を使うときは、width か height のどちらか一方だけを指定しましょう。

---

テクニック2: 画像に aspect-square を付けたのに正方形にならない

誤解シナリオ:

1. 読者Bさんは、プロフィール画像を正方形に表示したい
2. 公式ドキュメント（https://tailwindcss.com/docs/aspect-ratio）で aspect-square を見つける
3. 「img タグにこれを付ければ正方形になる！」と思い適用
4. 「あれ？画像が引き伸ばされて歪んでしまった…」と困惑

NGパターン:

<img src="画像パス" class="w-32 aspect-square" alt="横長の画像">

OKパターン:

<img src="画像パス" class="w-32 aspect-square object-cover" alt="横長の画像">

解説:

img タグに aspect-square だけを付けると、画像が指定サイズに引き伸ばされて歪んでしまいます。

object-cover を併用すると、アスペクト比を維持したまま切り抜いて表示できます。画像全体を収めたい場合は object-contain を使います。

ポイント:

画像を特定のアスペクト比で表示したいときは、aspect-* と object-cover を併用しましょう。

---

テクニック3: iframe（YouTube埋め込み）のアスペクト比が崩れる

誤解シナリオ:

1. 読者Cさんは、YouTube動画をレスポンシブに埋め込みたい
2. 公式ドキュメント（https://tailwindcss.com/docs/aspect-ratio）を見るが、iframe への適用方法がわからない
3. 「width: 100% にすればいいかな」と思い w-full だけを適用
4. 「あれ？高さが固定のままで縦横比がおかしい…」と困惑

NGパターン:

<iframe class="w-full" height="315" src="https://www.youtube.com/embed/0dy1St39xeo" title="YouTube video"></iframe>

OKパターン:

<iframe class="w-full aspect-video" src="https://www.youtube.com/embed/0dy1St39xeo" title="YouTube video"></iframe>

解説:

iframe に w-full だけを指定すると、幅は広がるが高さは固定値のままになり、アスペクト比が崩れます。

aspect-video を使えば、幅に応じて高さが自動計算され、16:9 のアスペクト比を維持できます。height 属性は削除するか指定しないこと。

ポイント:

iframe をレスポンシブに埋め込むときは、height を削除して aspect-video を使いましょう。

---

まとめ

TailwindCSS aspect-ratio テクニック三選を紹介しました。

今回学んだポイントをおさらいしましょう：

• aspect-* が効かない → width か height のどちらか一方だけを指定
• 画像が歪む → object-cover を併用
• iframe のレスポンシブ対応 → height を削除して aspect-video を使う

これらは公式ドキュメントを見ただけでは気づきにくいポイントです。ぜひ実際のコーディングで活用してみてください。

また別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）