複数のスロット幅の指定

Katie Hempenius

デモをお試しください

• サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。

• サイズの異なるブラウザ ウィンドウでアプリを再読み込みして、ブラウザの読み込みを確認する ブラウザサイズごとに異なるレイアウトを使用できます。

コードを表示する

• これを機能させるコードについては、index.html をチェックアウトしてください。

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

一体、どういうことでしょうか。

sizes 属性の値により、画像の表示幅は次のようになります。 「ビューポートの幅の 100%」幅 480 ピクセル以下のビューポート（ビューポートの 50% 幅」幅広の画面では 481 ～ 1,024 ピクセル、1,024 ピクセルを超える画面では 800 ピクセルです。これらの 幅が CSS で指定された幅と一致している。

複数のスロット幅を指定できるため、 ビューポートのサイズごとに異なるスタイル（画像の幅）を設定できます。

複数のスロット幅を指定する方法

• 複数のスロットの幅を指定するには、カンマ区切りのリストを使用します。各リスト項目は メディア条件（例: max-width、 min-width など）とスロット幅があります。
• このリストの最後のアイテムが、デフォルトのスロット幅です。デフォルトで設定されているので、 メディア条件を指定する必要はありません。
• リストできるスロットの幅は、 srcset は関係ありません。

• スロットの幅はさまざまな単位で指定できます。以下はすべて 有効な幅:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

以下は有効な幅ではありません。

• 25%（サイズ [size] 属性ではパーセンテージを使用できません）