drublic

Webデザインテクニック回りの話題として、実用的なデザインで紙に印刷されるようにするティップスが説明されることが増えている。これまではPC、タブレットデバイス、スマートフォン、異なるブラウザ、異なるブラウザバージョンに対してどのようなアプローチを取るかが議題に上がることが多かったが、次のターゲットは紙ということになる。

紙印刷向けの基本的なテクニックはすでに出尽くした感じがある。最近のまとめ記事としてHans Christian氏のPrinting The Webを紹介する。基本的なテクニックが網羅的にまとまっている。ほかのコンテンツへのリンクも多く、ここからさまざまなティップスにたどり着くことができる。

紹介されているテクニックを簡単にまとめると次のとおり。

  • 印刷向けのスタイルシートはmedia="print"を指定して読み込むか、@media print {}内部に記述する
  • ナビゲーション、ヘッダ、フッタなど紙媒体において不要なものはdisplay: noneを指定して取り除く
  • ロゴは白黒ベースのものを用意するなどして、白黒で印刷された場合に適したものを使用する
  • フォントとサイズ、カラーは紙に白黒印刷した場合に適したものを設定する
  • 外部リンクに関してはURLを表示する。場合によってはQRコードを印刷する
  • @page {}でページの設定を行う
  • page-break-before、page-break-afterを使って改ページを制御する
  • 必要に応じて孤立行やウイドーを調整する
  • ブラウザがそれぞれ独自に提供している印刷向けの機能もあるので、必要であればそれら設定も有効にする

紙媒体への印刷を好むユーザも多く、こうしたティップスはしばらくはWebデザインにおける注目の話題であるとみられる。