目次を飛ばして本文へ パン屑リストへ
Powered by Google
目次
@media
メディアタイプ
@import
@charset
@page
@font-face

@規則

概要この章では、各@規則についての解説を行います。@規則の決まり事については@規則と規則集合をご覧ください。

@media規則

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
- - ×
レベル 2-

@media規則では、@mediaの後ろにメディアタイプが続いて、その後に0個以上の規則集合が入ったブロックが続きます。その @規則 内の規則集合は、定めたメディアタイプにしか適用されません。1つのスタイルシート内でメディアごとに規則集合を振り分ける事が可能なのです。

例を挙げると、以下のようになります。
@media print { /* printメディアの場合にのみ適用 */
  body { font-size: 10pt }
}
@media screen { /* screenメディアの場合にのみ適用 */
  body { font-size: 12pt }
}

メディアタイプは、,(コンマ)で区切って、複数指定する事も可能です。
@media screen, print { /* screenメディア、printメディアの場合に適用 */
  body { line-height: 1.2 }
}

関連@規則

メディアタイプ

CSS2ではメディアタイプは定義していませんが、幾つか例として紹介されています。メディアタイプは大文字小文字の区別はありません。従って、"aural"でも"AURAL"でも"aUrAL"でも構いません。

all
全デバイスにあてはまります。規定値です。
aural
いわゆるスクリーンリーダの事です。音声で出力するUAの事です。
braille
点字で出力するUAの事です。印刷されたものでは無いそうです。
emboss
点字のページを出力するプリンタを指します。紙に出力するものの事です。[emboss]なのか[embossed]なのかははっきりしません。HTML4.01仕様書にもありません。このサイトでは[emboss]に統一しています。
handheld
ポータブルの低性能なUAを想定しています。PDA 等は、これに相当します。
print
印刷したものです。印刷プレビューモードの画面表示も含みます。
projection
プロジェクタを使って、投影して表現するものを想定しています。
screen
カラーのコンピュータ画面の事です。一般的にはこれです。
tty
四角い画面で、固定ピッチ文字を使う装置の事です。携帯電話等が該当します。
tv
普通のテレビの事です。低解像度、色付き、且つスクロールに制限のあるデバイスです。画像も音声も使用可能な点で、ほかと異なります。

メディアグループ

各メディアタイプは、各メディアグループのプロパティを持ちます。各CSSプロパティの表中「メディア」の欄で、UAのメディアタイプが属するプロパティ値を含む場合は、UAはそのプロパティをサポートする必要があります。

CSS2では以下のようなメディアグループを定めています。

continuous、paged
ページで区切られているか否かを示します。コンピュータスクリーンなどはスクロールでページ区切りがありませんので[continuous]に属します。紙に印刷された場合等は一枚の大きさに限りがあるので[paged]となります。
visual、aural、tactile
内容をどのように表現するかです。[visual]は視覚的に表現する、つまり目で見るものの事です。[aural]は音声で読み上げるものです。[tactile]は点字を出力するものです。
grid、bitmap
1ドットの大きさです。一定の大きさ(1文字に対して1ドットがどれだけの範囲を占めるか)を基準にして、それより大きければ [bitmap]、小さければ[grid]となります。「一定の大きさ」がどのような大きさなのかは定義してありません。
interactive、static
そのメディアがインタラクティブ、つまりユーザが操作出来るどうかです。表示を操作出来る場合は[interactive]、出来ない場合[static]です。
all
すべてに対応しているという事です。要はメディアタイプ[all]の事です。

[both]という表記はそのメディアタイプがそのメディアグループのすべてのプロパティ値に当てはまる事を示します。

メディアグループとメディアタイプの関係は以下のようになっています。

メディアグループとメディアタイプの対応関係
メディアタイプ メディアグループ
continuous/paged visual/aural/tactile grid/bitmap interactive/static
aural continuous aural N/A both
braille continuous tactile grid both
emboss paged tactile grid both
handheld both visual both both
print paged visual bitmap static
projection paged visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

@import

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
レベル -

外部CSSファイルを参照する方法です。

書式は、以下のようになります。
@import url("otameshi.css");
@import url(hogehoge.css);

これで、otameshi.cssとhogehoge.cssというファイルをインポート出来ます。

もっと短く書く事も出来ます。@import規則では、url()を省略しても良い事になっています。それから、url()の内側は、"(二重引用符)'(一重引用符)で括るのですが、それは省けます。が、url() という記述方法では無い場合は、引用符は省略出来ません。ですので、以下の書き方が最短となります。
@import "otameshi.css";
@import 'hogehoge.css';

次に、書く場所ですが、この@規則は、どの規則集合よりも前に書かないといけません。つまり、@charsetの直後、無い場合は一番初めに、この@規則を1つ以上(複数書く事も出来ます)設定して、その後にほかの@規則や規則集合を設定します。ブロック内に書くのもダメです。

つまり、以下の2つの例が正解で、

以下の2つの例が間違いという事です。

何故途中で@importが出て来たらダメなのかは、よく分かりません。

後ろにメディアタイプを指定して、そのメディア専用のCSSファイルとしてインポートする事も可能です。このように書きます。
@import "klankey.css" print; /* printメディアの場合にのみ適用 */

この場合、メディアタイプがprintの場合だけ、そのCSSファイルをインポートします。以下のようにして、複数のメディアタイプを指定する事も可能です。
@import "klankey.css" projection, tv; /* projection、tv両メディアの場合に適用 */

メディアタイプについては、詳細はメディアタイプのところを参考にしてください。

ワンポイント・アドバイスちょっと便利なのは、InternetExplorer3やNetscapeNavigator4ではサポートしていない点です。つまり、InternetExplorer3やNetscapeNavigator4以外に適用するスタイルシートを外部ファイルにまとめておいて、@importで参照するようにすれば、InternetExplorer3やNetscapeNavigator4には適用されず、ほかのUAでは適用されます。InternetExplorer3やNetscapeNavigator4用には、別の方法でCSSを適用します。InternetExplorer3とNetscapeNavigator4の切り分けは、link要素で出来ます。つまり、InternetExplorer3用のCSSを最後の link要素 で参照するファイルにまとめ、NetscapeNavigator4用には別途CSSファイルを作り、それを最後以外の link要素 で参照します。

ほかのUAはこの @import のバグを利用すれば切り分けが可能です。UAの分岐方法を参考にしてください。ただし、どんどん新しいUAが開発される中で、このような小手先の技がどこまで通用するかはかなり疑問です。スクリプト、可能ならばCGIやSSIを使って分岐した方が良いです。

CSS1とCSS2の相違点
  1. レベル2ではメディアタイプを指定出来るようになりました。これは同時にCSS1とCSS2の非互換部分と言えます。
関連@規則

@charset

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
- - -
レベル 2-

この @規則 は外部CSSファイルを使う場合にのみ使用します。そのファイルで使われている文字コードセットを指定します。

普通は meta要素 の http-equiv="Content-Type" と同じ文字コードを使うでしょうから、あまり使用する事はありません。例えほかの文字コードセットを使うにしても、link要素を使ったリンク方法XMLでのCSSの参照方法の場合は charsetに文字セット名を指定してやれば良いですし、使うとすれば@importを使ったリンク方法の時くらいなものでしょう。

ワンポイント・アドバイスしかし、仕様書には、UAに対して特定の文字符号化方法への対応を要求しない、なんて書いてあります。Netscapeでは、これを真に受けたんかどうだか、@charset を指定しないと、別の文字コードでCSSファイルを読んでしまったりします。あって何か損をするものではありませんし、忘れずに指定しておいたほうが良いでしょう。

書式は、以下のようになります。
@charset "ISO-2022-JP";
この場合は、文字コードセットとして ISO-2022-JP を使っている、という事です。Shift_JISを使っている場合は @charset "Shift_JIS";、EUC-JPを使っている場合は @charset "EUC-JP"; となります。"(二重引用符)の代わりに'(一重引用符)で括っても構いません。

文字符号化方法の完全な一覧については[CHARSETS]をご覧ください。

文字コードセット名に大文字・小文字の区別はありません。

この@規則は、一番初めに書かないといけません。理由は、 meta要素 の http-equiv="Content-Type" と同じで、それ以降にすぐにその文字コードを使った文字列が登場する可能性があるからです。

関連@規則

@page規則

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
× - - - - - -
レベル 2-

ページボックスの大きさを設定したり特定のページに宣言を適用したりする際に使用するのが、@page規則 です。この @規則 は「@page」、ページセレクタ、宣言ブロックの3つで成り立っています。この@規則内の宣言ブロックをページコンテキストと呼びます。

この@規則内では'em'や'ex'といった単位が使えません。相対単位では、唯一'px'が使用可能です。また、@page規則内の'margin-top'、'margin-bottom'のパーセンテージは、例外的にページボックスの高さを参照します。

ページ関連のプロパティ中、'marks' はこの@規則内でしか使えない事になっています。また、関連する 'size' についても、書かれていませんが、用途を考えると出来る限りこの @規則 内で指定した方が良いでしょう。

問題点
  1. どのメディアグループに属するのか、明記されていません。
関連@規則
関連プロパティ

@font-face規則

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
- - - - - - - - -
レベル 2-

フォントの木目細かなマッチングを行う為の @規則 です。が、その分かなり専門的になっています。紹介しているプロパティで十分、という方は、この項は飛ばした方が良いかもしれません。それでも、と仰るのであれば、以下のリンクからご覧になってください。

Font selection(仕様書の該当箇所にリンクしています)


page top
最終更新日:2004年11月05日
Copyright © 2002-2004 ばあど All Rights Reserved.