印刷用のスタイルシート設置

先日、ふと思い立って印刷用のスタイルシートを作成しました。自分で印刷しようとしたのですが、スタイルシートのmedia属性を「all」としていたので、不要な部分、具体的には左右のメニュー項目などまで印刷されてしまい、紙が無駄。おまけにブラウザによっては背景をきちんと黒にしてくれて、インクの無駄。

ということで、不要な部分を大幅にカットし、見た目に関してはほとんどブラウザの初期設定に任せるスタイルシートを作成しました。

いろんなサイトで印刷用スタイルシート作成時の注意点が書かれていましたが、僕の出した結論は、フォントや色はユーザ任せにする。というものです。ユーザというか、ブラウザ任せですね。文字サイズや書体まで考えると、もうそれは印刷用のデザインをするのとさして変わらなくなるので、作業として「理解できて楽しい」範囲を超えてしまいますので。

まず、現在使用しているスタイルシートの media 属性を修正し、印刷用スタイルシートへのリンクを追加します。スタイルシート内に「@media print」としても良かったのですが、面倒なので。

<link rel="stylesheet" type="text/css" href="heartfield.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

これで、PC 等は今までどおり、印刷時のみ「print.css」を参照するようになります。

以下ちょっと長いですが、当サイトの印刷用スタイルシート抜粋です。今回初めて使ったプロパティもありました。

body {
margin: 0 15mm 10mm 15mm;
}

まず「body」に、つまり内容に対して、余白を設けています。ちょっと細長くしたかったので。

body#about h2,
body#item h2,
dl#siteMenu,
dl#others,
dd#AdSense,
p.trackbackFooter,
p.commentFooter,
div#commentForm {
display: none;
}

左右のメニュー等に「display: none;」を指定し非表示にしています。後は AdSense とかコメントフォームですね。印刷しても利用できませんから。

#main img.right,
#main img.left {
float: left;
padding: 0 1em 0 0;
}

画像に関しては、全ての「float」を左に統一。ブラウザ上で「float」していない画像には影響ありません。

#main dd.itemBody p,
#main dd.itemMore p {
line-height: 150%;
}

本文の「line-height」を「150%」にしています。

#main dd.itemBody a:after,
#main dd.itemMore a:after,
address a#CC:after {
content: " [URI: "attr(href)"]";
font-size: 50%;
}

本文中のリンクテキストの後ろに、URI を表示するようにしました。ここで使用したのが「after」疑似要素です。「content」プロパティで指定した内容が追記されます。「attr(href)」でリンク先の URI を取得できます。「href」はそのタグに含まれる属性であればどれでも使用できます。指定した属性がない場合は何も出力されません。これで、印刷した状態でも URI が確認できます。ただ、文字列が長すぎる場合が多いので、フォントサイズを「50%」にしています。なお、この疑似要素は IE 6 では使用できません。

#main dd.itemBody blockquote p.quoteFooter:before,
#main dd.itemMore blockquote p.quoteFooter:before {
content: "via: ";
}

今度は「before」ですので、この要素の前に表示されます。この場合は引用元を明示するために「via: 」と表示しています。

#main img.moblogImage {
float: left;
margin: 0 1em 3px 3px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #666666;
}

moblog の画像に縁をつけています。お遊びです。

試しに印刷プレビューでもしていただければ、どのように表示されるか一目瞭然です。というか見てもらいたいのでキャプチャしてみました。興味のある方は是非ご覧ください。

個別アイテムページの印刷結果
「五秒の再会｜斉藤和義と玲葉奈」の場合

moblog個別アイテムページの印刷結果
「13巻」の場合

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]