メディアタイプで分ける2つの方法
すべてのCSSプロパティにおいて、パソコンのスクリーン、モバイル端末、印刷時、プロジェクタ、それぞれメディアタイプ別にデザインを分けることができます。CSS2で指定できるメディアタイプは下表のとおりです。
| all | 指定できるメディアのすべて |
|---|---|
| aural | 音声出力（音声読み上げツールなど） |
| braille | 点字ディスプレイなどの点字出力 |
| embossed | 点字プリンタ |
| handheld | 携帯用機器 |
| プリンタ（印刷用） | |
| projection | プロジェクタ |
| screen | パソコン画面 |
| tty | 文字幅が固定された機器 |
| tv | テレビ |
なお、メディアタイプでスタイルを分ける方法は、大きく分けて2通りあります。
- メディアタイプ別にCSSファイルを分ける
- 1つのCSSファイルで、メディアタイプ別にスタイルを分ける
メディアタイプ別にCSSファイルを分ける
ブラウザで特定のセクションや要素を印刷しないようにする場合、通常、以下のようにメディアタイプ別にCSSファイルを分けて、対象となるHTMLファイルのlinkタグにmedia属性（印刷用のCSSファイルの場合は media="print"）を設定し、それぞれ専用のCSSファイルを呼び出します。この方法はごく一般的とされています。
<link rel="stylesheet" href="./print.css" media="print" type="text/css">
1つのCSSファイルで、メディアタイプ別にスタイルを分ける
すべて一つのCSSファイルで管理したい場合は、@media というCSSのルールを作成して、その中に対象となるセレクタのスタイルを設定していきます。筆者の場合はこの方法でCSSを管理しています。
@media screen{
h1{
margin-bottom: 20px;
font-size: 1.8em;
padding-left: 7px;
border-left: solid 7px #999;
}
/* 省略 */
}
@media print{
h1{
margin-bottom: 20px;
font-size: 1.8em;
padding: 0px;
border-style: none;
}
/* 省略 */
}
印刷したくない部分を指定するには
たとえば、サイドバーなど印刷する必要がない場合は、displayプロパティを使って非表示にします。
@media print{
#sidebar{
display: none;
}
}
Firefoxでうまく印刷されない場合の対処方法
floatプロパティで回り込ませたり、DIVの幅を指定したりすると、Firefoxでは印刷時に右端が切れてしまうという問題が発生します。これを防ぐには、段組みレイアウトを実装するためのスタイルをすべてscreenメディアタイプに定義しておくのがポイントです。メディアタイプを指定しないでレイアウトスタイルを定義しないように注意してください。
body {
margin: 0;
padding: 0;
}
#header{
background-color: #CCC;
}
#footer {
clear: both;
background-color: #CCC;
}
@media screen{
#container {
width: 760px;
}
#sidebar {
width: 200px;
float: left;
}
#page_content {
width: 560px;
float: right;
}
}
@media print{
#sidebar{
display: none;
}
}
まとめ
CSSで段組みレイアウトを行う方法は何通りもあります。一番躓きにくい方法として、floatプロパティを使って段組みセクションそれぞれを左または右に回り込ませるように定義を行い、それぞれ幅を指定しておくのがポイントです。
また、ブラウザによって既定のマージン値やパディング値が異なるため、どのブラウザでも同様に表示するにはそれぞれ指定しておくのがよいでしょう。
@screenのメディアタイプブロック内にレイアウトを決定するスタイルを定義すると、Firefoxで印刷時に右端が切れたり2ページ目以降印刷されない…といった問題を防ぐことができます。
