画面表示用と印刷用とでスタイルを分ける例

それでは、実際に「画面表示用スタイル」と「印刷専用スタイル」を分けた例をご紹介致しましょう。

この枠内で強調している箇所は、画面表示と印刷で異なるデザインが施されています。 画面表示だと色で強調、印刷だと下線で強調されています! 印刷の確認は、ブラウザの「印刷プレビュー」機能を使って下さい。

▲上記の枠内には、数カ所に strong 要素を使った強調箇所があります。 それらには、画面表示用としては、文字色(赤色)と文字の背景色(淡い黄色)を加えるスタイルを記述してあります。 印刷用としては、黒色の二重下線を引くスタイルを記述してあります。
※前のページに掲載したサンプルスタイルシートのソースをそのまま使っています。

印刷された結果どうなるかは、わざわざ印刷しなくても、ブラウザの「印刷プレビュー」機能を使うと見ることができます。 印刷プレビューだと、色は付加されず、代わりに下線が引かれていることが分かるはずです。

このように、非常に簡単に、画面表示用と印刷用のデザインを分けることができます。 わざわざ、印刷専用ページを用意する必要はありません

スタイルシートで使えるメディアタイプ

ここでは、画面表示用(screen)と印刷用(print)のメディアタイプだけをご紹介致しましたが、 スタイルシートには、他にも合計10種類のメディアタイプが用意されています。

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

おわりに

今回は、スタイルシートを使って、画面表示用と印刷用のデザインを分ける方法をご紹介致しました。

この方法を使えば、印刷専用ページを作らなくても、印刷に適したデザインを印刷時にのみ適用させることができるようになります。
印刷されることも考慮したい場合は、ぜひご活用下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。