印刷用CSS：メディア指定
- トモ・リーン
- ちらほら言ってきたけど、印刷用の設定の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を準備することによって、印刷対応が出来ます。