【CSS】印刷用のレイアウト
CSSでレイアウトを行っているページで、印刷時のレイアウトを指定されることがありますね。
そんな時は、CSSを「@media print」で囲うことで実現できるようです。
こんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style>/* 画面表示用のCSS */.txtWrapper { background-color: red;}/* 印刷用のCSS */@media print { .txtWrapper { background-color: yellow; }}</style><div class="txtWrapper" > <span>テスト</span></div> |
このように記述することで、画面表示の際は赤、印刷時は黄色の背景になります。
また、CSSファイルを読み込む際に指定することもできるようです。
1 2 3 4 5 6 | <link rel="stylesheet" href="layout.css" type="text/css" /><link rel="stylesheet" href="print.css" type="text/css" media="print" /><div class="txtWrapper" > <span>テスト</span></div> |
layout.cssが画面表示用で、print.cssが印刷用と考えてください。
「media=”print”」を指定していることが分かるかと思います。
これで簡単に印刷用レイアウトを作ることができますね。
No comments.