外部スタイルシート - wicky @ ウィキ

外部スタイルシート

　スタイル情報を記述したスタイルシートを別に用意しておき、link要素を設定して読み込む方法である。これによってHTML文書はシンプルになり、格段に見やすくなる。

　※外部スタイルシート（CSS）のファイル名には、拡張子「.css」を付けるのが一般的。

　href属性にスタイルシートのURIを指定する。またtype属性に、スタイルシートのMIMEタイプを指定する。

　また、rel属性に「stylesheet」を指定することで、style要素およびstyle属性と同様に、固定スタイルシートとして読み込まれるようになる。

●外部スタイルシートの指定例

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

　※XHTMLの場合は、次のように指定する。
　　<?xml-stylesheet href="../stylesheet/default.css" type="text/css" ?>

　title属性でスタイルシートをグループ化することで、優先スタイルシートとして読み込むことができるようになる。

●グループ化による外部スタイルシートの指定例

<link href="default.css" rel="stylesheet" type="text/css">
<link href="pref.css" rel="stylesheet" type="text/css" title="monochrome">

　※XHTMLの場合は、次のように指定する。
　　<?xml-stylesheet href="pref.css" type="text/css" title="monochrome" ?>

　ただし、優先スタイルシートは、ユーザによって代替スタイルシートが選択された場合は適用されない。代替スタイルシートの場合、次のようにrel属性に「alternate stylesheet」を指定する。

●代替スタイルシースタイルシート

<link href="default.css" rel="stylesheet" type="text/css">
<link href="mono.css" rel="stylesheet" type="text/css" title="monochrome">
<link href="alter.css" rel="alternate stylesheet" type="text/css" title="simple">

　※XHTMLの場合は、次のようにalternate擬似属性の値を「yes」に設定する。
　　<?xml-stylesheet href="alter.css" alternate="yes" type="text/css" title="simple" ?>

　※一般的なWebブラウザには、代替スタイルシートに切り替えて表示するための機能がある。

　少し複雑なカスケードの例を紹介する。

　以下の例では、まず最初に固定スタイルシートのdefault.cssが読み込まれ、次に優先スタイルシートのmono.cssが読み込まれる。次のbig.cssについては、title属性に設定されているグループ名が一番目の優先スタイルシートと異なるため、読み込まれない点に注意が必要。

　ユーザによって代替スタイルシートが選択された場合、まず最初に代替スタイルシートのdefault.cssが読み込まれ、次に優先スタイルシートのalter.cssが読み込まれる。さらに、代替スタイルシートと同じグループ名が付けられているbig.cssが読み込まれる。

●カスケードの例

<link href="default.css" rel="stylesheet" type="text/css">
<link href="mono.css" rel="stylesheet" type="text/css" title="monochrome">
<link href="big.css" rel="stylesheet" type="text/css" title="simple">
<link href="alter.css" rel="alternate stylesheet" type="text/css" title="simple">

　次のように、外部スタイルシートを読み込み、さらにstyle要素によってスタイル情報を設定することもできる。

●カスケードの例

<link href="default.css" rel="stylesheet" type="text/css">
<style type="text.css">
    p { color : red }
</style>

　※style要素と同様に、media属性値に出力メディアを指定することによって、出力メディアごとに異なるスタイル情報を適用することができる。