Aug 08

css media print 印刷用にCSSを組む

HTML コメントはページの下に

CSSを使って印刷設定を行う。

ブラウザ表示のを印刷用にCSSを用意するtipsについてメモ。
普段はあまり印刷を気にすることがなくても、「自分の意図したとおりに印刷してほしい」時などがページによってはあるかもしれません。
とりあえずメモ用に印刷に関するものを取り上げてみる。
※メモなので途中です。

CSSで印刷のページ設定を行う

pageの使い方はよくわかっていません。（実践していない）
page-break-afterプロパティは、有意義だなと感じました。

s3g.jp css/print/
http://w3g.jp/css/print/

css Print skill
http://www.slideshare.net/swapskills/swapskills-print-css

初級Webデザインアドバイス
http://deztec.jp/x/02/10/lecture/cssprint.html

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

@media print {
body { font: 10pt serif}
}

プリントメディアではページボックスを使うことになっている
margin, page area
@page {
size: auto;
margin: 10%;
marks: crop cross;
}

@page pageid 名前をつけて参照できる
@page :right 見開き右のページ
＠page: left 見開き左のページ
@page: first 最初のページ

display:none
http://www.grandarbre.net/2009/02/pukiwikicss.html

IE8が対応したCSS2.1の機能：印刷とコンテンツの追加に関する機能（ZDNet)
http://builder.japan.zdnet.com/sp/internet-explorer-8-2009/story/0,3800095257,20392183,00.htm

印刷用CSSをまとめてみた
http://d.hatena.ne.jp/aratako0/20061208/p1

page-break-afterのサンプル付き
http://www.tagindex.com/stylesheet/page/page_break.html

空divで改ページを、clear:bothついでに行う。
div.pagebreak {
clear: both;
page-break-after: always;
}

参考リンク

RedLine Magazine : 印刷用ＣＳＳのお話
http://redline.hippy.jp/lab/css/css_16.php

前後の記事

« Ratocマルチディスプレイアダプタ REX-USBDVI2でトリプルモニタ｜｜フリーでPDF作成　メモ »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 0 ）

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.