CSS Web制作

CSSのaspect-ratioでアスペクト比を固定してレスポンシブを簡単にする方法

縦横比を維持しながらレスポンシブってどうやるの?

縦横比=アスペクト比になりますが、これを維持しながらレスポンシブさせるにはいろいろと方法があり、一昔前はpadding-topを使う方法などがありました。

しかし今はaspect-ratioを使うと簡単に実装できるので、今回はその方法を解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

aspect-ratioとは?

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

 

アスペクト比とは?

アスペクト比は冒頭でも書いた通り、縦横の比率になります。

先ほどの画像の場合は『600px:400px → 6:4 → 3:2』となります。

私は元カメラマンなので馴染みがありますが、代表的なアスペクト比がはこちらです。

アスペクト比使われるものなど
4:3アナログ放送時代のテレビ
3:2一眼レフカメラ
16:9デジタルテレビ、YouTubeなど
1:1.618黄金比:人間が最も美しいと感じる比率
1:1.414白銀比:日本では古くから美しい比率とされ大和比とも呼ばれる

カメラマン的には『アスペクト比 = 縦横比 = 画角』とも呼びます。

 

aspect-ratioを使い方

aspect-ratioの書き方はこちらになります(デモはいろいろ書いてますが、重要なところだけ)

<div class="box"></div>
.box {
  aspect-ratio: width / height;
}

aspect-ratio: width / height;比率になるので、以下2つは同じ結果になります。

.box {
  aspect-ratio: 16 / 9;
}
.box {
  aspect-ratio: 80 / 45;
}

こちらのデモで左上のHTML・CSSをクリックすると画面幅が狭くなりますが、アスペクト比は保持したままとなっています。

右上の『EDIT ON CODE PEN』から全画面にして画面幅を変えた方が分かりやすいかと思います。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

例えばXDのデザインカンプの場合はWがwidthで、Hがheightとなります。

XDのデザインカンプ

XDのデザインカンプ

この場合はこのように書きます。

.box {
  aspect-ratio: 1280 / 720;
}
↓
.box {
  aspect-ratio: 16 / 9;
}

aspect-ratio: 1280 / 720;のままでも大丈夫ですが、aspect-ratio: 16 / 9;の方が分かりやすいですね。

またこのように書いてもOKです。

.box {
  aspect-ratio: 16 / 9;
}
↓
.box {
  aspect-ratio: 1.7777;
}

ただしこれは割り切れる場合の方がいいですね。

.box {
  aspect-ratio: 3 / 1;
}
↓
.box {
  aspect-ratio: 3;
}

 

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

例えばトップページの投稿一覧などで、カード型レイアウトがあると思います。

カード型レイアウトは以下のような構成が多いです。

  • アイキャッチ画像
  • タイトル
  • 本文抜粋
  • カテゴリー名
  • 日付

今回は解説用なので、アイキャッチ画像と本文のみのデモを用意しました。

そしてまずはアイキャッチ画像のアスペクト比がバラバラの状態がこちらです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

それぞれのアスペクト比は画面幅を狭くしても変わりませんが、ここは3つとも同じアスペクト比にしたいと思います。

それにはimgタグにaspect-ratioを書けばOKです。

img {
  aspect-ratio: 16 / 9;
}

しかしこれだけでは画像が潰れてしまいます。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

横長の画像は横に潰れ、縦長の画像は縦に潰れます。

これを防ぐには、以下のコードを追記します。

img {
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 追記 */
}

これで画像の中心から切り取る形になり、潰れなくなります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ただし元画像を見れば分かる通り、上下左右で切れて欲しくない箇所が切れてしまっています。

これを防ぐにはアスペクト比を良い感じに調整するしかありませんが、それ以前に極端にアスペクト比が異なる画像を使わないようにするのが一番です。

 

YouTube動画のアスペクト比を保持したまま埋め込む方法

まずは通常の埋め込み方法です。

埋め込みたい動画の下にある『共有』をクリックします。

YouTube:『共有』をクリック

YouTube:『共有』をクリック

共有をクリックするとこちらがポップアップされるので『埋め込む』をクリックします。

YouTube:『埋め込む』をクリック

YouTube:『埋め込む』をクリック

埋め込むをクリックするとこちらが開くので、右下の『コピー』をクリックします。

YouTube:『コピー』をクリック

YouTube:『コピー』をクリック

コードの下には『埋め込みオプション』がありますが、無視して進めます。

YouTube:埋め込みオプション

YouTube:埋め込みオプション

コピーしたコードをHTMLに貼れば完了です。

CSSでは何も調整していません。

See the Pen
YouTube埋め込み:アスペクト比調整なし
by junpei (@junpei-sugiyama)
on CodePen.

HTMLはデフォルトではwidth="560" height="315"になっていて、上記の通り左上のHTMLをクリックして画面幅を狭くしてもレスポンシブになっていません。

これをaspect-ratioを使ってレスポンシブにするには、以下のように書きます。

<div class="container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/2w60A9zDrBk"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</div>

iframeをdivタグで囲っていますwidthheightはそのままで大丈夫です)

CSSはこちらです。

.container {
  margin-inline: auto; /* 中央揃え */
  width: 95%;
}
.container iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

重要なのはiframeのところで、widthheightでHTMLの方を上書きしています。

あとはaspect-ratio: 16 / 9;でアスペクト比を固定しています。

デモでHTML・CSSをクリックして画面幅を狭くしたり、右上の『EDIT ON CODE PEN』から全画面にして画面幅を変えてみると、レスポンシブになっているのが分かります。

See the Pen
YouTube埋め込み:アスペクト比調整
by junpei (@junpei-sugiyama)
on CodePen.

 

Googleマップのアスペクト比を保持しながら埋め込む方法

GoogleマップもYouTubeと同じで、そのまま埋め込む幅と高さが固定されてレスポンシブになりません。

まずは通常の埋め込み方法ですが、埋め込みたい場所をクリックしたら『共有』をクリックします。

Googleマップ::共有をクリック

Googleマップ::共有をクリック

次は『地図を埋め込む』を選択してから『HTMLをコピー』をクリックします。

Googleマップ:地図を埋め込む→『HTMLをコピー』をクリック

Googleマップ:地図を埋め込む→『HTMLをコピー』をクリック

あとはHTMLにコピーしたコードを貼り付けるだけです。

こちらがデモになりますが、YouTubeと同じくレスポンシブになっていません。

See the Pen
Googleマップ:アスペクト比調整なし
by junpei (@junpei-sugiyama)
on CodePen.

HTMLはYouTubeと同じで、divタグで囲みます。

<div class="container">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2999.0203645371826!2d100.57034687007668!3d13.731020474806217!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29f019fa5dc0b%3A0x925821a8e8b7eb93!2z44Kk44Og44Gh44KD44KTIOOCv-OCpOODrOOCueODiOODqeODsw!5e0!3m2!1sja!2sjp!4v1679837542632!5m2!1sja!2sjp"
    width="600"
    height="450"
    style="border: 0"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
  ></iframe>
</div>

CSSもYouTubeの時と全く同じです。

.container {
  margin-inline: auto; /* 中央揃え */
  width: 95%;
}
.container iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

こちらがデモです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.


padding-topを使ったレスポンシブ方法

これはaspect-ratioが主流になる前の方法ですが、padding-topを使う方法もあります。

先ほどのYouTubeを例に見てみます。

HTMLは同じですが、CSSはこちらになります。

.container {
  margin-inline: auto; /* 中央揃え */
  padding-top: 56.25%; /* = height ÷ width × 100 */
  position: relative;
  width: 95%;
}
.container iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

ポイントは最初のpadding-top: 56.25%;で『高さ ÷ 幅 × 100』となります。

YouTubeのデフォルトサイズはwidth="560" height="315"なので『315 ÷ 560 × 100 = 56.25』となります。

デモはこちらです。

See the Pen
YouTube埋め込み:アスペクト比調整(padding-top)
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はaspect-ratioでアスペクト比を固定して、レスポンシブを簡単にする方法を解説してきました。

これまでも出来ないわけではありませんでしたが、aspect-ratioを使った方が幅と高さを入れるだけなので簡単ですね。

以上になります。

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-CSS, Web制作