[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は、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア