プリント用スタイルシート

電脳日記

ダイアリに印刷用スタイルシートを設定したかったので以下にメモ。
メディアタイプをprintと指定することで印刷用にスタイルシートを適用することが出来る。メディアタイプの指定方法は次の三種類。

今回使うのは @mediaの方法。ほかの二つは外部のCSSを読み込むのではてな外のスタイルシートを読み込まなくちゃならなくて面倒。(はてなは複数のスタイルシートをアップロードできないから)
@mediaのやり方は簡単。下の記述みたいな感じで、適用したいスタイルを@media print{}で囲むだけ。

@media print {
    /* 印刷用スタイル */
    .sidebar {display:none; }とか適当に。
  }


ちなみにlink要素で読み込んだり@importを使うには次のようにする。

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

@import url("print.css") print;

mediaタイプはprintのほかにもいろいろある。screen, projection, handheld, speechとか。ref.) google:@media css print screen

今回僕が加えたCSSは以下のとおり。がつがつ消した。

/****** Print ******/

@media print{
	#banner{display:none;}
	a.edit{display:none;}
	.sidebar{display:none;}
	.caption{display:none;}
	.icon{display:none;}
	.calendar{display:none;}
	.refererlist{display:none;}

	img {border: 0;}

	.main{padding: 0px; margin: 0 0 0 0;}
	div.section p, li{margin-right:2em;}
	div.section blockquote{margin-right:3em;}
	div.section blockquote p{margin-right:.5em;}
}

/****** Print ******/