Webサイトでプリント時にヘッダやメニューを消す方法
1年以上前の記事です。内容が古い可能性があります。
どうも日本人は印刷にこだわる。
大手企業の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対応版
アドセンス広告メイン
関連記事
-
-
【急募】 twitter(ツイッター)とmixiボイスの回答の違い
1年以上前の記事です。内容が古い可能性があります。Twitter2mixiを再び …
-
-
「Tween」のタブ機能を使いこなそう
1年以上前の記事です。内容が古い可能性があります。twitter(ツイッター)を …
-
-
アメブロ(Amebaブログ)をケータイで更新する方法
1年以上前の記事です。内容が古い可能性があります。今さらですが生徒さん及び娘がア …
-
-
耳掃除(耳かき)はやっちゃダメ。耳垢には役目があるとアメリカ医学会が警告
1年以上前の記事です。内容が古い可能性があります。耳掃除は実はやる必要が無いとい …
-
-
ワードプレス(WordPress)のアップグレードをちゃんとやってみた【さくらインターネットの場合】 #wp
1年以上前の記事です。内容が古い可能性があります。ワードプレス(Wordpres …
-
-
ブログに「つぶくま」バナーを入れる方法(各ブログフリーエリアの編集方法)
1年以上前の記事です。内容が古い可能性があります。ある方から、チラシだけじゃなく …
-
-
出会い系サイトで何と書き込んだら逮捕されるのか【ちほちゅう深夜版】
1年以上前の記事です。内容が古い可能性があります。中学生男子が「エッチなお姉さん …
-
-
YouTube→Twitter(ツイッター)連携ダウン中?メール対応でFA
1年以上前の記事です。内容が古い可能性があります。FAってのはファイナルアンサー …
-
-
固定電話を解約しました
1年以上前の記事です。内容が古い可能性があります。このたび、ついに固定電話を解約 …
-
-
iPhoneでバイブレーションパターンが自作できるようになっていた
1年以上前の記事です。内容が古い可能性があります。今までも、「iPhoneの着信 …
- PREV
- 最近引っかかりそうになったスパム(MIXY)
- NEXT
- IT業界ももうすでに頭打ちなのかもしれない







