Coding
[CSS]印刷用スタイルシートの3つのポイント
印刷時のテキストをデザインする
見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。
下記の例では、見出しを中央寄せにし、斜体にしています。
また、リンクのカラーをパラグラフと同じにし、下線を削除する。
#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; }
印刷時にリンク先を表示する
印刷されたページではリンクをクリックすることはできず、リンク先がどこか分かりません。
そこで、リンク箇所のURLを表示するようにします。
#main p a:after{ content: " ("attr(href)") "; font-size: 10pt; }
※IEは非対応です。
印刷時の改ページ箇所を指定する
ページに印刷時の改ページ箇所を指定します。
これはユーザーがページの全てを印刷するか、最後の数ページを除外するかを選択できることを意味します。
分ける箇所はブログの場合、記事とコメントなどがあります。
#comments{ page-break-before: always; }