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

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の設定方法

公開日: : CSS, Web制作 , ,


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に

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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