Oct.6th, 2020
“rel="stylesheet"”
“rel="stylesheet"”が指定された“link”要素は現在の文書に適用する外部スタイルシートを指定します。
“media”属性を併せて指定することで外部スタイルシートの適用対象とするメディアやデバイスを指定することができます。
複数の“link”要素や“style”要素でスタイルが競合する場合は基本的に後に配置したものに記述されたスタイルが優先されますが、使用しているセレクタによって優先順位が変わる場合があります。
“rel”属性の値に“alternate”も含まれる場合は“link”要素はユーザーが選択して切り替えることによって適用することができる代替スタイルシートを指定します。
サンプルコード
<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| rel="" | 文書と外部リソースの関係 | stylesheet | リンク先は現在の文書に適用する外部スタイルシート |
| リンクタイプ | 文書と外部リソースの関係 | ||
| href="" | 文書と関連付ける外部リソース | URL | 現在の文書に適用する外部スタイルシートのURL |
| 任意属性 | |||
| グローバル属性 | |||
crossorigin="" |
外部リソースを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
| media="" | 外部リソースが対象とするメディア | メディアクエリ | 外部リソースが対象とするメディア条件 |
integrity="" |
外部リソースの整合性を確認 | ハッシュ値 | BASE64でエンコードした外部リソースのハッシュ値 |
| hreflang="" | 外部リソースが記述されている言語 | 言語コード | 外部リソースが記述されている言語 |
| type="" | 外部リソースのデータの種類 | text/css | カスケーディング・スタイル・シート |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシーを指定 |
| disabled="" |
外部スタイルシートへのリンクの無効化 | disabled | 外部スタイルシートへのリンクの無効化 |
| blocking="" |
外部リソースの読み込み時に停止すべき処理を示す | render | レンダリングを停止する |
| fetchpriority="" |
外部リソースの読み込み時の優先度を指定する | high | 同じ種類の外部リソースと比較して取得の優先度が高いことを示す |
| low | 同じ種類の外部リソースと比較して取得の優先度が低いことを示す | ||
| auto | 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す | ||
| title="" | 代替スタイルシートの名前 | テキスト | 代替スタイルシートの名前 |
“rel”属性の値は空白文字で区切ることで複数の値を指定できます。
HTML文書に使用されるスタイルシートの記述言語は“Cascading Style Sheets”(“text/css”)のみであるため“type”属性は通常省略されます。
代替スタイルシート
“代替スタイルシート”とは？
“代替スタイルシート”は“link”要素と“style”要素で複数用意されたスタイルシートをユーザーが選択して切り替えられる機能です。
対応しているブラウザでは“link”要素と“style”要素の“title”属性で指定されたスタイルシートの名前が選択肢として表示されます。
“link”要素によって読み込まれるスタイルシートは以下の条件で適用されます。
- “rel”属性の値に“alternate”を含まず、“title”属性も指定していない場合
- スタイルシートは常に適用されます。
- “rel”属性の値に“alternate”を含まず、“title”属性を指定した場合
- スタイルシートはデフォルトで適用されますが、他の代替スタイルシートに切り替えると適用されなくなります。
- “rel”属性の値に“alternate”を含み、“title”属性を指定した場合
- スタイルシートはデフォルトでは適用されませんが、代替スタイルシートを切り替えることによって適用されます。
代替スタイルシートの名前(“title”属性の値)が同じ“link”要素と“style”要素によるスタイルシートはグループ化され、選択された時に同時に適用されます。
“rel”属性の値に“alternate”を含まない複数の“link”要素が異なる“title”属性の値を指定されている場合、スタイルシートが無視される場合があります。
サンプルコード
<!--常に適用されるスタイルシート-->
<link rel="stylesheet" href="style.css">
<!--デフォルトで適用されるスタイルシート-->
<link rel="stylesheet" href="style-altN.css" title="ふつうのスタイル">
<!--選択されて適用されるスタイルシート-->
<link rel="stylesheet alternate" href="style-altG.css" title="ごうかなスタイル">
<link rel="stylesheet alternate" href="style-altS.css" title="しっそなスタイル">
