May 2nd,2015
＃
“sizes”属性について
“sizes”属性は“rel”属性の値に“icon”や“apple-touch-icon”を指定した“link”要素で読み込まれるアイコンのサイズを示します。
“sizes”属性の値はアイコンファイルの実際の横幅と高さのピクセル数です。
“sizes”属性はブラウザなどのユーザーエージェントが複数のアイコンファイルがある場合にどのアイコンを読み込むかを選択するために参考にします。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| any | サイズの調整が可能 |
| 横幅x高さ | アイコンのサイズのピクセル数 |
値は小文字のx(“x”)もしくは大文字のX(“X”)を挟んだアイコンの横幅と高さのピクセル数です。
ICO形式などで一つのアイコンファイルに複数のサイズのアイコンが含まれている場合は空白文字で区切り、含まれているサイズを記述します。
“any”はSVG形式のようなベクター画像でどのようなサイズでも表示することができる場合に指定します。
＃
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="apple-touch-icon" href="image/apple-touch-icon.png" sizes="180x180">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
