スタイルシート［CSS］/スタイルシートの基本/@マークの指定

@規則の種類

@マークで始まる指定には次の5種類があります。

@charset	文字コードの指定
@import	外部スタイルシートファイルの読み込み
@media	メディアタイプの指定
@page	ページボックスの指定
@font-face	フォントに関する指定

@charset（文字コード）の指定

外部スタイルシートファイル内の文字コードを指定します。

※この指定は、外部スタイルシートファイルでのみ使用できます。

指定方法は次のようになります。

@charset "Shift_JIS";

上記の例では、シフトJIS文字コードを指定しています。他の文字コードを指定する場合は次のようになります。

@charset "EUC-JP";

または

@charset "ISO-2022-JP";

文字コードの指定は、そのファイル内の一番先頭に記述する必要があります。

@charset "Shift_JIS";

body { margin: 0; }
h1 { color: red; }
p { line-height: 120%; }

@import（読み込み）の指定

ページ内、または外部スタイルシートファイル内に、別の外部スタイルシートファイルを読み込む指定です。

指定方法は次のようになります。

@import url(example.css);

または

@import url("example.css");

※"" は付けても付けなくてもどちらでも構いません。

上記の例では、example.css という外部スタイルシートファイルを読み込んでいます。これ以外にも次のような指定方法があります。

@import "example.css";

※この指定方法では "" を省くことはできません。

外部スタイルシートファイル内で使用する場合は、そのファイル内の一番先頭に記述する必要があります。ただし、@charset（文字コードの指定）がある場合は、その下に記述します。

@charset "Shift_JIS";
@import url(example.css);

body { margin: 0; }
h1 { color: red; }
p { line-height: 120%; }

ページ内で使用する場合は、style要素内の一番先頭に記述します。

<html>
<head>

<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>
・
・
・
</body>
</html>

@media（メディアタイプ）の指定

この指定を行うと、出力先のメディア別に異なるスタイルを適用させることができます。

指定できるメディアタイプには、次の10種類があります。

all	全て
aural	音声読み上げ
braille	点字ディスプレイ
embossed	点字プリンタ
handheld	携帯用端末
print	プリンタ
projection	プロジェクタ
screen	コンピュータ画面
tty	固定幅文字の機器
tv	テレビ

指定方法は次のようになります。

@media screen {

strong { color: red; }

}

上記の例では、コンピュータ画面向け（screen）のスタイルシートを指定しています。

次のように、カンマ（ , ）で区切って複数のメディアタイプを指定することもできます。

@media screen, print {

strong { color: red; }

}

例えば、コンピュータ画面向け（screen）とプリンタ向け（print）のスタイルシートを別々に用意する場合は、次のような記述になります。

<html>
<head>

<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<p><strong>パソコンモニターでは赤い文字で表示されますが、プリンタでは下線の付いた文字で印刷されます。</strong></p>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

サンプル画面へ

@page（ページボックス）の指定

ページボックスのサイズやマージンなど、印刷時のページ設定を行う指定です。
※複雑なので省略させていただきます。

@font-face（フォント）の指定

フォントに関する細かい設定を行います。
※更に複雑なので省略させていただきます。