aspect-ratioを活用したレスポンシブデザインのCSS解説

1. はじめに

Webデザインでは、要素のサイズを可変にしつつ、特定の比率を維持したい場面が多くあります。例えば、

• 画像や動画のアスペクト比を維持したままレスポンシブ対応したい
• 固定比率のカードレイアウトを作りたい
• フレームの中にスクロール可能なボックスを作りたい

このようなケースでは、CSSの aspect-ratio プロパティを活用することで、簡単に比率を維持したデザインを実装できます。

2. aspect-ratio の基本

aspect-ratio プロパティは、要素の 横幅（width）に対して高さ（height）の比率を指定 するものです。

基本構文

.element {
    aspect-ratio: 横 / 縦;
}

例えば、16:9 の比率を持つ要素を作りたい場合：

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

これにより、幅が変動しても高さは 常に「幅の16:9比率」 で調整されます。

3. 実践例

例1: 画像の比率を維持するレスポンシブカード

.card {
    width: 30%;
    aspect-ratio: 4 / 3;
    background: #ddd;
}

<div class="card"></div>

💡 width: 30% により、カードの幅は親要素に対して30%になり、 aspect-ratio: 4 / 3; により常に 4:3 の比率 になります。

例2: 動画コンテナを16:9で維持

.video-container {
    width: 80%;
    aspect-ratio: 16 / 9;
    background: black;
}

<div class="video-container"></div>

この方法なら、YouTubeの埋め込み動画などの比率を簡単に維持できます。

例3: フレームの中にスクロール可能なボックスを配置

HTML

<div class="sp_frame">
    <div class="sp_frame_box">
        <img src="example.jpg" alt="Sample">
    </div>
</div>

CSS

.sp_frame {
    width: 100%;
    aspect-ratio: 1 / 1.775;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sp_frame_box {
    width: 85%;
    aspect-ratio: 1 / 1.755;
    overflow-y: auto;
    background: white;
}

このコードでは、

• .sp_frame の 高さが width の 1.775倍
• .sp_frame_box の 高さが width の 1.755倍

となり、フレームの中にスクロール可能なエリアを作成できます。

4. まとめ

aspect-ratio を使うと、要素の比率を維持しながらサイズを柔軟に調整できる ため、レスポンシブデザインに最適です。

✅ 画像・動画の比率を固定 ✅ フレームやコンテナの高さを width に対して調整 ✅ CSSのみでシンプルに実装可能

今後のWebデザインにぜひ活用してみてください！