[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント

既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。

Creating a Print CSS Stylesheet

Handy Tips for Creating a Print CSS Stylesheet

印刷時のテキストをデザインする

見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。
下記の例では、見出しを中央寄せにし、斜体にしています。
また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう(リンクのスタイルについては後述)。

実装例のキャプチャ

スタイルシートは、下記のようになります。

印刷時にリンク先を表示する

印刷されたページではリンクをクリックすることはできず、リンク先がどこか分かりません。
そこで、リンク箇所のURLを表示するようにします。

実装例のキャプチャ

スタイルシートは、下記のようになります。

※IEは非対応です。

印刷時の改ページ箇所を指定する

ページに印刷時の改ページ箇所を指定します。
これはユーザーがページの全てを印刷するか、最後の数ページを除外するかを選択できることを意味します。
分ける箇所はブログの場合、記事とコメントなどがあります。

実装例のキャプチャ

スタイルシートは、下記のようになります。

sponsors

top of page

©2018 coliss