[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
関連記事
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います