リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 画面表示と印刷をCSSで分ける方法

CSS

画面表示と印刷をCSSで分ける方法

CSSで画面表示と印刷表示を分ける方法。

【HTML記述サンプル】

特に指定せず外部スタイルシートをリンクさせる場合
<link rel="stylesheet" type="text/css" href="sample.css" />

画面表示だけ外部スタイルシートをリンクさせる場合
<link rel="stylesheet" type="text/css" media="screen,tv" href="sample.css" />

印刷表示だけ外部スタイルシートをリンクさせる場合
<link rel="stylesheet" type="text/css" media="print" href="sample.css" />

全てに外部スタイルシートをリンクさせる場合
<link rel="stylesheet" type="text/css" media="all" href="sample.css" />


同一スタイルシート内で画面表示と印刷表示を分ける方法。
@media print {}で印刷時適用したい内容を囲えばよい。

【CSS記述サンプル】

/*画面表示用*/
#home1 {
	width: 890px;
	height: 600px;
	display: block;
}
#home2 { display: none; }

/*プリント用*/
@media print {
#home1,h2,h3 { display: none; }
#home2 {
	width: 890px;
	height: 600px;
	display: block;
	}
}



last update 2009.5.3
参考・出典等
メディアタイプ - CSS2リファレンス

▲page top

topmemogalleryblogtestaboutmail
Copylight(C)2008 Riptac. All Rights Reserved.