このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

link”要素~“rel="stylesheet"

記事Oct.6th, 2020
Feb. 19th, 2023
現在の文書に適用する外部スタイルシートを指定する
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

rel="stylesheet"

リンクの種類 外部リソースへのリンク
body-ok Yes

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=""HTML5で追加 外部リソースを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media="" 外部リソースが対象とするメディア メディアクエリ 外部リソースが対象とするメディア条件
integrity=""HTML Living Standardで定義 外部リソースの整合性を確認 ハッシュ値 BASE64でエンコードした外部リソースのハッシュ値
hreflang="" 外部リソースが記述されている言語 言語コード 外部リソースが記述されている言語
type="" 外部リソースのデータの種類 text/css カスケーディング・スタイル・シート
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシーを指定
disabled=""HTML Living Standardで定義 外部スタイルシートへのリンクの無効化 disabled 外部スタイルシートへのリンクの無効化
blocking=""HTML Living Standardで定義 外部リソースの読み込み時に停止すべき処理を示す render レンダリングを停止する
fetchpriority=""HTML Living Standardで定義 外部リソースの読み込み時の優先度を指定する 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="しっそなスタイル">

仕様書

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
stylesheet
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク