×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

19. @規則

ここでは、主な「@規則」について説明する。

@media規則

@media規則」は、出力メディアを特定し、その出力メディア用のスタイルシートを記述することができる。 その書式は以下のとおりである。

@media メディアタイプ { スタイルシートの記述 }

メディアタイプには、以下のものが指定できる。

メディアタイプ説明
allすべてのメディア
braille視覚障害者向けスクリーンメディア。(例:点字ディスプレイ)
embossed視覚障害者向け印刷メディア。(例:点字プリンタ)
print印刷出力
projectionプロジェクター。(例:OHP)
screen一般的な画面出力。(例:PCディスプレイ)
speech音声出力。(例:音声ブラウザ)
tty固定ピッチフォントの表示装置。(例:携帯電話)
tv一般的なテレビ。

例えば、強調要素をPCディスプレイでは赤、印刷出力では黒のようにしたい場合、つぎのようなスタイルシートを記述する。

@media screen {
    em { color: red; }
}
@media print {
    em { color: black; }
}

また、印刷出力では黒、それ以外であれば強調要素を赤、のようにしたい場合、つぎのようなスタイルシートを記述する。

em { color: red; }
@media print {
    em { color: black; }
}

@import規則

@import規則」は、インポートしたい他のスタイルシートを指定する。 その書式は以下のとおりである。

@import URL [メディアタイプ];

'URL'の部分は、"url( )関数形式"でも、引用符を用いた文字列形式、どちらでもよい。 つまり、つぎの例はすべて同じ意味である。

@import url(style.css);
@import url("style.css");
@import "style.css";

また、特定のメディアタイプの場合のみインポートしたい場合は、メディアタイプを合わせて記述する。

@import url(style.css) print;

最後に注意すべきことは、"@import規則"は、"@charset規則"以外のすべての規則よりも先に記述する点である。 つまり、スタイルシートの途中に"@import規則"が出現することはない。

@charset規則

@charset規則」は、スタイルシートのエンコーディングを明示的に指定する。 その書式は以下のとおりである。

@charset "エンコーディング名";

"@charset規則"の注意としては、以下の3点である。

  • 1つのスタイルシートに複数の"@charset規則"を記述してはならない。
  • スタイルシートの先頭行、第1文字目から記述する。
  • 外部スタイルシートにのみ記述できる。

つぎに、文字エンコーディングに'UTF-8'を使用した場合の例を示す。

@charset "UTF-8";

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.