基本@ルール
- @font-face〔フォントフェイス〕
- @charset〔文字コード〕
- @import〔他のCSSファイルをインポート〕
- @namespace〔名前空間〕
- @page〔ページ〕
- @phonetic-alphabet〔ページ区切り〕
- @media〔メディアタイプ〕
- 通常表示と印刷時に適用するスタイルシートを分ける
@font-face
フォントフェイス
unknown
descriptor: value;
descriptor: value;
descriptor: value;
[…]
descriptor: value;
}
CSSでフォントを指定しても、どのフォントが使用されるかは、ユーザーのPC環境に依存しますが、この@font-faceを使用すると、意図したフォントで表示させることができます。
@font-faceのsrcプロパティには、フォントファイル（TTF）の参照先を指定します。 参照先は、ローカルまたは外部URLを指定可能です。 指定したフォントがユーザーのPCにインストールされていない場合は、URLに指定した参照先URLのフォントがユーザーのPCにダウンロードされて表示されます。
※IEではEOTファイルが必要です。
<style type="text/css">
@font-face {
font-family: 'EfonRegular';
src: url('EFON.eot');
src: local('Efon Regular'), local('Efon'), url('EFON.TTF') format('truetype');
}
@font-face {
font-family: 'SnigletRegular';
src: url('Sniglet.eot');
src: local('Sniglet Regular'), local('Sniglet'), url('Sniglet.ttf') format('truetype');
}
#d_fontface {
font:30px/30px 'SnigletRegular', Arial, sans-serif;
letter-spacing: 0;
}
#d_fontface dt,
#d_fontface dd {
margin:10px; padding:0;
}
#d_fontface span {
font: 30px/30px 'EfonRegular', Arial, sans-serif;
letter-spacing: 0;
}
#d_fontface p {
font-size:17px;
line-height:25px;
}
</style>
<div id="d_fontface">
<dl>
<dt><span>B</span> Cooking <span>B</span></dt>
<dd>
<p>Pid odio enim? Lorem mus magna nascetur eu sit pid augue nunc, mid urna integer, turpis integer vel placerat, placerat parturient, rhoncus mattis. Mauris? Porttitor sagittis, mattis lorem pid in.</p>
</dd>
</dl>
</div>- B Cooking B
-
Pid odio enim? Lorem mus magna nascetur eu sit pid augue nunc, mid urna integer, turpis integer vel placerat, placerat parturient, rhoncus mattis. Mauris? Porttitor sagittis, mattis lorem pid in.
@charset
文字コード
unknown
外部CSSファイルにおいて、文字コード（"utf-8"、"Shift_JIS"など）を明示的に指定する場合に使用します。 CSSファイルの先頭に記述します。
@charset "utf-8";
* {
marin:0; padding:0;
}
@import
他のCSSファイルをインポート
unknown
@import url("CSSファイルのURL");
他のCSSファイルをインポートする場合に使用します。
@charset "utf-8";
@import "reset.css";
@import "font.css";
* {
marin:0; padding:0;
}
下記のようにページで使用するスタイルシートを1つの外部CSSにまとめて@importしておき、それをページのhead要素内で外部CSSとして読み込むようにしておくと更新に手間がかからず便利です。
▼外部CSS（import.css）@charset "utrf-8"; @import "reset.css"; @import "font.css"; @import "layout.css"; @import "basic.css";▼HTML
<head> <link rel="stylesheet" type="text/css" href="import.css" /> </head>
メディアタイプの指定
@import規則にCSSの適用対象となるメディアタイプを指定する場合は、URLの後に続けてメディアタイプをカンマ区切りで指定します。 指定がない場合はデフォルトの「all」が適用されます。
@import url("print.css") print;
@import url("style.css") projection, tv;
@namespace
名前空間
unknown
@namespace svg "http://www.w3.org/2000/svg";
CSS内で名前空間を使用するための構文を定義します。
デフォルトの名前空間を宣言
@namespace "http://www.w3.org/1999/xhtml";のようにデフォルトの名前空間を宣言します。
名前空間が明示的に指定されていないものは、このデフォルトの名前空間が適用されます。
接頭辞付きの名前空間を宣言
@namespace svg "http://www.w3.org/2000/svg";のように接頭辞「svg」を宣言し、名前空間「http://www.w3.org/2000/svg」と結びつけた場合、その接頭辞が使用されているものはその名前空間に属するものとして処理されます。
@page
ページ
unknown
ページを分割するためのモジュールです。 ボックスモデルモジュールをベースに、ページモデルおよびページに関連づけられたメディアを導入し、定義します。 それは、ページレイアウト、ページ余白、ページサイズとオリエンテーション、ヘッダーとフッター、イメージオリエンテーションなどのための機能を追加します。 最後に、文書のページ付番とヘッダーおよびフッターステータスを有効にするために、生成されたコンテンツを拡張します。
ページモデルでは、文書は１ページ以上のボックスに変換されます。 ページボックスは、長方形のプリントメディアのマップを表すためのCSSボックスです。
ページボックスのコンテンツエリアは、ページエリアと呼ばれます。 文書の内容はページエリアに流されます。 最初のページのページエリアの端は、文書のブロックを含む初期の長方形を確立します。
ページボックスの外余白エリアは、16のマージンボックスに分割されます。 各マージンボックスは、それ自身のマージン、ボーダー、ウチ余白、コンテンツエリアを持っています。 ボックスに入れられるメーじんは、ヘッダとフッタを表示するのに通常使用されます。
ページボックスのプロパティは、@page規則によって決定されます。 ページボックスは、他のボックスと異なり、widthおよびheightプロパティが適用されません。 ページボックスのサイズは、sizeプロパティで指定します。
@phonetic-alphabet
ページ区切り
unknown
phonemesプロパティの発音ストリングのためのデフォルトアルファベットは、万国音標文字（「ipa」）であり、国際音声学協会[IPA]により開発された音声の文字のユニコード表現と一致しています。 例えば、音声のアルファベットは、@phonetic-alphabet規則を使って明示的に指定できます。 ビューポートと類似しており、他のボックスについては、ページボックスは、マージン、パディング、ボーダーからなります。 ページのコンテンツエリアとマージンエリアには特殊な関数が有ります。
@phonetic-alphabet "ipa";
#tomato { phonemes: "t\0252 m\0251 to\028a " }@media
メディアタイプ
unknown
メディアタイプを指定することで、音声用、印刷用、表示用などメディアによって異なるスタイルを適用させる事ができます。 そのため、1つのスタイルシートに複数のメディア用のスタイルシートを記述することも可能です。
| メディアタイプ | 説明 |
|---|---|
| all | 全デバイス対応 |
| aural | スクリーンリーダ(音声)対応 |
| braille | 点字対応 |
| embossed | 点字のページを出力するプリンタに対応 |
| handheld | 携帯電話に対応 |
| 印刷、印刷プレビューに対応 | |
| projection | プロジェクターに対応 |
| screen | コンピュータ画面に対応 |
| tty | 固定幅の文字グリッドを用いたメディアに対応 |
| tv | テレビに対応 |
通常表示と印刷時に適用するスタイルシートを分ける
unknown
通常の表示用とは別に、印刷用のスタイルを同一スタイルシート内に記述する例です。 印刷に適したスタイルが適用されるように指定しています。
- 背景色を白色にし、背景画像を非表示にする。
- 印刷しても読みやすいよう文字色を全て黒色にする。
- リンクの下線を非表示にする。
| 通常の表示画面 | 印刷プレビュー画面 |
|---|---|
 @media screen { ... } |
 @media print { ... } |
以下のサンプルページを、ブラウザの［印刷プレビュー］で見ると印刷用のスタイルが適用されているのが確認できます。
<style type='text/css'>
/* 表示用・印刷用共通 */
@media screen,print {
body { margin:10px; padding:0; line-height:1.5; }
}
/* 表示用 */
@media screen {
body { margin:0 auto; background:#333 url(/content/img/base/bg.png) repeat right bottom; color:#fff; font-size:13px; text-align:center; }
#wrap { margin:10px auto; padding:1em; width:80%; background:#333; text-align:left; }
h1 { font-size:150%; }
pre { padding:10px; background-color:#999; overflow:auto; }
}
/* 印刷用 */
@media print {
* { color:#000; }
body { font-size:11px; background-color:#fff; }
h1 { font-size:11pt; }
a,a:hover { text-decoration:none; }
pre { border:1px solid #000; padding:1em; }
}
</style>