link要素によるスタイルシートの読み込み

サイトの各ページのスタイルを修正する際の利便性から、CSSファイルを別に作成して読み込むのが一般的。その場合は、link要素を使ってスタイルシートを読み込む。

rel="stylesheet"

rel属性の値であるリンクタイプをstylesheetとすることで、リンク先は、現在の文書に対するスタイルシートであると示す。

href="URL"

読み込むスタイルシートのURLを指定する。

type="text/css"

スタイルシートでMIMEタイプであるtext/cssを値とする。

「rel="stylesheet"」では、デフォルトのMIMEタイプはtext/cssなので、type属性は省略しても良い。

MIMEタイプを間違えて記述すると、指定したスタイルシートはスキップされる。

<link rel="stylesheet" href="sample.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="all.css" type="text/css">

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

スタイルシートには3パターンある

読み込む外部スタイルシートは3つのパターンに分類でき、それは読み込みに関するlink要素の記述方法による。尚、3種類のスタイルシートの適用には優先順位がある。

• 固定スタイルシート
• 優先スタイルシート
• 代替スタイルシート

title="スタイル名"

link要素では、title属性は特別な意味を持つ。

値に任意の名前を記述することで、優先・代替スタイルシートにおいてのスタイルシートの名前を提供する。

作成者が「優先スタイルシート」と「代替スタイルシート」を用意していた時、閲覧者はブラウザのメニューより、適用させるスタイルを優先側と代替側から選ぶことができる（この機能の有無はブラウザによる）。この時にブラウザのメニュー欄に表示される名前が、title属性で指定した名前になる。上記の場合では「優先スタイル」と「代替スタイル」といった名前がブラウザのメニュー欄に表示される。

スタイルシートのグループ化

同じtitle属性を持った優先スタイルシート、固定スタイルシートはグループとして扱われる。

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

<link rel="stylesheet" href="basic1.css" type="text/css" title="優先スタイル">
<link rel="stylesheet" href="basic2.css" type="text/css" title="優先スタイル">

<link rel="stylesheet alternate" href="alt1.css" type="text/css" title="代替スタイル">
<link rel="stylesheet alternate" href="alt2.css" type="text/css" title="代替スタイル">

「優先スタイル」というスタイル名によってbasic1.cssとbasic2.cssを、「代替スタイル」というスタイル名によってalt1.cssとalt2.cssをグループ化している。

優先スタイルシートや代替スタイルシートを複数用意し、複数の優先スタイルシートや複数の代替スタイルシートをそれぞれtitle属性で同じ名前にすることでグループ化する。グループ化されることで、グループ単位でスタイル（つまり複数のスタイル）が適用されることになる。

固定・優先・代替スタイルシートとグループ化の使い方

link要素にrel="stylesheet"を指定することで、現在のドキュメントと外部CSSファイルを関連付けることができる。

通常はtitle属性を付与しない固定スタイルシート。

title属性を付与した場合、そのスタイルシートは優先スタイルシートとして扱われる。

下記の場合、1行目の固定スタイルシートはいつも通り読み込まれ、2行目・3行目の優先スタイルシートは、先に記述された「スタイル01」だけが読み込まれる。

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="style01.css" title="スタイル01">
<link rel="stylesheet" href="style02.css" title="スタイル02">

rel属性の値にstylesheetとalternateの両方を与え、title属性を付与することで、閲覧者によって切り替え可能な代替スタイルシートを提供できる。

下記では、ブラウザのメニューから「スタイル01」「スタイル02」という代替スタイルを選択できるようになる。

<link rel="stylesheet" href="common.css">
<link rel="stylesheet alternate" href="style01.css" title="スタイル01">
<link rel="stylesheet alternate" href="style02.css" title="スタイル02">

下記の場合、初期状態では、固定スタイルシートと優先スタイルシートの内「スタイル01」が読み込まれる。閲覧者が代替スタイルシート「スタイル02」を選択すると、同じ名前を持った優先スタイルシート「スタイル02」と代替スタイルシート「スタイル02」が、優先スタイルシート「スタイル01」に替わって読み込まれることになる。

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="basic01.css" title="スタイル01">
<link rel="stylesheet" href="basic02.css" title="スタイル02">
<link rel="stylesheet alternate" href="alt02.css" title="スタイル02">