さまざまなデバイス向けのCSS
Webページは、PCディスプレイで閲覧されるだけではありません。印刷されることもありますし、携帯電話からアクセスされることもあります。最近では、携帯ゲーム機やテレビゲーム機での利用も一般的になってきました。
以降の連載では、プリンタ、携帯電話、携帯ゲームなど、さまざまなデバイス向けページ制作を扱っていく予定です。今回は、Web以外のメディアとして最も基本的な印刷用ページについて詳しく扱いますが、まずは全デバイスに共通する基礎知識として、CSSで各メディアをコントロールする仕組みについて軽く説明しておきましょう。
デバイスの振り分け
かつては、PCディスプレイで閲覧するWebページとは別に印刷用のWebページを作成するなど、各デバイス用のページをわざわざ用意するケースも多かったのですが、Web標準が当たり前となった現在では、1つのWebページ（XHTML）に対して各デバイス用の複数のCSSを適用するのが一般的になっています。
デバイスごとのCSSを用意するだけで、それぞれのデバイスにあったスタイルを自動的に振り分けることができるため、Webページ自体（XHTML）を作り変える必要がありません。これにより、制作や管理上のコストを削減できるというメリットがあります。
ただし、デバイスによっては仕様が大きく異なるため、現状では、1つのWebページですべてのデバイスに完全に対応することは非常に困難です。CSSだけで対応できるものとそうでないものをまとめると次のようになります。
| CSSのみでOK | パソコンのディスプレイ, プリンタ, NTTドコモ以外の携帯電話 |
| 別途ページ制作が必要 | NTTドコモの携帯電話, Nintendo DS, PSP, Nintendo Wii, PlayStation 3 |
これらのデバイスについては以降の連載記事の中で詳しく扱っていきますが、CSSだけで対応できないものに関しては、JavaScriptやPHPなどでデバイスごとの振り分けをするなどの工夫が必要です。
CSSのメディアタイプ
さて、CSSだけで対応できるデバイスに関しては、基本的にCSSでコントロールするわけですが、仕組みとしてはCSSで定義されている「メディアタイプ」というものを指定します。メディアタイプを指定することで、各デバイスに応じたスタイルを自動的に適用できるようになります。例えば「screen」と指定することで一般的なPCディスプレイを対象に、「print」と指定することで印刷を対象にスタイルを適用できます。指定できるメディアタイプは次の表のとおりです。
なお、CSS2.1勧告候補では「aural」は非推奨とされ、代わりに「speech」が将来のメディアタイプとして予約されています。
| メディアタイプ | 説明 |
| all | 全デバイス |
| aural | 音声出力（音声ブラウザなど） |
| braille | 点字ピンディスプレイなど |
| embossed | 点字プリンタなど |
| handheld | 携帯端末（PDA、携帯電話など） |
| 印刷出力（印刷プレビューなどを含む） | |
| projection | プロジェクター、映写機など |
| screen | 一般的なPCディスプレイ |
| tty | 固定ピッチフォントで表示されるメディア |
| tv | テレビ、テレビゲーム機など |
メディアタイプの指定方法
メディアタイプを指定するには、link要素やstyle要素のmedia属性で指定する方法と、@mediaで指定する方法、@importで指定する方法の3つの方法があります。それぞれの特徴を踏まえ、目的に合った方法を採用するとよいでしょう。いずれの方法も、カンマ区切りで複数のメディアタイプを指定することができ、メディアタイプを指定しない場合には、すべてのメディアに適用されます。
link要素やstyle要素のmedia属性でメディアタイプを指定
link要素やstyle要素のmedia属性にメディアタイプを指定して、外部スタイルシートやスタイル全体を特定のメディアに適用できます。これは最も一般的でシンプルな方法ですが、メディアタイプを変更する場合、すべての(X)HTMLファイルを修正する必要が出てきます。
<!-- PCディスプレイに適用 -->
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<!-- 印刷に適用 -->
<style type="text/css" media="print">
em {font-weight: bold; }
</style>
@mediaでメディアタイプを指定
メディアごとのスタイルがほとんど変わらず、少しの調整で済む場合などは、メディアタイプを@mediaで指定するのがよいでしょう。例えば、すべてのスタイルを1つの外部スタイルシートで管理したい場合などに向いています。
/* 印刷に適用 */
@media print {
em { font-weight: bold ; }
}
@importでメディアタイプを指定
@importで外部スタイルを読み込む際に、メディアタイプを指定できます。@importは、(X)HTMLファイルから読み込まれる外部スタイルシート内に記述することもできるため、振り分けるファイルやメディアタイプなどを後から変更したい場合などに向いています。
@importは、CSSファイルの最初（@charsetがある場合は、その直後）に記述する必要がある点に注意しましょう。@mediaや通常のスタイル指定が、@importより先に出現してはいけません。
/* PCディスプレイに適用 */
@import url("screen.css") screen;
/* 印刷に適用 */
@import url("print.css") print;
