新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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

   

  • このエントリーをはてなブックマークに追加

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

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

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

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

スポンサーリンク
 

画期的なんていってますがすでに浸透しているCSSを使うだけです。
以下、その手順を順を追って解説。

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対応版

 - ユーザビリティ, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Suicaポイントは自動販売機でドリンク(飲料)を買って貯めよう

1年以上前の記事です。内容が古い可能性があります。少し前にSuicaポイントは2 …

「Windows 7(64bit)」に「Photoshop Elements 2.0」をインストールする方法

1年以上前の記事です。内容が古い可能性があります。生徒さんがパソコンを買い換えま …

Togetter(トゥギャッター)とTwiccha(ツイッチャ)でつぶくま会のオンライン会議を実行 (9/20追記)

1年以上前の記事です。内容が古い可能性があります。今月は忙しくてオフラインでの会 …

イラストレータCS3で一発モノクロ変換

1年以上前の記事です。内容が古い可能性があります。新しいマシンが来てアドビクリエ …

耳掃除(耳かき)はやっちゃダメ。耳垢には役目があるとアメリカ医学会が警告

1年以上前の記事です。内容が古い可能性があります。耳掃除は実はやる必要が無いとい …

Skype(スカイプ)を使ってチャットをするまで(設定編)

1年以上前の記事です。内容が古い可能性があります。1. ID取得編 → …

「iOS5」にしたらツイッター(Twitter)連携が簡単になった【iPhone】

1年以上前の記事です。内容が古い可能性があります。こんなメールが届きました。 お …

TwitterCards(ツイッターカード)でツイッター→ブログ連携をより効果的に

1年以上前の記事です。内容が古い可能性があります。いやぁ。これ知らなかったなぁ。 …

no image
ページランクまとめ

1年以上前の記事です。内容が古い可能性があります。過去ログみてもページランクの仕 …

独自ドメインのWORDPRESS(ワードプレス)ブログを半日で作る方法(後編)

1年以上前の記事です。内容が古い可能性があります。移転後すぐ前編を書いていながら …

血液型オヤジ