webmas.jp

リンクされたリソースの関係

rel=”” 属性はリンクされたリソースの関係を示します。この属性は必須属性であり必ず指定する必要があります。

スタイルシートを読み込む場合

<link rel="stylesheet" />

リンクするリソースの URL

rel=”” 属性はリンクされたリソースの URL を示します。この属性は必須属性であり必ず指定する必要があります。

スタイルシートを読み込む場合

<link rel="stylesheet" href="style.css" />

外部ドメインのリソースの扱い方法を指定

crossorigin 属性は外部サイトから読み込んだ画像に認証を利用するかしないかを指定します。CORS (Cross-Origin Resource Sharing)という仕組みを利用し異なるオリジン（スキーム、ホスト、ポート）から読み込んだ画像を現在のオリジンのものとして扱うことができます。

rel=”stylesheet” の時、読み込まれたスタイルシートを文書に適用しない

disabled 属性は読み込まれたスタイルシートを HTML に適用しない場合に使用します。Javascript 等を使用し、disabled=”false” に変更するかこの属性自体を削除することでスタイルシートを有効にすることができます。

リンク先のリソースの言語

hreflang=”” 属性は読み込まれたリソースの言語を指定します。href=”” 属性が指定されている場合にだけ使用できます。

リンク先のリソースが適用されるメディア

media=”” 属性はリンク先のリソースが適用されるメディアを指定します。値はメディアクエリを指定します。

主に使用されるメディアタイプ

all

すべてのデバイス

screen

PC, タブレット, スマートフォン等 ディスプレイ

print

プリンタ

アイコンのサイズ

sizes=”” 属性は読み込まれたアイコンのサイズを指定します。rel=”icon”, rel=”apple-touch-icon” などの属性が指定されている場合にだけ使用できます。

値

any

可変サイズ指定。image/svg+xml のようなベクター画像向け

横x縦

横幅と縦幅の間にはx（エックス）を配置。単位はピクセル。複数サイズがある場合は半角スペースで区切って指定

<link rel="icon" href="favicon.ico" sizes="32x32 64x64" />

リンク先のリソースのタイトル

title=”” 属性は読み込まれたリソースのタイトルを指定します。rel=”stylesheet” 属性が指定されている場合には代替スタイルシートとして扱われます。逆にタイトルが指定されていないスタイルはデフォルトとして常に適用されます。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="light.css" title="ライト" />
<link rel="stylesheet" href="dark.css" title="ダーク" />

リンク先のコンテンツの種類

type=”” 属性は読み込まれたコンテンツの種類を指定します。具体的には MIME タイプを指定します。CSS の場合は type=”text/css” を指定します。

<link rel="stylesheet" href="style.css" type="text/css />