ＣＳＳ応用編
-5 印刷用ページの作成
スタイルシートの使用される環境
スタイルシートでは、様々なメディアに適したスタイルが設定できます。メディア属性による指定で実現させます。
HTML文書内では、印刷用スタイルの設定の場合、
<link href="CSSファイルのURL" rel="stylesheet" type="text/css" media="print" />
と、記述します。
但し、実際は すべてのメディアがCSSに対応しているわけではないようです。
コンピュータスクリーン＝screen、
モバイル端末＝handheld、
ページ形式出力の文書＝print、
この３つが 現実的な対応メディアと言われています。
また、特に この中のprintには、
用紙サイズと方向＝size、用紙設定の摘要＝page、などの印刷用専用のプロパティがありますが、ほとんどのブラウザが対応していないのが現状です。
また、ユーザーの印刷環境も様々であり、閲覧時のための装飾や色の使用も、印刷時には不要、あるいは効果的に表現されないという場合もあります。
そのような状況の中で、「Webページを印刷する」というユーザーの目的のために、可能な限りの利便性を追求し、提供したいものです。
印刷用スタイルシートの作成方法
例として 「このページをブラウザ表示されたものを印刷する場合」を想定します。
下図は 余白を含めて800px幅であるこのページのA4版印刷プレビュー画面ですが、赤丸をつけた部分で分かるように、肝心なテキスト部分が切れてしまっています。
閲覧時には重要である ページ左部のナビゲーション部分は、印刷時には必要とされないケースが多いでしょう。ここでは、作成例として、テキスト部分のみ印刷できるような設定をしてみたいと思います。
設定手順
まず、印刷専用設定の新規CSSファイルを作成し、HTMLにリンクさせます。
その際、media属性に printを定義します。
HTML文書上は以下の様なリンク記述となります。（記述例）
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
次に、左部ナビゲーションを非表示にする設定を行います。
このページのナビゲーション部分は
menuというidで指定していますので、print.cssにて、
#menu { display:none;}
とします。すると下図の様に、表示に違いがでます。
ブラウザ上では表示されているナビ部分が、印刷プレビューでは消えています。
次に、ユーザーの用紙設定に左右されることなく印刷できるように、固定幅でのレイアウトを相対値で設定します。
コンテンツ部分やメインのテキスト部分に固定幅を設定している場合は、print.cssにて、該当するセレクタに
「width : 100% 」のように相対値を設定します。
その他、背景画像や背景色などは印刷されない環境であることを想定し、必要と思われる箇所に調整を加えます。
そうして、できた印刷プレビュー画面が下図です。
必要情報を持たない背景画像を取り、それに合わせて余白なども調整しました。
この例では シンプルなレイアウトのため比較的簡易に設定できますが、floatプロパティや画像情報を多用しているページの場合は、スタイルの解除や新規設定が必要な場合がでるかと思います。
状況に応じて 応用してみてください。
