HTML Tag Reference

sizes 属性

画像ファイルのサイズを指定する

sizes 属性は、画像ファイルなどのサイズを指定します。

link 要素における sizes 属性

link 要素における sizes 属性は rel="icon" あるいは rel="apple-touch-icon"が指定された link 要素でのみ使用できます。値は 「横幅x高さ」 の形式、例えば 16x16 のように指定します。 16X16 のように 「x」 は大文字でも構いません。

また、値は半角スペースで区切ることで複数指定することもできます。例えばマルチアイコンのように、1つのファイルに複数サイズの画像が含まれているような場合に各サイズを表すことができます。

img 要素、source 要素における sizes 属性

img 要素、source 要素 における sizes 属性で指定できる値は下記のルールで示されます。

  • 下記の各組をカンマ区切りで 1個以上
    1. 下記の組み合わせが 0組以上（両方の場合は空白文字で区切って記述）
      1. メディアクエリ
      2. 画像の表示サイズ値
    2. 画像の表示サイズ値
  • もしくは auto

auto 値を使用しない場合、具体的には、sizes="(max-width: 768px) 100vw, 320px" のような指定となります。この場合、(max-width: 768px) が該当する環境では 100vw が適用され、それ以外では 320px が適用されることになります。この記述をさらに細かく指定することも可能です。

sizes="(max-width: 768px) 100vw, (max-width: 480px) 90vw, (max-width: 320px) 80vw, 320px"

picture 要素内において、複数のイメージソースを指定するために使用される source 要素では、この sizes 属性に加えて、srcset 属性や media 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。

sizes="auto"

source 要素の sizes 属性および img 要素の sizes 属性には、以下の条件を満たす場合、auto 値を指定することができます。それ以外の場合は、auto 値を指定してはいけません。

  • source 要素に続く兄弟要素としての img 要素、または単体の img 要素、かつ img 要素の loading 属性の値が lazy の場合。

sizes 属性の仕様

この属性を使用できる要素

sizes 属性のサンプルソース

<!DOCTYPE html>
<html>
 <head>
  <title>サンプル</title>
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png" />
  <link rel="icon" href="windows.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon" />
  <link rel="icon" href="mac.icns" sizes="128x128 512x512 8192x8192 32768x32768" />
  <link rel="icon" href="iphone.png" sizes="57x57" type="image/png" />
  <link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml" />
  <link rel="stylesheet" href="lsforums.css" />
 </head>
 <body>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。