コーディングしていると、縦横比(アスペクト比)は保持しながら、レスポンシブに対応させたい場合があります。

paddingを使ったテクニックで対応することがメジャーでしたが、Safari15のリリースをもって、aspect-ratioが全モダンブラウザで使えるようになります。

• Edge
• Firefox
• Chrome
• Safari

モダンブラウザは一般的にこの4つを指します。

2021年6月現在、Safari以外のモダンブラウザでは既に使える状態です。Safari15のリリースは2021年の秋を予定しているようです。

IEのサポートが2022年6月に終了することもあり、aspect-ratioはそろそろ本格的に使われるようになるでしょう。

この記事ではaspect-ratioの使い方を、具体例も交えて紹介します。

aspect-ratio とは

aspect-ratioで縦横比(アスペクト比)を指定すると、その比率の領域を作ることができます。動画は下のコードを指定しています。

<div class="hoge"></div>

.hoge {
    aspect-ratio: 2 / 1;
    background-color: #eee;
}

従来のpaddingを使ったテクニックと不便な点

aspect-ratioがまだ使えない現在、paddingを使った方法で、縦横比(アスペクト比)を保持することがメジャーです。

<div class="hoge"></div>

.hoge {
    padding-top: 50%;
    background-color: #ddd;
}

例えばYouTubeの埋め込みに使う場合、YouTubeの縦横の比率は、横16:縦9です。従って、9 ÷ 16 × 100 = 56.25%を指定します。

このように直感的でないことが不便な点です。また、aspect-ratioを使った方法に比べてコード量も増えます。(詳しくは次のセクションを参照)

具体的な使い所3選

aspect-ratioが使える具体的な3つの場面を紹介します。paddingを使ったコードも記載しているので、コード量が減ることも確認できます。

YouTubeやGoogleマップのなどの埋め込み

YouTubeをレスポンシブで表示した時の挙動です。

YouTubeやGoogleマップはただコードを埋め込んだだけでは、コンテナサイズに合わせて、縦横比を維持しながらレスポンシブで表示出来ません。

<div class="youtube">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/z1eRHWynOMU" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

.youtube {
    aspect-ratio: 16 / 9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

上ように書くことで、YouTubeの比率(16:9)を保ちながら、レスポンシブで表示出来ます。

🌀 padding を使った方法

.youtube {
    position: relative;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

aspect-ratioを使った方法とHTMLは同じです。paddingを使った書き方はIEでもSafariでも意図した通りに表示されます。

ブログ等のサムネイル(object-fitと一緒に使う方法)

縦横比の違うサムネイル画像をレスポンシブで表示した時の挙動です。

<div class="posts">
    <div class="post">
        <div class="post-img">
            <img src="img/post.jpg" alt="" />
        </div>
        <h2 class="post-title">アスペク比に関しての説明</h2>
    </div>

    ...
</div>

.posts {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

@media screen and (min-width: 500px) {
    .posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 700px) {
    .posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-img img{
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

CMSを使ったブログなどでは、投稿する人が画像の縦横比を揃えるなどの編集が出来るとは限りません。

従って、どんな縦横比の画像を投稿しても見栄えが悪くならないようにする必要があります。動画のデモはあえて、縦長の画像と横長の画像を使っています。aspect-ratioとobject-fitで画像をトリミングすることで見た目を整えています。

🌀 padding を使った方法

.post-img {
    position: relative;
    padding-top: 50%;
}

.post-img img {
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

※ aspect-ratioを使った方法と異なる箇所だけ切り取りました。

paddingを使った書き方はSafariでは意図した通りに表示されます。IEはgridとobject-fitが使えないので、また別途対応が必要です。

アートディレクションする際のレイアウトシフト防止

レイアウトシフトを防止した時の挙動です。

画像のレイアウトシフトは、widthとheightを指定することで防げます。しかし、アートディレクションで縦横比が異なる画像を出し分ける際は、問題があります。

レイアウトシフトに関しては、上の記事で紹介しています。

アートディレクションに関しては、上の記事の後半で紹介しています。

<div class="art-direction">
    <picture>
        <source media="(max-width: 599px)" srcset="img/sp.png" />
        <source media="(max-width: 699px)" srcset="img/tb.png" />
        <img width="1600" height="800" src="img/pc.png" alt="" />
    </picture>
</div>

.art-direction {
    aspect-ratio: 800 / 1000;
}

@media screen and (min-width: 500px) {
    .art-direction{
        aspect-ratio: 800 / 800;
    }
}

@media screen and (min-width: 700px) {
    .art-direction{
        aspect-ratio: 1600 / 800;
    }
}

表のように画像を出し分けたいときは、上のコードのようになります。画像は読み込まれて表示されるまでに時間がかかることがあるので、予め画像が入る領域を作ってあります。

🌀 paddingを使った方法

.art-direction {
    padding-top: 125%;
    position: relative;
}

@media screen and (min-width: 500px) {
    .art-direction {
        padding-top: 100%;
    }
}

@media screen and (min-width: 700px) {
    .art-direction {
        padding-top: 50%;
    }
}

.art-direction img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

※ aspect-ratioを使った方法と異なる箇所だけ切り取りました。

IEはpictureが使えないので、また別途対応が必要です。

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

「模写修行」はこんな方におすすめ！

• 基礎学習を終えて実践的な経験を積みたい
• 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
• 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
• 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る