―CSS

【レスポンシブ対応必見】CSSのaspect-ratioの基本と効果的な使い方

2024.10.30

2024.11.22

CSS

aspect-ratioとは？
基本的な使い方
実装例
メリットと注意点
まとめ
参考文献

aspect-ratioとは？

aspect-ratioプロパティは、要素の縦横比（アスペクト比）を指定するためのプロパティで、画像や動画などのコンテンツをデバイスサイズに応じて設定した比率で自動的に縮小・拡大されながら維持できるのが特徴です。このプロパティを使用することで、デザインが崩れることなく、画面の幅に応じて柔軟にレイアウトを調整できます。特に、レスポンシブ対応が求められるモバイルファーストデザインやユーザーエクスペリエンスの向上を目指す場合に効果的です。

基本的な使い方

aspect-ratioプロパティは、縦:横の比率を指定することで使用され、例えば、16:9や1:1のようなアスペクト比を簡単に定義できます。使用方法としては下記のようにaspect-ratio: 16 / 9;のように記述することで、要素が常に16:9の比率を保つように設定可能です。また、正方形のレイアウトを実現したい場合には、aspect-ratio: 1;とシンプルに書くことで、縦横比1:1の要素を素早く作成できます。このようにaspect-ratioを活用することで、比率が崩れないレイアウトを簡単に実現できます。

/* 16:9 のアスペクト比を設定 */
.selector {
  aspect-ratio: 16 / 9;
}

実装例

以下のコードでは、サムネイル画像のアスペクト比が16:9に設定されており、画面幅に応じて自動的に画像の高さが調整されます。そのため、画像の素材がレイアウトの縦横比と異なる場合でも、aspect-ratioの効果で柔軟な対応が可能です。また、object-fit: cover;を指定することで、画像がコンテナサイズに合わせてトリミングされ、設定したアスペクト比を維持しつつ表示されますので異なるデバイスでのレイアウトが崩れることなく、ユーザーにとって見やすいデザインが実現が可能です。

<!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>
      .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        max-width: 600px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .card-thumbnail {
        aspect-ratio: 16 / 9;
        overflow: hidden;
      }

      .card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .card-content {
        padding: 16px;
      }
    </style>
  </head>

  <body>
    <div class="card">
      <div class="card-thumbnail">
        <img src="https://picsum.photos/1200/360" alt="Sample Thumbnail">
      </div>
      <div class="card-content">
        <h2>タイトル</h2>
        <p>テキストテキストテキストテキスト</p>
      </div>
    </div>
  </body>

</html>

メリットと注意点

メリット

柔軟なレイアウト設計にも対応可能
aspect-ratioプロパティを使用することで、コンテンツの比率を保ちながら表示できるため、画面サイズが変わっても縦横比を維持することができます。これにより、画面のリサイズにも柔軟に対応できるレイアウト設計に対応可能です。

レスポンシブデザイン対応
異なるデバイスや画面サイズにおいても、一貫したアスペクト比でコンテンツを表示できるため、レスポンシブデザインの実装が非常に簡単になります。デバイスごとの最適化が求められる現代のモバイルファースト設計にも適しています。

注意点

特にはないのですが古いブラウザのバージョンには対応していませんのでそちらだけ注意が必要です。

まとめ

aspect-ratioプロパティを活用すると、要素の縦横比を保ちながら表示を調整できるため、柔軟かつ一貫性のあるデザインを簡単に実現できます。特に、さまざまなデバイスサイズに対応するレスポンシブデザインにおいては非常に便利で、画像や動画といったメディア要素の比率を保ったまま表示する際に役立ちます。

参考文献

aspect-ratio – CSS: カスケーディングスタイルシート | MDN
HTML5&CSS3デザイン現場の新標準ガイド【第2版】