Search
  1. @font-face〔フォントフェイス〕
  2. @charset〔文字コード〕
  3. @import〔他のCSSファイルをインポート〕
  4. @namespace〔名前空間〕
  5. @page〔ページ〕
  6. @phonetic-alphabet〔ページ区切り〕
  7. @media〔メディアタイプ〕
  8. 通常表示と印刷時に適用するスタイルシートを分ける

@font-face
フォントフェイス

unknown

@font-face {
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

@charset "文字コード";

外部CSSファイルにおいて、文字コード("utf-8"、"Shift_JIS"など)を明示的に指定する場合に使用します。 CSSファイルの先頭に記述します。

@charset "utf-8";

* {
  marin:0; padding:0;
}

@import
他のCSSファイルをインポート

unknown

@import "CSSファイルのURL";
@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 "http://www.w3.org/1999/xhtml";
@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

ページを分割するためのモジュールです。 ボックスモデルモジュールをベースに、ページモデルおよびページに関連づけられたメディアを導入し、定義します。 それは、ページレイアウト、ページ余白、ページサイズとオリエンテーション、ヘッダーとフッター、イメージオリエンテーションなどのための機能を追加します。 最後に、文書のページ付番とヘッダーおよびフッターステータスを有効にするために、生成されたコンテンツを拡張します。

ページモデルでは、文書は1ページ以上のボックスに変換されます。 ページボックスは、長方形のプリントメディアのマップを表すための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 " }
@phonetic-alphabet "ipa"; #tomato { phonemes: "t\0252 m\0251 to\028a " }

@media
メディアタイプ

unknown

@media メディアタイプ[, メディアタイプ]

メディアタイプを指定することで、音声用、印刷用、表示用などメディアによって異なるスタイルを適用させる事ができます。 そのため、1つのスタイルシートに複数のメディア用のスタイルシートを記述することも可能です。

メディアタイプ一覧
メディアタイプ説明
all全デバイス対応
auralスクリーンリーダ(音声)対応
braille点字対応
embossed点字のページを出力するプリンタに対応
handheld携帯電話に対応
print印刷、印刷プレビューに対応
projectionプロジェクターに対応
screenコンピュータ画面に対応
tty固定幅の文字グリッドを用いたメディアに対応
tvテレビに対応

通常表示と印刷時に適用するスタイルシートを分ける

unknown

@media

通常の表示用とは別に、印刷用のスタイルを同一スタイルシート内に記述する例です。 印刷に適したスタイルが適用されるように指定しています。

  • 背景色を白色にし、背景画像を非表示にする。
  • 印刷しても読みやすいよう文字色を全て黒色にする。
  • リンクの下線を非表示にする。
通常の表示画面印刷プレビュー画面
@media screen { ... }@media screen { ... }
@media print { ... }@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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women