[CSS]印刷用スタイルシートの3つのポイント - グレヌデサ La graine du dessin
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; }
New Entries
TOP
Old Entries

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive


Warning: MagpieRSS: Failed to fetch http://lab.gpol.co.jp/trend/atom.xml and cache is off in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36

Warning: MagpieRSS: Failed to fetch http://lab.gpol.co.jp/tsubo/atom.xml and cache is off in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36

Warning: MagpieRSS: Failed to parse RSS file. (Mismatched tag at line 89, column 8) in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36