模写修行メディア

CSSで縦横比(アスペクト比)を固定できるaspect-ratioについて!具体的な使い道も紹介!

※ 当サイトの記事には、広告を含む場合があります。

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

昔はpaddingを使ったテクニックで対応していましたが、今はaspect-ratioを使うともっと簡単です。

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


私たちが運営している、現役エンジニアによるメンタリングサービス:Hello Mentorは、1人1人にオーダーメイドでロードマップを作成しています。

web制作/web開発/デザインまで、経験豊富な現役エンジニアがメンターをします。

  • 検索しても解決しない問題が多い...
  • 勉強方法や目指す方向が合っているか不安...
  • 転職・独立できるのか不安...
  • SNS等で情報が多すぎて何が本当かわからない...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

プロのサポートで3倍速でスキルアップ!

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

この記事の目次

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;
}
paddingの計算
padding-top = 高さの比率 ÷ 幅の比率 × 100

例えば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は同じです。

ブログ等のサムネイル(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を使った方法と異なる箇所だけ切り取りました。

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

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

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

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

CLS(Cumulative Layout Shift)とは?対策・改善方法も紹介!

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

HTMLのsrcset属性やpictureタグを使ったレスポンシブイメージを解説
<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;
    }
}
デバイス画像サイズ
SP800 × 1000 の画像
TB800 × 800 の画像
PC1600 × 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を使った方法と異なる箇所だけ切り取りました。

【プログラミンング学習中の方へ!】独学の非効率さを解消して3倍速でスキルアップしませんか?

Hello Mentor(ハローメンター)
Hello Mentor(ハローメンター)

プログラミングは独学可能です。このメディアを運営しているメンバーも独学で勉強してきました。ただし、独学には大きな問題があります。

独学は下記の5つの点でとても非効率です!

  • 最適な学習計画が立てられない
  • 正しい教材の選定ができない
  • 間違った方向に進んでいる可能性がある
  • 必須スキルの欠落に気づかない
  • 30分以上悩むのは時間の無駄

この問題を解決するために、現役エンジニアによるメンタリングサービスHello Mentor(ハローメンター)を始めました。

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

プログラミングスクールのように高額な料金はかかりません。少しの投資で圧倒的に学習を効率化したい方は、ぜひ下記のリンクからサービスサイトをご覧ください。

あなた専用のロードマップを作成!

メンタリングの内容を見てみる

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

web制作ロードマップ解説動画プレゼント👉

LINE登録でGET

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材