複数のスロット幅の指定

Katie Hempenius
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-widthmin-width など)とスロット幅があります。
  • このリストの最後のアイテムが、デフォルトのスロット幅です。デフォルトで設定されているので、 メディア条件を指定する必要はありません。
  • リストできるスロットの幅は、 srcset は関係ありません。
  • スロットの幅はさまざまな単位で指定できます。以下はすべて 有効な幅:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

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

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