TOP > Expression > Expression Web > CSSレイアウト > 印刷エリアを制御したい

CSSレイアウトページを一から作ってみよう

最終更新日：2008/02/04 22:24:18

Expression Webを使って、CSS段組レイアウトページを作成するための手順を解説します。

TOP | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

印刷エリアを制御したい

はじめに

私のサイトを印刷すると、右上のGoogle検索フォーム、それぞれのタブ、および、左メニューがなくなっているのがわかると思います。

これは、CSSで制御しているのです。

印刷に要らないモノは印刷しないようにすると、とりあえず印刷してじっくり読みたい閲覧者にとって使い勝手がいいサイトになります。

特定のエリアを印刷しないようにするには？

特定のエリアを印刷しないようにする方法は、印刷用のCSSファイルを別に作って、

といった感じに、CSSファイルへのリンクの記述にmedia属性を指定する方法と、CSSファイルにまとめて@media規則を作成する方法があります。

以前の私のサイトでは、印刷用のCSSファイルを別に用意して、それぞれのWebページのヘッダーに直接記述していきました。しかし、Expression Webにおいて、外部スタイルシートのメディアタイプの指定がダイアログボックスでできないため、めんどくさかったので一つのCSSファイルに統合しました。

@media規則をCSSファイルに記述するには、直接CSSファイルに入力する必要があります。印刷制御するには、CSSファイルを開き、

@media print {

と入力することによって、自動的に}がつけられ、間にカーソルが移動されます。

@media print{
	|
}

［スタイルの管理］作業ウィンドウを開くと、以下のようになります。
@media規則を記述した後の画面

この中にスタイルを記述していくと、印刷するときのスタイルの設定ができます。このまま直接入力してもかまいませんが、これから、［新しいスタイル］ダイアログボックスで普通にスタイルを作成したあとに、［スタイルの管理］作業ウィンドウにて@media規則内に移動する方法を解説します。

スタイルの作成

印刷しないようにするには、displayプロパティをnoneにするとOKです。印刷したくないモノはどんどんdisplay: noneと指定していってください。また、幅固定を解除するには、段組を囲むコンテナの幅を100％に指定します。メインコンテンツ部分も幅100％にしたいところですが、Firefoxでは右端が切れてしまうバグがあるため、98％にするとよいでしょう。ただし、右寄せ配置を解除しないと、Internet Explorerでの印刷時にレイアウトが崩れてしまうので、必ずfloatプロパティをnoneにしてください。