はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
印刷用CSS：メディア指定
2008/12/15
- トモ・リーン
- ちらほら言ってきたけど、印刷用の設定のCSSを書かないと印刷時はキレイに出ないわよ！
- ケンジ
- ふむふむ。
- トモ・リーン
- ネコサイトをWindows版Firefoxで印刷プレビューしてみました
クリックで拡大します。
- ケンジ
- な、なんじゃこりゃああああ！！
- トモ・リーン
- 特に印刷用の設定をしていなければ、こんなものね。悲しいけど、これが現実よ。
IE6ではさらに跡形も無いわよ（泣）
- ケンジ
- 覚悟はしていたが、これほどだったとは・・・！！
- トモ・リーン
- 印刷用のCSSの設定はmediaでプリント指定をするのよ！
印刷用のCSSの指定の仕方
印刷指定のCSSには分かりやすいように文字色を赤指定しています。
印刷プレビューをしてみると文字色が赤い状態を確認してみてください。
IE6では表示崩れが派手に発生していますので、文字が表示されない状態です。
表示のチェックにはIE6以外のブラウザを使用してください。
- media="print"
- headタグ内でのCSSファイルのリンクに記述します。
モニター用とプリンタ用とファイルを分けて書きたい場合にオススメ！
<link href="css.css" rel="stylesheet" type="text/css" media="print" />
media="print"で印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください)
上記のHTMLに添付されている印刷用CSSファイル
- @media
- CSSの記述の中で指定する場合に使います。
CSSファイルを一つにまとめる必要があるとき、局所的に対応する場合、HTMLファイルにスタイルを直書きする場合ににオススメ。
@media print {
* { color: red; }
}
@media printで印刷用CSSを指定したHTML(※印刷プレビューしてみてください@media print の記述は10行目に書いています。)
- @import
- @importの使用時はこの方法でインポートCSSファイルごと指定できます。
ただし、IE系ではバグのため適用されません！！
IEでプリント専用CSSファイルを使いたい場合は、普通にインポートしてインポートしたCSSファイル内で@mediaを使用した書き方をしましょう。
@import "print.css" print;
@importで印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください)
@importでメディア指定されているCSSファイル
上記のCSSファイルにインポートされている印刷用CSSファイル- ケンジ
- いままで、この指定してなかったけど、その場合はどうなるの？
- トモ・リーン
- 特にメディア指定をしていない場合は全てのメディアで指定したCSSが適用されるのよ。
CSSの表示の指定が設定できるメディア一覧
| プロパティ | CSSの適用先 |
|---|---|
| all | 全て |
| screen | コンピュータのモニタ |
| プリンタ | |
| projection | プロジェクタ |
| tv | テレビ |
| aural | 音声合成機器 |
| speech | 音声合成機器 |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| handheld | 携帯端末 |
| tty | 固定幅文字の機器 |
- ケンジ
- うへぇ〜〜！こんなにあったんだ！
ん？？まてよ。
指定しなかったときは全てのメディアに適用されるってことは今まで書いていたCSSもプリントでも見えるはずなんだけど・・・？
- トモ・リーン
- その通り！
始めに出したネコサイトの印刷プレビューでも、全てのCSSの情報が期待ハズれなレンダリングをされている訳じゃないわ。
レイアウトは残っているわよね？（IE6は壊滅的だけど）
- ケンジ
- そうだった！
- トモ・リーン
- 実は同じブラウザでも、スクリーンと印刷じゃ、全く違うレンダリングをするのよ。
- ケンジ
- なんだって！
それじゃあ、チェックブラウザが増えるようなものじゃないか！！
- トモ・リーン
- 印刷はスクリーンとは全く違うタイプのレイアウト崩れが発生するのでもっとタチが悪いのよ・・・。
お気を付けて！！
- ケンジ
- くっ・・・・・。
次は、具体的にどうスクリーンと見え方が違うのか教えてね・・・。
- 今回のポイント！
- 印刷用のCSSを準備することによって、印刷対応が出来ます。
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：印刷用CSS：メディア指定
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/113
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
