[CSS]印刷用のCSSのフレームワーク -Hartija

Hartijaは、ブラウザからページを印刷する際に、最適化するためのCSSのフレームワークです。

Hartija - Css Print Framework

Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。

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

Hartijaの構成は、ベース、見出し、画像、リンク、テーブルの5つと、「display:none;」を使用して印刷時には非表示にするものから成っています。
フォントの指定は英語がベースになっているので、日本語環境で利用する場合には「font-family」「font-size」を変更した方がいいと思います。

印刷用CSS：ベースの設定

body {
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height: 1.4;
word-spacing:1.1pt;
letter-spacing:0.2pt; font-family: Garamond,”Times New Roman”, serif; color: #000; background: none; font-size: 12pt; }

印刷用CSS：見出しの設定

h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1{font-size:19pt;}
h2{font-size:17pt;}
h3{font-size:15pt;}
h4,h5,h6{font-size:12pt;}

code { font: 10pt Courier, monospace; }
blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }
hr { background-color: #ccc; }

印刷用CSS：画像の設定

img { float: left; margin: 1em 1.5em 1.5em 0; }
a img { border: none; }

印刷用CSS：リンクの設定

a:link, a:visited { background: transparent; font-weight: 700; text-decoration: underline;color:#333; }
a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: ” (” attr(href) “) “; font-size: 90%; }
a[href^="http://"] {color:#000; }

印刷用CSS：テーブルの設定

table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #fff; margin-bottom:2em; text-align:left; }
thead {display: table-header-group;}
tr {page-break-inside: avoid;}

印刷用CSS：非表示箇所の設定

#header, #footer, #navigation, #rightSideBar, #leftSideBar
{display:none;}

Post on:2008年4月14日