CodeZine(コードジン)

特集ページ一覧

コンテンツのみ印刷するようにCSSで制御してみよう

CSSレイアウトとメディアタイプ

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/06/19 14:00
目次

メディアタイプで分ける2つの方法

 すべてのCSSプロパティにおいて、パソコンのスクリーン、モバイル端末、印刷時、プロジェクタ、それぞれメディアタイプ別にデザインを分けることができます。CSS2で指定できるメディアタイプは下表のとおりです。

all 指定できるメディアのすべて
aural 音声出力(音声読み上げツールなど)
braille 点字ディスプレイなどの点字出力
embossed 点字プリンタ
handheld 携帯用機器
print プリンタ(印刷用)
projection プロジェクタ
screen パソコン画面
tty 文字幅が固定された機器
tv テレビ

 なお、メディアタイプでスタイルを分ける方法は、大きく分けて2通りあります。

  • メディアタイプ別にCSSファイルを分ける
  • 1つのCSSファイルで、メディアタイプ別にスタイルを分ける

メディアタイプ別にCSSファイルを分ける

 ブラウザで特定のセクションや要素を印刷しないようにする場合、通常、以下のようにメディアタイプ別にCSSファイルを分けて、対象となるHTMLファイルのlinkタグにmedia属性(印刷用のCSSファイルの場合は media="print")を設定し、それぞれ専用のCSSファイルを呼び出します。この方法はごく一般的とされています。

<link rel="stylesheet" href="./print.css" media="print" type="text/css">

1つのCSSファイルで、メディアタイプ別にスタイルを分ける

 すべて一つのCSSファイルで管理したい場合は、@media というCSSのルールを作成して、その中に対象となるセレクタのスタイルを設定していきます。筆者の場合はこの方法でCSSを管理しています。

@media screen{
	h1{
	margin-bottom: 20px;
	font-size: 1.8em;
	padding-left: 7px;
	border-left: solid 7px #999;
	}
	/* 省略 */
}
@media print{
	h1{
	margin-bottom: 20px;
	font-size: 1.8em;
	padding: 0px;
	border-style: none;
	}
	/* 省略 */
}

印刷したくない部分を指定するには

 たとえば、サイドバーなど印刷する必要がない場合は、displayプロパティを使って非表示にします。

@media print{
	#sidebar{
	display: none;
	}
}

Firefoxでうまく印刷されない場合の対処方法

 floatプロパティで回り込ませたり、DIVの幅を指定したりすると、Firefoxでは印刷時に右端が切れてしまうという問題が発生します。これを防ぐには、段組みレイアウトを実装するためのスタイルをすべてscreenメディアタイプに定義しておくのがポイントです。メディアタイプを指定しないでレイアウトスタイルを定義しないように注意してください。

body {
	margin: 0;
	padding: 0;
}

#header{
	background-color: #CCC;
}

#footer {
	clear: both;
	background-color: #CCC;
}

@media screen{
#container {
	width: 760px;
}

#sidebar {
	width: 200px;
	float: left;
}

#page_content {
	width: 560px;
	float: right;
}
}

@media print{
	#sidebar{
	display: none;
	}
}

まとめ

 CSSで段組みレイアウトを行う方法は何通りもあります。一番躓きにくい方法として、floatプロパティを使って段組みセクションそれぞれを左または右に回り込ませるように定義を行い、それぞれ幅を指定しておくのがポイントです。

 また、ブラウザによって既定のマージン値やパディング値が異なるため、どのブラウザでも同様に表示するにはそれぞれ指定しておくのがよいでしょう。

 @screenのメディアタイプブロック内にレイアウトを決定するスタイルを定義すると、Firefoxで印刷時に右端が切れたり2ページ目以降印刷されない…といった問題を防ぐことができます。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5