[CSS]印刷用CSSの設定方法
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
印刷用のCSSは、設定が簡単!
普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされます。
見えているサイトをそのまま印刷する場合は不要なんですが、コンテンツ内容だけを印刷したいという要望が結構あるんです。
そんな時、どのように設定するのがよいでしょう?
一回一回印刷しますか?
今回は、その方法を紹介したいと思います。
印刷用のmedia=”print”を、一旦media=”all”に!
印刷用CSSの記述は全てのCSSの最後に記述されるものです。(経験上そうなってないのを見た事が無い)
ですから、表示非表示を決めるのも簡単で、とりあえずmedia属性をallにしてブラウザで見えている状態がプリントされる状態とします。
そこから、不要だと思う要素、つまりグルーバルメニューだとか、サイドメニューだとか、バナーであったりとか、そういう要素をdisplay=”none”にしていきます。
#gnavi, #side, #banner{ display="none" }
こういう感じですね。
こういう風に非表示を決めたら、コンテンツエリアも同様に変更します。
例えば、floatしているならfloat=”none”にしたりします。
注意が必要なのが、横幅です。本来ならautoで問題ないと思うところですが、意外なところでレイアウトが崩れたりします。
ですので、横幅は、適当なものを決めておく必要があります。
最近のブラウザは、拡大して印刷してくれますので、小さくても問題ありません。
ブラウザで、納得のいく印刷の状態になったら、media属性をprintに戻し、印刷プレビューでも同様の結果になるか確認します。
それで問題なければ、print.cssの完成です。
まとめ
印刷のことなんて考える必要はあまりないかもしれませんが、ユーザーのことを考えると、インクの無駄にならないように不要な部分はなるべく削っておいたほうがいいですね。
たかが印刷、されど印刷ですね。
ad
関連記事
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に