【CSS】【アスペクト比】aspect-ratioプロパティで要素の縦横比を簡単に設定する方法

2024年9月17日2024年10月2日

はじめに

WEBデザインにおいて、要素の縦横比を調整するのはよくある課題です。特に、画像や動画、カードレイアウトなど、特定のアスペクト比を維持したい場合、従来の方法ではpaddingを利用したトリックやJavaScriptによる調整が必要でした。しかし、CSSのaspect-ratioプロパティを使えば、これが非常に簡単になります！

この記事では、aspect-ratioプロパティの使い方や注意点について詳しく解説していきます。

概要

aspect-ratioプロパティは、要素の縦横の比率を簡単に指定できるCSSのプロパティです。これを使うと、幅に合わせて高さを自動で計算してくれるので、面倒な調整が不要になります。値の指定は「横:縦」の形式で行います。例えば、aspect-ratio: 16 / 9;と書けば、その要素は常に16:9の比率を保つようになります。

それでは、このプロパティを使ったシンプルな例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aspect-ratioの例</title>
    <style>
        .aspect-box {
            width: 100%;
            max-width: 500px;
            aspect-ratio: 16 / 9;
            background-color: #e0e0e0;
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="aspect-box"></div>
</body>
</html>

この例では、.aspect-boxクラスの要素にaspect-ratio: 16 / 9;を設定しています。この要素の幅は100%（最大500px）に設定されており、それに合わせて縦横比16:9が自動的に保たれます。画面サイズが変わっても、この比率は変わらず、見た目がきれいに維持されるのがポイントです。

注意点

aspect-ratioプロパティは、明示的に高さや幅が指定されている場合、それらのプロパティに影響を受けます。例えば、要素にすでに高さが設定されていると、aspect-ratioはCSSの記載の順番によっては無視される可能性があります。このため、aspect-ratioを使う際は、他のCSSプロパティとの組み合わせに気をつけてください。

活用例

aspect-ratioをうまく使うと、レイアウトに統一感を持たせることができます。例えば、ギャラリーの画像やカードのレイアウトに使うと、画像のサイズがバラバラでも一貫した比率で表示されるので、全体のデザインが整いやすくなります。

以下に、カードレイアウトにaspect-ratioを使った例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カードレイアウトの例</title>
    <style>
        .card-container {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            max-width: 1000px;
            padding: 100px;
            width: 100%;
            margin: 0 auto;
        }
        .card {
            flex: 1 1 calc(33.333% - 16px);
            aspect-ratio: 4 / 3;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">カード1</div>
        <div class="card">カード2</div>
        <div class="card">カード3</div>
        <div class="card">カード4</div>
        <div class="card">カード5</div>
        <div class="card">カード6</div>
    </div>
</body>
</html>