ちょっとの気配り〜印刷用のCSS

画面はきらびやかにしたいけど、
印刷のときはシンプルな見た目で十分・・・なんて思うときありませんか?

CSSによって、画面の表示と印刷時の見た目を変えることができます。
印刷用のCSSを書くことによって、実現します。

その1 cssの中でかく

@media print {
/* ここの中に印刷時のCSSをかく */
}

こちらはブラウザー表示用のCSSと同じファイル内に書きたい場合です。
基本的にはCSSファイルの一番最後に書いてあげると、あまり間違いがないです。

その2 CSSの外でかく

<link href="cssの名前" rel="stylesheet" type="text/css" media="print">

スタイルシートの指定時に、media属性でprintを選びます。
printは、印刷用ということ。
例えばfor_print.cssというファイルを作って、 そこに印刷用のCSSを書きます。 その上で、html側からは、印刷用にmediaタイプをprint に指定したメタタグを一行追加すれば完了です。

両方をうまく使い分けて、
運営しやすいHP作りを目指したいですね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他