[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント
Post on:2009年6月18日
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。

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

スタイルシートは、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text-align: center; font-size: 10pt; } a{ color: #000; text-decoration: none; } </textarea> |
印刷時にリンク先を表示する
印刷されたページではリンクをクリックすることはできず、リンク先がどこか分かりません。
そこで、リンク箇所のURLを表示するようにします。

スタイルシートは、下記のようになります。
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> #main p a:after{ content: " ("attr(href)") "; font-size: 10pt; } </textarea> |
※IEは非対応です。
印刷時の改ページ箇所を指定する
ページに印刷時の改ページ箇所を指定します。
これはユーザーがページの全てを印刷するか、最後の数ページを除外するかを選択できることを意味します。
分ける箇所はブログの場合、記事とコメントなどがあります。

スタイルシートは、下記のようになります。
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #comments{ page-break-before: always; } </textarea> |
sponsors