link要素|HTML5|on Note

link要素で文書間の関係を示す

on Note

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

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

<link rel="stylesheet" href="sample.css" type="text/css">
rel="stylesheet"
rel属性の値であるリンクタイプをstylesheetとすることで、リンク先は、現在の文書に対するスタイルシートであると示す。
href="URL"
読み込むスタイルシートのURLを指定する。
type="text/css"
スタイルシートでMIMEタイプであるtext/cssを値とする。
「rel="stylesheet"」では、デフォルトのMIMEタイプはtext/cssなので、type属性は省略しても良い。
MIMEタイプを間違えて記述すると、指定したスタイルシートはスキップされる。

複数のスタイルシートを指定できる

1つの文書内に複数の外部スタイルシートを読み込ませることができる。

<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">

外部CSSファイルが複数ある場合はlink要素も複数使用するが、CSSはカスケード処理をする為、後から読み込ませたスタイルが前のスタイルを上書きする。複数のCSSファイルを読み込ませる場合は並べるlink要素の順序に注意する。

noscript要素でスタイルシートを指定する

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

noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、そのスタイルを適用させることができる。

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

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

  • 固定スタイルシート
  • 優先スタイルシート
  • 代替スタイルシート
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="basic.css" type="text/css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" type="text/css" title="代替スタイル">
title="スタイル名"
link要素では、title属性は特別な意味を持つ。
値に任意の名前を記述することで、優先・代替スタイルシートにおいてのスタイルシートの名前を提供する。

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

固定スタイルシート

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

従来の外部スタイルシートの読み込みで、このスタイルは常に適用されることになる。

title属性を指定しない、従来の記述方法。

優先スタイルシート

<link rel="stylesheet" href="basic.css" title="優先スタイル">

title属性を加え値で任意の名前を指定し、それをスタイル名として提供する。

優先スタイルシートは、固定スタイルシートと共に優先的に適用されることになる。

代替スタイルシート

<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">

rel属性の値に2種類のリンクタイプstylesheetalternateの両方を記述し、stylesheet alternateまたはalternate atylesheetとする。且つ、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.cssbasic2.cssを、「代替スタイル」というスタイル名によってalt1.cssalt2.cssをグループ化している。

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

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

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

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

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

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属性の値にstylesheetalternateの両方を与え、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">
メニュー