HITP 広島工業大学専門学校

ホームページの基礎(2. CSS 編)

← 2.18 テーブル  CSS総目次  2.20 スタイルコンテナ →

  1. 2.19 @規則
    1. 2.19.1 @media規則
    2. 2.19.2 @import規則
    3. 2.19.3 @charset規則

2.19 @規則

このページでは,主な「@規則」について説明します。

2.19.1 @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; }
}

CSS総目次 | ページ先頭に戻る

2.19.2 @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規則"が出現することはありません。

CSS総目次 | ページ先頭に戻る

2.19.3 @charset規則

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

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

"@charset規則"の注意としては,以下の3点があります。

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

@charset "UTF-8";

CSS総目次 | ページ先頭に戻る

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.