[CSS]印刷用のCSSのフレームワーク -Hartija
Post on:2008年4月14日
sponsors
Hartijaは、ブラウザからページを印刷する際に、最適化するためのCSSのフレームワークです。
Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> </textarea> |
Hartijaの構成は、ベース、見出し、画像、リンク、テーブルの5つと、「display:none;」を使用して印刷時には非表示にするものから成っています。
フォントの指定は英語がベースになっているので、日本語環境で利用する場合には「font-family」「font-size」を変更した方がいいと思います。
印刷用CSS：ベースの設定
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> 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; } </textarea> |
印刷用CSS：見出しの設定
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> 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; } </textarea> |
印刷用CSS：画像の設定
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> img { float: left; margin: 1em 1.5em 1.5em 0; } a img { border: none; } </textarea> |
印刷用CSS：リンクの設定
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> 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; } </textarea> |
印刷用CSS：テーブルの設定
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> 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;} </textarea> |
印刷用CSS：非表示箇所の設定
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> #header, #footer, #navigation, #rightSideBar, #leftSideBar {display:none;} </textarea> |
sponsors
