Webサイトでプリント時にヘッダやメニューを消す方法

1年以上前の記事です。内容が古い可能性があります。

どうも日本人は印刷にこだわる。
大手企業のWebサイトですらA4サイズで印刷できるように横幅を調節して作っているところが多い。
□東芝：トップページ
□Sony Japan｜ソニーグループ ポータルサイト
□Hondaホームページ : 本田技研工業株式会社
□任天堂ホームページ

一方ポータルサイトではYahooが横幅を広げたことに追随するかのごとく殆どのサイトの横幅が広くなった。
ところが、横幅を広げすぎるとプリント時にA4サイズに収まらなくなってしまう。

そこで、印刷時無意味なヘッダーやコンテンツメニューを印刷させなくすることで、
モニターではポータルサイトの横幅と同じ。さらにプリントアウトするとしっかりA4で出力される。
という画期的な方法を紹介します。

1. プリント時のみ適応させるCSSを設定する。
HTMLのヘッダ内に以下のタグを書き込む。

<link href="print.css" rel="stylesheet" type="text/css" media="print">

ポイントとなるのは「media=”print”」の部分。
ここで、印刷時に適応されるCSSであることを指示している。
なお、print.cssはCSSファイルの名前でどんな名前にしてもOKだが、
別ディレクトリだったりした場合はパス表記にする。（このあたりは基本）

2. 次にCSSを用意する。（名前は任意。ここでは「print.css」）
内容は

.noprint {display: none;}

class名（noprint）は任意。class=”noprint”の入ったタグは表示させないという意味。

3. 最後にブロックレベルのタグにclass=”noprint”を書き込むことで印刷時に表示されなくする。
SEOコーディングされたソースであればDIVタグ、そうでなければTABLEタグだけでなく、TRタグやTDタグに書いても可能。

なお、print.cssに文字の大きさやフォントスタイルなども書いておくと、プリント時に文字を大きくしたり、フォントを決めたりできる。
もっと凝ればプリント時に表示されたデザインと違ったデザインでプリントさせることも可能です。

■参考（追記）
□紙サイズ一覧Web対応版