[CSS]CSSファイルの適用方法:外部スタイルシートファイル

HTMLファイルにスタイルシートを適用する時、いくつかの方法があります。
中でも、外部スタイルシートファイルで適用する方法は、汎用性も高くメンテナンシビリティに優れています。

外部スタイルシートの利用は、拡張子「css」のファイルにスタイルを記述し、スタイルシートファイルを作成します。
適用するHTMLファイルからは、外部スタイルシートファイルとしてhead要素内のlink要素や@importで参照します。
その際、media属性を記述することにより、出力デバイスを指定することができます。

固定・代替・優先スタイルシート(rel,title属性)

スタイルシートは、複数の「固定スタイルシート」と複数の「代替スタイルシート」を指定でき、代替スタイルシートのうち1つを「優先スタイルシート」として指定できます。

固定スタイルシート
常に適用されるスタイルシートファイル
代替スタイルシート
利用者が選択した場合、適用されるスタイルシートファイル
優先スタイルシート
利用者が代替スタイルシートを選択しない場合、適用されるスタイルシートファイル

閲覧時にユーザーが外部スタイルシートを選択しない場合、固定スタイルシートと優先スタイルシートが適用されます。
また、利用者が代替スタイルシートを選択し、スタイルシートの指定に矛盾が起こった場合、代替スタイルシートが適用されます。

記述例:固定スタイルシート
rel属性にstylesheet、かつtitle属性を記述しない

記述例:代替スタイルシート
rel属性にalternate stylesheet、かつtitle属性を記述する

title属性は、同じ名前をつけることによりグループ化して使用することが可能です。

記述例:優先スタイルシート
rel属性にstylesheet、かつtitle属性を記述する

2つ以上の優先スタイルシートをlinkタグで記述した場合、最初に記述してあるスタイルシートが適用されます。
また、優先スタイルシートは、linkタグの他にhttpヘッダやmetaタグでも指定が行え、これらの優先度は httpヘッダ>metaタグ>linkタグ の順となります。

記述例:優先スタイルシート(httpヘッダ)

記述例:優先スタイルシート(metaタグ)

CSSの出力デバイス(media属性)

link要素のmedia属性には以下があります。

all
全てのデバイス
aural
音声合成機器
※CSS2.1では廃止予定(予約:speech)
braille
点字の触覚を反映するデバイス
embossed
点字のページを出力するプリンタ
handheld
携帯デバイス
print
印刷する際のプレビュー・モード
projection
プロジェクタ
screen
カラーのコンピュータ・スクリーン
tty
固定幅の文字を用いたポータブルメディア
tv
テレビ型デバイス

ブラウザの表示に指定する場合、「screen」および「all」を使用します。

記述例:属性

印刷用スタイルシートの注意点

印刷用のスタイルシートを指定する場合、media属性に「print」を使用します。

printと一緒にtitle属性(title="for print" など)を記述している場合は、注意が必要です。
その場合、優先スタイルシートとして適用されてしまうため、正しく解釈するSafariなどのブラウザでは印刷時に適用されません。
※IEなどが適応されるのが、むしろ問題です。

印刷用として適応する場合には、title属性を記述せず、固定スタイルシートとして使用します。

記述例:印刷用スタイルシート

sponsors

top of page

©2018 coliss