このページは Cloud Translation API によって翻訳されました。

Chromium、Safari テクノロジープレビュー、Firefox Nightly で新たにアスペクト比の CSS プロパティをサポート

レスポンシブレイアウトで間隔の維持に役立つ新しい CSS プロパティ。

Una Kravets

注: 概要: レスポンシブウェブデザインで、また累積的なレイアウトシフトを防ぐには、アスペクト比と呼ばれる幅と高さの比率を一定に保つことが不可欠です。このたび、Chromium 88、Firefox 87、Safari Technology Preview 118 でリリースされる新しい aspect-ratio プロパティにより、これを簡単に実現できるようになりました。

アスペクト比

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

アスペクト比は、一般的に次のディメンションの 2 つの整数とコロンで表現されます。または x:y を指定します。写真のアスペクト比は 4:3 と 3:2 が一般的ですが、動画、最近の消費者向けカメラではアスペクト比が 16:9 になる傾向があります

アスペクト比が同じ 2 つの画像。1 つは 634 × 951 ピクセル、もう 1 つは 200 × 300 ピクセル。アスペクト比はどちらも 2:3 です。 — 同じアスペクト比の 2 つの画像。1 つは 634 × 951 ピクセル、もう 1 つは 200 × 300 ピクセル。アスペクト比はどちらも 2:3 です。

レスポンシブデザインの登場に伴い、アスペクト比を維持することが特に画像の寸法が異なり、利用可能な要素によって要素のサイズも変わるため、選択します。

アスペクト比の維持が重要となる例を以下に示します。

レスポンシブ iframe を作成する。iframe は親の幅の 100% で、高さは変わらない特定のビューポート比率
画像、動画、埋め込み用の組み込みプレースホルダコンテナを作成するアイテムが読み込まれてスペースを占めるときに再レイアウトされないようにします。
インタラクティブなデータ可視化や SVG アニメーションのための、均一でレスポンシブなスペースの作成
カードやカレンダーの日付などの複数要素のコンポーネント用に、均一でレスポンシブなスペースを作成する
サイズが異なる複数の画像に対して均一でレスポンシブなスペースを作成（他の画像と一緒に使用可能） object-fit)

オブジェクトの適合

アスペクト比を定義すると、レスポンシブなコンテキストでのメディアのサイズ設定に役立ちます。このほかにバケットは object-fit プロパティです。これにより、ユーザーはオブジェクト（画像など）がどのようにブロック内に収まるようにする必要があります。

オブジェクトフィットデモの可視化 — さまざまな `object-fit` 値を示します。Codepen のデモをご覧ください。

initial と fill の値により、スペースを埋めるように画像が再調整されます。この例では、ピクセルを再調整します。理想的ではありません。object-fit: cover の用途スペースを埋める画像の最小サイズ。これに基づいて画像を切り抜くあります。「ズームイン」します。最小の境界で行われます。object-fit: contain を使用すると、画像全体が常に表示されます。したがって、cover とは逆で、最大境界のサイズを受け取ります。（上の例では幅）で、アスペクト比を維持しながら画像のサイズを変更します。スペースに収まりますobject-fit: none ケースでは、画像の中央がトリミングされます。（デフォルトのオブジェクト位置）を元のサイズのまま維持します。

object-fit: cover は、ほとんどの状況で機能し、異なるサイズの画像を扱う場合、この方法では情報が失われます（画像のトリミングが表示されます。

これらの細部が重要な場合（例: フラットな構成の美容商品を扱う場合）は、重要なコンテンツを切り抜くことは禁止されています。そのため理想的なシナリオでは UI スペースに合わせて各種サイズを柔軟に調整できます。

従来の手法: `padding-top` でアスペクト比を維持する

padding-top を使用して、カルーセル内のポストプレビュー画像に 1:1 のアスペクト比を設定します。 — `padding-top` を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。

レスポンシブにするには、アスペクト比を使用できます。これにより特定のアスペクト比サイズを設定し、残りのメディアを個々の軸（高さまたは幅）を基準とします。

画像のアスペクト比に基づいてアスペクト比を維持するための、現在広く受け入れられているクロスブラウザソリューション「パディングトップハック」と呼ばれます。このソリューションでは、親コンテナと子コンテナの絶対位置に配置されます。設定する割合としてアスペクト比を計算し padding-top として指定します。例:

アスペクト比 1:1 = 1 / 1 = 1 = padding-top: 100%
アスペクト比 4:3 = 3 / 4 = 0.75 = padding-top: 75%
アスペクト比 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
アスペクト比 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

アスペクト比の値を特定できたので、それを親コンテナに適用します。たとえば次のようになります。

<div class="container">
  <img class="media" src="..." alt="...">
</div>

次に、以下の CSS を作成します。

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

`aspect-ratio` でアスペクト比を維持しています

アスペクト比を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。 — `aspect-ratio` を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。

残念ながら、これらの padding-top 値の計算はあまり直感的ではなく、ある程度のオーバーヘッドとポジショニングが増加します。新しい固有の aspect-ratio CSS を使用プロパティは、アスペクトの維持に使用する言語です。より明確になります。

同じマークアップで、padding-top: 56.25% を aspect-ratio: 16 / 9 に置き換え、 aspect-ratio を指定された比率の width / height に変更します。

padding-top の使用

.container {
  width: 100%;
  padding-top: 56.25%;
}

アスペクト比の使用

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top の代わりに aspect-ratio を使用すると、はるかに明確になり、パディングが全面的に見直されません。プロパティを使用して、通常の範囲外の動作をします。

この新しいプロパティではアスペクト比を auto に設定（本来のアスペクト比に置き換えられた要素は、そのアスペクト比を使用する）比率推奨のアスペクト比はありません。」auto と <ratio> の両方が width を height で割った値が推奨アスペクト比です。次の要素に置き換え本質的なアスペクト比。その場合は、代わりにアスペクト比が使用されます。

例: グリッド内の一貫性

これは、CSS グリッドや Flexbox などの CSS レイアウトメカニズムともうまく連携します。リストを検討する 1:1 のアスペクト比を維持したい場合（たとえば、スポンサーアイコンのグリッドなど）に子を追加します。

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

</ph> <ph type="x-smartling-placeholder">

さまざまなアスペクト比の寸法の親要素を持つグリッド内の画像。Codepen のデモをご覧ください。

例: レイアウトシフトを防ぐ

aspect-ratio のもう一つの優れた機能として、プレースホルダスペースを作成して、 Cumulative Layout Shift を実装し、Web Vitals の改善を支援します。この最初のたとえば、Unsplash などの API からアセットを読み込むと、メディアの読み込み終了時のレイアウトシフト。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> 読み込まれたアセットのアスペクト比が設定されていない場合に発生する、累積的なレイアウトシフトの動画。この動画はエミュレートされた 3G ネットワークで録画されています。

一方、aspect-ratio を使用すると、このレイアウトシフトを防ぐプレースホルダが作成されます。

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

</ph> <ph type="x-smartling-placeholder">

アスペクト比が設定された動画が、読み込まれたアセットで設定されています。この動画はエミュレートされた 3G ネットワークで録画されています。Codepen のデモをご覧ください。

参考: アスペクト比の画像属性

画像のアスペクト比を設定するもう 1 つの方法は、画像属性を使用することです。画像のサイズがあらかじめわかっている場合は、ベストプラクティスとしてディメンションを width と height に設定します。

上記の例では、サイズが 800 x 600 ピクセルの場合、画像のマークアップは <img src="image.jpg" alt="..." width="800" height="600"> のようになります。送信する画像に同じアスペクトが含まれている場合必ずしも正確なピクセル値でなくてもかまいませんが、比率を設定する属性値に width: 100% のスタイルを組み合わせて画像が適切なスペースを占めるようにしますまとめると、次のようになります。

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

最終的には、aspect-ratio を累積的なレイアウトシフトも回避されます（ Codepen）。

まとめ

新しい aspect-ratio CSS プロパティを使用すると、複数の最新ブラウザでリリースし、適切な状態を維持できます。メディアコンテナやレイアウトコンテナのアスペクト比の設定が若干シンプルになります。

写真提供: Amy Shamblen、Lionel Gustave（Unsplash より）

Chromium、Safari テクノロジー プレビュー、Firefox Nightly で新たにアスペクト比の CSS プロパティをサポート

アスペクト比

オブジェクトの適合

従来の手法: padding-top でアスペクト比を維持する

aspect-ratio でアスペクト比を維持しています

例: グリッド内の一貫性

例: レイアウト シフトを防ぐ

参考: アスペクト比の画像属性

まとめ

Chromium、Safari テクノロジープレビュー、Firefox Nightly で新たにアスペクト比の CSS プロパティをサポート

従来の手法: `padding-top` でアスペクト比を維持する

`aspect-ratio` でアスペクト比を維持しています

例: レイアウトシフトを防ぐ