XHTML/CSS・トップ | CSS基礎知識・目次

●@を使った指定

 CSSでは@(アットマーク)の記号を使った指定方法がいくつかあります。ここでは代表的な使い方を3つ取り上げます。そのほかに「@page(ページ設定)」と「@font-face(フォントデータの指定)」などのルールも定義されていますが、本稿は割愛します。

■@charset(文字コード)

 CSSフィルのトップに配置して文字コードを指定します。

例:

@charset "Shift_JIS";
@charset "EUC-JP";
@charset "UTF-8";

 指定元のXHTML(HTML)文書で定義している文字コードをそのまま指定します。例えば、ページソースに<?xml version="1.0" encoding="Shift_JIS"?>のXML宣言がありましたら、@charset "Shift_JIS"; をCSSファイルの先頭へ配置します。@charsetルールには次のような決まりがあります。

・@charsetに続き、二重引用符( " )または、一重引用符( ' )で文字コードを囲み、最後に半角のセミコロン( ; )を添える。

・CSSファイルの先頭に配置しなければならない。(以前、こんなことがありました。Operaのブラウザで一部ですが、どうしてもレイアウトが反映されないケースがありました。調べると /* 〜 */のコメントを先に配置しているのが原因とわかりました。従って、コメントも先に配置することはできません。)

・CSSファイルの外部スタイルシートのみ使用できる。

・1つのファイルに2個所以上記載してはならない。

※@charsetルールで文字コードを指定した場合は、ファイルを指定した文字コードで保存します。(以下、参照)

■@media(メディアタイプ)

 @mediaを使うと特定のまたは、複数のメディアに対してスタイルを指定することができます。カンマ( , )で区切ることにより、メディアを複数指定することもできます。

CSS2で指定できるメディアタイプ↓

all 指定できるメディアのすべて
aural 音声出力
braille 点字ディスプレイなどの点字出力
embossed 点字プリンタ
handheld 携帯用機器
print プリンタ(印刷用)
projection プロジェクタ
screen パソコン画面
tty 文字幅が固定された機器
tv テレビ

【CSS】↓

@media screen, print {
 body {
  font-size: 12pt;
 }
 h2 {
  font-size: 14pt;
 }
}

【解説】↑↓

 画面とプリンタ(印刷)の両方に基調となるフォントサイズに12ptを指定し、h2の見出しに14ptのフォントサイズを指定しています。画面と印刷用それぞれに違うスタイルを指定することもできます。

@media screen {
 body {
  background-color: #000000;
  color: #ffffff;
  font-size: 12pt;
 }
 h2 {
  color: #ffff00;
  font-size: 14pt;
 }
}
@media print {
 body {
  background-color: #ffffff;
  color: #000000;
  font-size: 10pt;
 }
 h2 {
  font-size: 12pt;
  color: #0000ff;
 }
}

【関連ページ】

■@import(CSSファイルの取り込み)

 @importを使って、CSSファイルを取り込むこともできます。次のように指定します。

【HTML】↓(<head>〜</head>の間)

<title> 〜 </title>
<style type="text/css">
<!--
 @import url(CSSファイルへのURL);
-->
</style>

※ url(〜)のURL部分は二重引用符(")または一重引用符(')で囲うこともできます。

url(〜)
url("〜")
url('〜')

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2005-2007 http://www.xml.vc/