search

Found

info 概要

16:9 などの比率から padding-top ハックの % 値を逆算し、旧来の position 方式と aspect-ratio 方式のスニペットを両方表示。プレビューで比率を確認可能。

📘 使い方

  1. プリセット比率を選ぶか、W と H にカスタム値を入力する
  2. padding-top の % 値とプレビューで比率を確認する
  3. 用途に合わせて旧式 CSS か aspect-ratio 版のスニペットを選ぶ

CSSアスペクト比padding計算ツール

W
:
H
16:9 — 56.25%

padding-top の値

56.25 %

CSS（padding-top ハック）

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

モダン CSS（aspect-ratio）

.aspect-ratio-box {
  aspect-ratio: 16 / 9;
  width: 100%;
}
コピーしました

grid_view 関連ツール

Article

CSSアスペクト比padding計算ツール | padding-topハックの%値を逆算

幅:高さの比率を入力すると、レスポンシブな箱を作るための padding-top の % 値を逆算するツールです。旧来の position 方式と、モダンな aspect-ratio 方式の両方のコードを並べて表示し、プレビューで比率を視認しながら選べます。

💡 このツールについて

  • 比率から % 値を逆算: 16:9 や 4:3 といった比率から、padding-top: 56.25% のような値を割り出します。高さ÷幅×100 の計算を手で電卓に打つ手間がありません。
  • 2 種類のコードを併記: 古い環境でも崩れない padding-top ハックと、記述が短い aspect-ratio プロパティの両方を提示。プロジェクトの対応ブラウザに応じて選べます。
  • プレビューで比率を確認: 入力した比率がどんな形の箱になるか、画面上のプレビュー枠で形を確認できます。
  • プリセット 6 種: 16:9・4:3・1:1・21:9・3:2・9:16 を 1 クリックで呼び出せます。動画埋め込みや正方形サムネイル、縦型ショート動画などに対応。

🧐 よくある質問

Q. なぜ padding-top で比率を保てるのですか?

A. CSS では padding の % 値が「親要素の幅」を基準に計算される仕様があります。高さ基準ではなく幅基準なので、padding-top: 56.25% と書くと幅の 56.25% 分の高さが確保され、幅が変わっても比率が崩れません。この性質を利用したのが padding-top ハックです。

Q. aspect-ratio プロパティがあるのに、なぜ古い方式も必要ですか?

A. aspect-ratio は記述が 1 行で済む新しいプロパティですが、古いブラウザでは効きません。社内システムや組み込み端末など、対応ブラウザが限られる現場では padding-top ハックが確実な選択肢です。両方を見比べて、対応範囲に合うほうを採用してください。

Q. iframe や img を比率どおりに収めるには?

A. padding-top ハックの場合、外側の箱を position: relative にし、中身を position: absolute で上下左右 0 に貼り付けて width/height: 100% を指定します。本ツールが出力するスニペットにこの定型が含まれているので、中に iframe や img を入れられます。

Q. 割り切れない比率だと % 値はどうなりますか?

A. 例えば 3:2 なら 66.6666...% のように循環小数になります。本ツールは小数を必要な桁数だけ残して表示するため、実用上の誤差はほぼ生じません。

📚 豆知識

padding-top ハックは「Intrinsic Ratios」という名前で 2009 年頃に Thierry Koblentz 氏が紹介したのが広く知られるきっかけでした。CSS にまだ比率を直接指定する手段がなかった時代に、padding の % が幅基準で計算されるという仕様の盲点を逆手に取った発想で、レスポンシブ動画埋め込みの定番テクニックとして長く使われてきました。

その後、ブラウザ各社が標準の aspect-ratio プロパティを実装し、2021 年頃から主要ブラウザで安定して使えるようになりました。とはいえハック側の知識は、古い実装を読み解くときや対応ブラウザが限られる場面で役立ちます。