ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > aspect-ratioプロパティとは?使い方について解説

aspect-ratioプロパティとは?使い方について解説

HTML/CSS

2023/08/30

2024/10/18

aspect-ratio_使い方記事サムネイル

aspect-ratioプロパティはアスペクト比を保持することができるCSSプロパティで、レスポンシブにとても便利です。
この記事ではaspect-ratioプロパティについて解説します。aspect-ratioプロパティの基本的な使い方や、実装例についてもあわせて解説していきます。

この記事で身につく内容 
  • aspect-ratioプロパティの使い方
  • aspect-ratioプロパティの使いどころ

 

aspect-ratio とは

aspect-ratioとは、アスペクト比を保持するためのCSSプロパティです。

アスペクト比とは、画像や画面の縦と横の長さの比率(縦横比)のことです。

例えば、640px × 480pxの画像のアスペクト比は「4:3」です。

アスペクト比

Webサイトをレスポンシブ対応する際に、このアスペクト比を考慮してコーディングする必要があります。

アスペクト比を考慮しないでコーディングすると、レスポンシブ対応で画面幅を変えた際に、アスペクト比が崩れて正しいレイアウトが表示できないためです。

アスペクト比を考慮してコーディングすることで、画面幅が変わってもアスペクト比を保持したまま、正しいレイアウトを表示できるようになります。

また、aspect-ratioプロパティはレイアウトシフト対策に役立ちます。

レイアウトシフトとは、Webサイトのページが読み込みから表示されるまでの間にレイアウトがずれたり、崩れたりする現象のことです。

レイアウトシフト対策では、従来はHTML上で画像にwidth属性とheight属性を指定していました。

<img src="images/dummy.png" alt="" width=”640” height=”480”>

aspect-ratioプロパティが登場したことによって、CSSでアスペクト比を指定できるようになり、保守性がより高まりました。

 

aspect-ratioの使い方

aspect-ratioプロパティは、下記のように記述します。

img {
  /* アスペクト比 16:9 */
  aspect-ratio: 16 / 9;
}

この場合、ブラウザのウィンドウの大きさを変更しても、画像のアスペクト比が 16 / 9に保持されます。

また、アスペクト比は割合数値で指定することもできます。

下記の例では、横幅2:縦幅1のアスペクト比を、2 / 1 の計算結果として「2」と記述しています。この記述でも、2 / 1 と指定した時と同じ表示になります。

img {
  /* アスペクト比 2 / 1 → 2 */
  aspect-ratio: 2;
}

画像の横幅が374px、縦幅が196pxの場合は、下記のようになります。

img {
  aspect-ratio: 374 / 196;
}

下記の記述では、例えば画像の横幅が374px、縦幅が196pxの場合です。

この場合、374 / 196とすることでアスペクト比を保持することができます。

  <div class="imgBox">
    <img src="images/dummy.png" alt="">
  </div>
.imgBox {
  max-width: 374px;
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
/* 画像の比率 width / height */
  aspect-ratio: 374 / 196;
}

表示結果

aspect-ratio1

このように、aspect-ratioプロパティは、以下のような形式で指定することができます。

aspect-ratio: 16 / 9; /* 16 : 9の比率  */
aspect-ratio: 374 / 196; /* widthとheightのそのままの数値  */
aspect-ratio: 2;  /* 割合数値  */

どの指定方式を使用するかは、案件のレギュレーションなどによって異なります。複数の指定形式が同じコードファイルの中に混在すると、煩雑になってしまうので注意しましょう。

 

aspect-ratioのブラウザ対応状況

aspect-ratioプロパティは、Internet Explorerを除く最新バージョンの各ブラウザで使用できます。

aspect-ratio

 

aspect-ratioの具体的な実装例

aspect-ratioを使った具体的な実装例は下記になります。

  • カード型レイアウトでアスペクト比を保持
  • YouTube動画埋め込み時にアスペクト比を保持
  • Googleマップ埋め込み時にアスペクト比を保持

カード型レイアウトでアスペクト比を保持

カード型レイアウトでaspect-ratioを使ったやり方です。ニュース一覧やお知らせ一覧で、アイキャッチ付きのカード型アイテムが複数並んでいるパターンのデザインで有効です。

<div class="cards">
  <div class="card">
    <div class="card__img">
      <img src="images/dummy.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/sample2.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/dummy3.jpg" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
</div>
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  /* 調整用 */
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;

}

.card__img {
  width: 100%;
}

.card__img img {
  /* 画像の比率 width / height */
  aspect-ratio: 374 / 196;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

表示結果

カード型レイアウトでaspect-ratio

このように、サムネイル画像を374 / 196のアスペクト比を保持したサイズに表示できます。

もしobject-fit: cover; が記述されていない場合、次のような表示になります。

object-fit:cover;なし

中央の画像には縦長の画像が入っていますが、374 / 196 の枠内に圧縮された状態で表示されています。object-fit: cover; を指定することによって、画像のアスペクト比を維持しつつ 374 / 196 の枠内を埋めるように拡大・縮小して表示することができます。

また、上記のコードでaspect-ratioを使用しないと、次のような表示になります。

aspect-ratio未使用

このようにaspect-ratioプロパティを使用することで、どんなサイズの画像がアイキャッチの中に入っても、設定したアスペクト比を保持した大きさに表示することができます。

 

WordPressのアイキャッチ画像を最適化する

例として、aspect-ratioプロパティはアイキャッチ画像が動的に変わる場合に使用できます。

WordPressでは、ブログ記事を投稿する際にアイキャッチ画像を設定することができます。Web制作者は、どんなサイズの画像サイズ(通常サイズ、横長、縦長...)がアイキャッチ部分に入っても、レイアウトが崩れないようにコーディングする必要があります。

もし、aspect-ratioプロパティを使用していないと、「縦長や横長の画像を入れたらレイアウトが崩れた」ということになりかねません。

aspect-ratioプロパティを使用してアスペクト比を指定することで、どんな画像サイズが設定されても、レイアウトが崩れないようなコーディングができます。

 

YouTube動画の埋め込み時にアスペクト比を保持

Youtube動画の埋め込み時に、アスペクト比を保持する場合は次のように記述します。

<div class="movie">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/eFDUT4ySB8Q" title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen></iframe>
  </div>
.movie {
    /* 調整用 */
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}

.movie iframe {
  aspect-ratio: 374 / 196;
  width: 100%;
  height: auto;
}

表示結果

iframeタグに対してaspect-ratio

 

Googleマップの埋め込み時にアスペクト比を保持

GoogleマップをWebページに埋め込むとき、アスペクト比を保持する場合は下記のようになります。

<div class="map">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.2808002194565!2d139.71145057578727!3d35.67008727259081!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188dd58df071c5%3A0x27f5b0b8a414593c!2z44ixVE9NQVA!5e0!3m2!1sja!2sjp!4v1692665371603!5m2!1sja!2sjp"
      width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
.map {
    /* 調整用 */
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}

.map iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

表示結果

iframeタグに対してaspect-ratio

 

 padding-topを使ったアスペクト比を保持の方法

aspect-ratioプロパティは比較的新しいプロパティです。このプロパティが使えなかったときは、padding-topを使った方法で代用していました。

<div class="cards">
  <div class="card">
    <div class="card__img">
      <img src="images/dummy.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
   </div>
   <div class="card">
    <div class="card__img">
      <img src="images/sample2.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/dummy3.jpg" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
</div>
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  /* 調整用 */
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
}

/* padding-topを使ったやり方 */
.card__img {
  position: relative;
  width: 100%;
  padding-top: calc(196 / 374 *100%); /* 画像の縦幅 / 画像の横幅 */
}

.card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

表示結果

padding-topを使ったやり方

aspect-ratioプロパティが使えるようになったため、padding-topを使ったやり方は使う機会があまりありませんが、予備知識として覚えておきましょう。古いコードを改修する時などに見かけることがあります。

 

aspect-ratioプロパティの注意点

画像のアスペクト比を保持するaspect-ratioプロパティですが、使いどころに注意しましょう。便利なので全ての画像に対して使用したいところですが、ときにはaspect-ratioプロパティを使用することで不都合になる場合があります。

例として、画像の領域が不自然に広がってしまうことがあります。次のコードで見てみましょう。

<div class="logo">
  <img src="images/logo.webp" alt="">
</div>
.logo {
  background-color: skyblue;
  display: block;
  width: 100%;

  /* 調整用 */
  max-width: 300px;
  margin-left: 40px;
  margin-top: 40px;
}

.logo img {
  display: block;
  aspect-ratio: 140 / 47;
  width: 100%;
  height: 100%;
}

表示結果

aspect-ratioの注意点

ここに、CSSのコードはそのままで、画像下の「ZeroPlus Gate」のロゴ画像を当てはめたとします。

画像比率

<div class="logo">
  <img src="images/logo.webp" alt="">
</div>

<!-- 画像サイズが違うもの -->
<div class="logo">
  <img src="images/img_logo-and-desc.svg" alt="">
</div>

表示結果

aspect-ratioの注意点

青背景の領域が、指定したアスペクト比の四角形です。この領域に画像サイズが異なる画像が入ると、画像の長い辺に応じて短い辺の比率が調整されるため、画像の領域が広がる場合があります。

元の画像を、指定したアスペクト比の中に無理やり表示させようとするイメージです。

 

また、object-fitプロパティを併用すると、下記のように画像が見切れることがあります。

.logo img {
  display: block;
  aspect-ratio: 140 / 47;
  width: 100%;
  height: 100%;

  /* 追記 */
  object-fit: cover;

}

表示結果

object-fitプロパティ使用

この場合、aspect-ratioプロパティを使用せずに画像サイズを調整します。下記のように記述してください。

.logo {
  background-color: skyblue;
  display: block;
  width: 100%;

  /* 調整用 */
  max-width: 300px;
  margin-left: 40px;
  margin-top: 40px;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  /* aspect-ratioプロパティを使用しない */
  /* aspect-ratio: 140 / 47; */
  object-fit: cover;
}

表示結果

aspect-ratioを使わない

画像の領域が画像サイズに合わせて表示されました。

このように、特定の領域にどんな画像サイズが来ても枠内に納めるイメージで表示したい場合に、aspect-ratioプロパティを使います。実際の使用例としては、下層ファーストビューやカード型レイアウトのお知らせ一覧などが該当するでしょう。

しかし、例えばロゴ画像は変更される可能性があり、その際に今のものと画像サイズが異なるかもしれません。そのような場合には、aspect-ratioプロパティは適しません。

このように、aspect-ratioプロパティを使用しないほうがいいときもあります。場所によって使い分けるようにしましょう。

 

まとめ :aspect-ratioプロパティはアスペクト比を保持するのに便利

aspecr-ratioプロパティについて解説しました。aspect-ratioプロパティはアスペクト比を保持するのに便利ですが、使いどころに注意して使用しましょう。

使いどころとしては、下記の個所が挙げられます。

  • 特定の領域にどんな画像が来ても領域内に画像を納めたい箇所
  • アイキャッチ付きのニュース一覧やお知らせ(カード型)
  • 下層FV...など

aspect-ratioプロパティまとめ

  • aspect-ratioとはアスペクト比を保持するためのCSSプロパティ
  • アスペクト比とは画像や画面の縦と横の長さの比率(縦横比)のこと
  • 複数の画像を、同じ比率・大きさの領域に収めたい場合に使用する
  • 全ての画像に対して使用せず、使いどころに注意する
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから