取扱説明書
このテンプレートはCSS着せ替えテンプレートプロジェクトの基礎htmlを元にデザインした、印刷専用CSSです。印刷時のみに適応されるデザインなので、サンプルは印刷プレビューをご覧ください。詳しくは解説をお読みください。
WinIE6では表示が崩れていますが、実際の使用（印刷）に際して問題はありません。
- ダウンロード
- デザインをダウンロード（zip）
配布元：AZ store
このテンプレートはCSS着せ替えテンプレートプロジェクトの基礎htmlを元にデザインした、印刷専用CSSです。印刷時のみに適応されるデザインなので、サンプルは印刷プレビューをご覧ください。詳しくは解説をお読みください。
WinIE6では表示が崩れていますが、実際の使用（印刷）に際して問題はありません。
配布元：AZ store
PC画面で見やすいからといって、そのページを印刷したものまで見やすいとは限りません。何故なら、PCと紙とでは「見やすさ」の基準が違うからです。
そこで印刷した時の見やすさを考慮した、CSS着せ替えテンプレートプロジェクト対応印刷専用CSSを作りました。max-widthを使っているのでWinIE6では表示が崩れていますが、実際の使用に際して問題はありません。印刷プレビュー・または印刷したものがこのCSSの本来のデザインになりますので、きちんとしたサンプルをご覧になりたい方はこのページを印刷してください。
CSSはデザインを自由に変更できる、複数のメディアに対応できるという大きな利点があります。現在、screenのみを対象としたデザインが多数派です。しかし、PCの他にも、携帯電話、印刷、テレビ、プロジェクター、音声ブラウザなどにそれぞれ違ったデザインを提供することができるのです。例えばPCで鮮やかなデザインを提供しながら、印刷ではシンプルで読みやすいデザインを提供するのが今回の目的です。
webの画像は印刷すると大抵の場合劣化しますが、文章の場合はデザインを工夫することによりwebより可読性を高めることができるので、印刷用CSSの恩恵を受けやすいのではないでしょうか。
公式サイトのstyle.cssをサンプルにして説明しますが、実際はCSS配布サイトからDLしたstyle.cssを改変します。「@media規則って何？ @import規則って何？」という初心者の方はこのCSSを使わない方がいいです。まず勉強してください。
CSS着せ替えテンプレートプロジェクトの基礎HTMLのlink要素にはmedia属性が指定されていません。CSSには@media規則や@import規則の記述がありません。よって、初期の状態ではあらゆるメディアにstyle.cssに記述されたプロパティ定義が適応されてしまいます。printにも適応されると印刷時に困るので、style.cssのプロパティ定義をscreenにのみ適応されるようにします。
これで、@media screen {と}の間に記述されたプロパティ定義はscreenメディアにしか適応されなくなります。print.cssの@media規則にはprintを指定しているので、印刷時にしかprint.cssは適応されません。
@import規則を用いることにより、複数のCSSを読み込むことができます。style.cssからprint.cssを読み込ませます。
@charset "Shift_JIS";直下に、@import url("./print.css");を挿入する（実行結果）。