[CSS]CSSファイルの適用方法：外部スタイルシートファイル
Post on:2007年4月16日
sponsors
HTMLファイルにスタイルシートを適用する時、いくつかの方法があります。
中でも、外部スタイルシートファイルで適用する方法は、汎用性も高くメンテナンシビリティに優れています。
外部スタイルシートの利用は、拡張子「css」のファイルにスタイルを記述し、スタイルシートファイルを作成します。
適用するHTMLファイルからは、外部スタイルシートファイルとしてhead要素内のlink要素や@importで参照します。
その際、media属性を記述することにより、出力デバイスを指定することができます。
固定・代替・優先スタイルシート（rel,title属性）
スタイルシートは、複数の「固定スタイルシート」と複数の「代替スタイルシート」を指定でき、代替スタイルシートのうち１つを「優先スタイルシート」として指定できます。
- 固定スタイルシート
- 常に適用されるスタイルシートファイル
- 代替スタイルシート
- 利用者が選択した場合、適用されるスタイルシートファイル
- 優先スタイルシート
- 利用者が代替スタイルシートを選択しない場合、適用されるスタイルシートファイル
閲覧時にユーザーが外部スタイルシートを選択しない場合、固定スタイルシートと優先スタイルシートが適用されます。
また、利用者が代替スタイルシートを選択し、スタイルシートの指定に矛盾が起こった場合、代替スタイルシートが適用されます。
- 記述例：固定スタイルシート
- rel属性にstylesheet、かつtitle属性を記述しない
- 記述例：代替スタイルシート
- rel属性にalternate stylesheet、かつtitle属性を記述する
title属性は、同じ名前をつけることによりグループ化して使用することが可能です。
- 記述例：優先スタイルシート
- rel属性にstylesheet、かつtitle属性を記述する
２つ以上の優先スタイルシートをlinkタグで記述した場合、最初に記述してあるスタイルシートが適用されます。
また、優先スタイルシートは、linkタグの他にhttpヘッダやmetaタグでも指定が行え、これらの優先度は httpヘッダ＞metaタグ＞linkタグ の順となります。
記述例：優先スタイルシート（httpヘッダ）
記述例：優先スタイルシート（metaタグ）
CSSの出力デバイス（media属性）
link要素のmedia属性には以下があります。
- all
- 全てのデバイス
- aural
- 音声合成機器
※CSS2.1では廃止予定（予約：speech） - braille
- 点字の触覚を反映するデバイス
- embossed
- 点字のページを出力するプリンタ
- handheld
- 携帯デバイス
- 印刷する際のプレビュー・モード
- projection
- プロジェクタ
- screen
- カラーのコンピュータ・スクリーン
- tty
- 固定幅の文字を用いたポータブルメディア
- tv
- テレビ型デバイス
ブラウザの表示に指定する場合、「screen」および「all」を使用します。
記述例：属性
印刷用スタイルシートの注意点
印刷用のスタイルシートを指定する場合、media属性に「print」を使用します。
printと一緒にtitle属性（title="for print" など）を記述している場合は、注意が必要です。
その場合、優先スタイルシートとして適用されてしまうため、正しく解釈するSafariなどのブラウザでは印刷時に適用されません。
※IEなどが適応されるのが、むしろ問題です。
印刷用として適応する場合には、title属性を記述せず、固定スタイルシートとして使用します。
記述例：印刷用スタイルシート
sponsors
