@規則
この章では、各@規則についての解説を行います。@規則の決まり事については@規則と規則集合をご覧ください。
@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 等は、これに相当します。
- 印刷したものです。印刷プレビューモードの画面表示も含みます。
- 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 |
| 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()の内側は、
@import "otameshi.css";
@import 'hogehoge.css';
次に、書く場所ですが、この@規則は、どの規則集合よりも前に書かないといけません。つまり、@charsetの直後、無い場合は一番初めに、この@規則を1つ以上(複数書く事も出来ます)設定して、その後にほかの@規則や規則集合を設定します。ブロック内に書くのもダメです。
つまり、以下の2つの例が正解で、
- style要素を使った例
<head>
<style type="text/css">
<!--
@import url(guts.css);
li { margin: 0.8em }
em { font-weight: bold }
-->
</style>
</head> - 外部CSSファイルの例
@import url("guts.css");
@import url("rurara.css");
em { font-weight: bold }
th { font-style: italic }
以下の2つの例が間違いという事です。
- style要素を使った例
<head>
<style type="text/css">
<!--
li { margin: 0.8em }
em { font-weight: bold }
@import url('guts.css');
-->
</style>
</head> - 外部CSSファイルの例
em { font-weight: bold }
@import url('guts.css');
th { font-style: italic }
何故途中で@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の相違点
-
- レベル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 "UTF-8";、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' についても、この @規則 内で指定した方が良いでしょう。
- 問題点
-
- どのメディアグループに属するのか、明記されていません。
- 関連@規則
- 関連プロパティ
@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(仕様書の該当箇所にリンクしています)