印刷用スタイルシート（print.css）の具体的な内容を指定していきましょう。
print.cssに以下の内容を記述してください。
@charset "utf-8";
/*============================================
全般的なスタイル
============================================*/
body {
background-color:#ffffff; /*ページ全体の背景色*/
color:#000000; /*文字色*/
}
div#pagebody {
width:100%; /*幅の指定*/
}
/*============================================
メインメニュー
============================================*/
ul#menu {
display:none; /*非表示にする*/
}
/*============================================
ヘッダ画像
============================================*/
#img_index {
display:none; /*非表示にする*/
}
#img_subpage {
display:none; /*非表示にする*/
}
/*============================================
サブメニュー（左カラム）
============================================*/
div#submenu {
display:none; /*非表示にする*/
}
/*============================================
インフォメーション（右カラム）
============================================*/
div#info {
width:100%; /*幅の指定*/
}
p {
width:100%; /*幅の指定*/
}
.infoimg_index {
width:200px; height:150px; /*画像の表示サイズを指定*/
margin:0px 0px 20px 20px; /*マージン*/
float:right; /*画像を右寄せにする*/
}
.infoimg_subpage {
width:400px; height:300px; /*画像の表示サイズを指定*/
margin:0px 20px 20px 0px; /*マージン*/
float:left; /*画像を左寄せにする*/
}
hr {
width:100%; /*幅の指定*/
}
/*============================================
フッタ
============================================*/
div#footer {
display:none; /*非表示にする*/
}
保存をしたらindex をブラウザで開いて、印刷プレビューを確認してみましょう。印刷プレビューでメニュー部分やヘッダ画像部分などが非表示になっていれば成功です。
上記CSSソースで指定した印刷用スタイルの狙いについて、簡単に確認しておきましょう。
ヘッダ画像やフッタ部分などについては、必ずしも必要な情報ではないので、用紙やインクの無駄にならないようにとの配慮から非表示にしています。
メインメニューやサブメニュー部分は、用紙上でクリックできるわけではないので非表示にしています。
段落などのメインコンテンツとなる部分は横幅100%にして、紙面を有効に使えるように配慮しています。
| <前へ | 目次へ | 次へ> |