印刷用の画面を用意しました
「印刷のときは広告を消すようにスタイルシートを書く」という記事を参考に、CSSスタイルシートの「media」タグを使って印刷用のレイアウトを用意しました。タイトルや記事一覧が消えて、本文が大きく印刷されます。ブラウザの印刷プレビュー画面などで確認してみてください。
CSSスタイルシートに「@media」タグを用いると、画面用のスタイルと印刷用のスタイルを自動的に切り替えることができます。例えば、次のようにしてレイヤーの表示・非表示や、表示幅、文字の色などを変更しています。
@media print {
#layer_mokuji {display: none;}
#layer_top {display: none;}
#layer_body {width:100%;}
.itemBoxStyle {color: #000;}
}
@media screen {
#layer_top_print {display: none;}
}
関連する記事
このサイトの内容は私の個人的な見解であり、私の所属するいかなる団体や組織の見解を反映しているものではありません。
2006年11月2日 21時49分 #
ありがとー。
2006年11月3日 2時07分 #
CSS ファイルを画面表示用と印刷用とでふたつに分けて、次のように HTML を書くことでも使い分け可能です。
＜link rel=”stylesheet” media=”screen” href=”screen.css”＞
＜link rel=”stylesheet” media=”print” href=”print.css”＞
2006年11月3日 10時28分 #
Chocolaさん、Mocelさん
コメントありがとうございます。
mediaタグって、画面と印刷だけじゃなくて、携帯端末、音声出力、点字ディスプレイ、点字プリンタ、プロジェクターとか、いろんな種類があるんですね。いやいや、びっくりです。