画面表示用と印刷用とでスタイルを分ける例
それでは、実際に「画面表示用スタイル」と「印刷専用スタイル」を分けた例をご紹介致しましょう。
この枠内で強調している箇所は、画面表示と印刷で異なるデザインが施されています。 画面表示だと色で強調、印刷だと下線で強調されています！ 印刷の確認は、ブラウザの「印刷プレビュー」機能を使って下さい。
▲上記の枠内には、数カ所に strong 要素を使った強調箇所があります。 それらには、画面表示用としては、文字色（赤色）と文字の背景色（淡い黄色）を加えるスタイルを記述してあります。 印刷用としては、黒色の二重下線を引くスタイルを記述してあります。
※前のページに掲載したサンプルスタイルシートのソースをそのまま使っています。
印刷された結果どうなるかは、わざわざ印刷しなくても、ブラウザの「印刷プレビュー」機能を使うと見ることができます。 印刷プレビューだと、色は付加されず、代わりに下線が引かれていることが分かるはずです。
このように、非常に簡単に、画面表示用と印刷用のデザインを分けることができます。 わざわざ、印刷専用ページを用意する必要はありません。
スタイルシートで使えるメディアタイプ
ここでは、画面表示用（screen）と印刷用（print）のメディアタイプだけをご紹介致しましたが、 スタイルシートには、他にも合計10種類のメディアタイプが用意されています。
| screen | コンピュータの画面 |
|---|---|
| 印刷 | |
| aural | 音声 |
| handheld | 携帯端末 |
| projection | プロジェクタ |
| tty | 文字が固定幅の機器 |
| tv | テレビ |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| all | 上記すべて |
おわりに
今回は、スタイルシートを使って、画面表示用と印刷用のデザインを分ける方法をご紹介致しました。
この方法を使えば、印刷専用ページを作らなくても、印刷に適したデザインを印刷時にのみ適用させることができるようになります。
印刷されることも考慮したい場合は、ぜひご活用下さい。
【関連記事】
