HTML&CSS

CSSでアスペクト比を簡単に固定する方法【初心者向け徹底解説】

cssでアスペクト比を固定する方法

CSSのアスペクト比（aspect ratio）は、画像や動画、ボックスの縦横比を一定に保つための便利なプロパティです。
本記事では、初心者にもわかりやすく、具体例を交えて解説します！「アスペクト比を固定したいけど方法が分からない」という方は必見です。

ワンコ
ワンコ

アスペクト比とは？

アスペクト比は、要素の幅と高さの比率を意味します。たとえば以下のような比率がよく使われます：

  • 16:9：テレビや動画の標準フォーマット
  • 1:1：正方形、特にSNSのアイコンや画像
  • 4:3：昔のテレビやプレゼンテーション用のプロジェクタ

これらの比率をCSSで設定することで、レスポンシブデザインを簡単に実現できます。

CSSでアスペクト比を設定する方法

方法1：aspect-ratioプロパティを使用

CSS3で導入されたaspect-ratioを使えば、簡単に比率を固定できます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen. 

<div class="container">
  16:9のボックス
</div>
.container {
  width: 100%;
  aspect-ratio: 16 / 9; /* 横:縦の比率 */
}

特徴

  • コードが簡潔で、他のプロパティと直感的に併用可能。
  • 最新ブラウザ（Chrome、Edge、Firefox、Safari）でサポート。

注意点

aspect-ratioは一部の古いブラウザでは動作しないため、パディング法を併用することを検討しましょう。

方法2：パディング法（従来の方法）

パディング法では、padding-topを使用してアスペクト比を再現します。
以下は16:9のアスペクト比を再現する基本例です。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen. 

<div class="wrapper">
	<div class="container">
		<div class="content">
			16:9のボックス
		</div>
	</div>
</div>
.wrapper {
	/* 幅の指定 */
	width: 300px;
}

.container {
	position: relative;
	padding-top: 56.25%;
	/* 16:9の比率 */
	background-color: #3880ff;
	/* デモ用背景色 */
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.2rem;
}

なぜ「56.25%」なのか？

なぜ、「なぜ56.25%なのか？」は以下の計算式で説明できます。

1.アスペクト比16:9を小数で表す

高さ÷幅 = 9÷16 = 0.5625

2.パーセンテージに変換

0.5625 × 100 = 56.25%

他のアスペクト比も同様に計算できます

4:3 → 3÷4 = 0.75 → 75%
1:1 → 1 ÷ 1 = 1.0 → 100%

方法3：パディング法（疑似要素を使ったアスペクト比の実現）

HTMLを簡潔に保ちたい場合、::beforeなどの疑似要素を活用する方法が効果的です。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen. 

<div class="container">
	<div class="content">疑似要素で16:9</div>
</div>
.container {
  width: 300px; /* 固定幅 */
  position: relative;
  color: #fff;
  background-color: #3880ff;
}

.container::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9の比率 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

まとめ

最新のaspect-ratioプロパティは簡潔で直感的ですが、古いブラウザに対応するためにパディング法を併用するのがおすすめです。
また、疑似要素を活用することでHTMLをシンプルに保ちながら、同様の効果を得られます。

-HTML&CSS
-, ,