今日の授業は、印刷用のCSS設定。印刷用ですので、メニューとか印刷にいらないものは、CSSで削ります。

こうすれば、プリンタインクや紙が節約できます。まさしく、エコ時代にマッチしたウェブサイト構築手法といえるでしょう。

印刷には背景色や背景画像はじゃまですが、これは、デフォルトで、ブラウザがカットしてくれるようです。また、基本の背景と文字は、白黒になっていますね。

あと縦方向のスペースやぱんくずリストなども削除してやると、多数ページを印刷するときなどは、節約になりますね。

サイトタイトル（<title>）とURLは、Firefoxの場合デフォルトでヘッダ左右に、フッタには、ページ数と日時が入ります。IEでも配置は違いますが、同様の内容が入ります。

不要な要素は、印刷では、極力非表示にしますが、そのための方法は、簡単です。

CSSで、{display:none}を指定するだけです。

html上では、プリント用のCSSリンクは、スクリーン用のCSSリンクの下に、通常は位置します。

つくるのであれば、サイト構築の早い段階で作成しておいて、仕込んでおくといいですね。

今日は、印刷用CSSの他に、ぱんくずリストやサイトマップを教材サイトに追加しました。

みなさん、凄い集中力で、午前中にほぼ仕上げてしまいました。

Tweet