印刷用のCSSを勉強するためのスライドです。

1. print メディア向け CSS 設計
2008年12月20日
小山田晃浩

2. 自己紹介
名前 : 小山田 晃浩
やってること : HTMLコーダー (株式会社メタフェイズ)
自信のWeblogで情報発信
www.yomotsu.net
たまに雑誌の記事を執筆
web creators

3. 印刷にはどうに対応していますか?
特に対応しない
PDFを自動で生成するAPIを使う
http://capture.heartrails.com/help/make_pdf
JavaScriptで対応しているケース
http://www.nytimes.com/
http://www.mitsui.co.jp/index.html
CSSをメディア別に用意して対応するケース
http://
http://

4. CSSで印刷に対応する
しっかり構造化された (X)HTML なら
印刷用に別ページを用意する必要がない
プリントメディア型のCSSを用意するだけで対応できる

5. CSSで印刷に対応する

6. プリントメディア型
印刷したときや、印刷プレビューの画面に
適用されるメディア型
メディア型
ページ付けしたメディア

7. プリントメディア型の特徴
ページという概念がある!!

8. プリントメディア型の特徴
ページボックスの概念
(screen でいうと Web ブラウザーの外枠)
高さ、横幅が有限
(多くの場合A4サイズ)
(Web ブラウザーの場合は無限にスクロールできる)
改ページ
(Web ブラウザーの場合はスクロールがあるので改ページはない)
スクロールできない
(overflow : scroll; や iframe などに気をつける)
static なメディア : JavaScriptやFlashは動かない

9. ページボックスの特徴
横幅は有限なので領域を有効に使う必要がある

10. 改ページ位置の特徴
ボックス間の上下マージンで改ページできる (通常フロー)
行と行の間で改ページできる (通常フロー)
絶対配置されるボックスの中では, 改ページはできない
境界のあるブロックの中での改ページを避けようとする
表内部の改ページを避けようとする
浮動要素の中の改ページを避けようとする

11. 媒体が違う(紙)ので
プリント時の表示と
Web ブラウザーでの表示は違う

13. CSS を読み込ませる方法いろいろ
特定のメディア型向けのCSSを読み込ませる方法は
いくつかある

14. link 要素の media 属性
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;screen.cssquot;
media=quot;projection, tv, screenquot;>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot;
media=quot;printquot;>

15. @import ルール
@import url(quot;screen.cssquot;) projection, tv, screen;
@import url(quot;print.cssquot;) print;

16. @media ルール
@media print {
body { font: 10pt serif }
}

17. スマートな読み込ませ方
@media ルールを利用する!!
@media ルールは IE 6 でも対応している。

18. スマートな読み込ませ方

19. スマートな読み込ませ方
demo
demo_media_rule

21. プリント用に用意されているCSS
ページドなメディア用にいくつかのCSSが用意されている
ただし現状は微妙

22. ページボックス
プリントメディアではページボックスを使うことになっている

23. @page ルール
size (ページ領域), margin (ページ余白),
marks (トンボの指定) を行う
@page {
size: auto;
margin: 10%;
marks: crop cross;
}

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

25. @page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin-top: 10cm;
}
[Picture Caption]

26. 改ページ関連
page-break-before
値 : auto | always | avoid | left | right | inherit
対象の要素の前での改ページ制御
page-break-after
値 : auto | always | avoid | left | right | inherit
対象の要素の後ろでの改ページ制御
page-break-inside
値 : avoid | auto | inherit
対象の要素の中での改ページ制御

27. 改ページ関連
orphans
値 : <integer> | inherit
ページの下部に残さなければならない段落の最小行
widows
値 : <integer> | inherit
ページの上部に残さなければならない段落の最小行数

28. 現状では
Web ブラウザー側の
実装がまちまちで
利用する機会がない!!

29. 今できること
Web ブラウザーの印刷の仕様やクセを活用する

30. 今できること
領域が限られているので特に横幅に気をつける
多くの場合、背景が出力されない ため、
表現を背景に依存しすぎない
ナビゲーションやリンク箇所は機能しなく なり、
リンク先は不明になる
崩れやすいので小技を使う

31. 印刷時の出力結果の選択
ディスプレイでの表示と同じように出力する
プリントメディア専用のレイアウトに変えて出力する
メリット/デメリットを説明し、
事前にクライアントに確認 をする

32. ディスプレイと同じ表示での出力
クライアントやユーザーは、
印刷時に画面に表示されたものが
そのまま紙に出力されることを期待する人が多い
横幅が広い場合には縮小しなければいけない
ディスプレイと同じように表示するのは至難の業
背景は出力されない環境が多い

33. 印刷専用のレイアウトで出力
ディスプレイと同じように表示しづらいときの言い訳になる
サイドバーなどを消すことで横幅を有効に使える

34. 事前にクライアントに確認をする
クライアント :
画面の表示そのまま。印刷対応というからには横幅も何と
かしておさまってくれるんだろう
制作側 :
横幅を有効活用するためにサイドバーは非表示。背景は
表示されないが必要な情報は失わない
「印刷に対応します」と作った Web サイトで、
クライアントとの認識の違いが起こる可能性がある
事前に出力のされ方や利点を説明しておくことが大切

35. 事前にクライアントに確認をする
画面と同じように出力
画面に表示されたものが
そのまま紙に出力されることを期待する人が多い
印刷時専用レイアウトで出力
横幅を有効活用するためにサイドバーを消す
印刷するユーザーにとっては必要な
情報さえあればよく、余分な装飾は不必要
デフォルトで背景が表示されないのは仕様

36. 実践!!
画面と同じように出力しよう編
印刷専用レイアウトで出力しよう編
印刷時のためのテクニック共通編

37. 画面と同じように出力しよう編

38. 横幅が広いためおさまらない!
IE 6 にはフィット/拡大縮小 機能が無いのではみ出て切れて
しまう
それならば、縮小させればいい
IE には zoom プロパティがあるのでこれを利用する

39. 横幅が広いためおさまらない!
IE6で印刷時に縮小させる方法
@media print{
* html body{
zoom : 0.7 ;
}
}
「* html」 は IE 6 用にするための CSS ハック

40. 横幅が広いためおさまらない!
demo
site1/print_test_ie/demo.html

41. 印刷専用レイアウトで出力しよう編

42. 不必要な要素を消す
ナビゲーションは意味を持たなくなる
サイドバーは不必要な場合が多い
フッターの情報はコピーライト以外はいらないケースが多
い

43. 不必要な要素を消す

44. 不必要な要素を消す
@media print{
#navigation,
#sidebar,
#footer ul {
display : none;
}
}

45. 不必要な要素を消す
demo
/site2/print_test_ie/demo.html

46. 印刷時のためのテクニック共通編

47. 背景に依存しすぎない
多くの場合、背景が出力されない。

49. 背景に依存しすぎない
重要な情報を持つ画像は背景にはしない
見出し、キービジュアル、挿絵など
http://www.w3.org/TR/WCAG20-TECHS/F3.html

50. 画像置換した部分が表示できない
CSSの画像置換は背景 なので表示できない
背景は 表示されない。背景以外 は表示される。
つまり背景以外で画像置換を行えばよい

51. 画像を表示できる CSS プロパティー
E:before, E:after + content で表示する画像
p:before{
content : url(img/ico.gif);
}

52. 画像を表示できる CSS プロパティー
list-style-image で表示する画像
p{
display:list-item;
list-style-image:url(img/ico.gif);
}

53. 画像を表示できる CSS プロパティー
AlphaImageLoader (IE only) で表示する画像
p{
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(sizingMethod=scale,src='ico.
png'); zoom:1;
}

54. 画像置換した箇所を表示する
list-style-imageを使えばWebブラウザーにも対応可能

55. 画像置換した箇所を表示する
list-style-imageを使えばWebブラウザーにも対応可能
div.section{zoom:1;}
div.section h2.heading#heading1{
width:530px;
/width:0; /* for IE 6,7 */
height:50px;
display:list-item;
list-style-position:inside;
overflow:hidden;
list-style-image:url(img/demo_hl01.png);
}

56. 画像置換した箇所を表示する
demo
/demo_printimage/demo.html

57. IE で改ページのときに切れてしまう
IE でうまく改ページされず、後続のコンテンツが切れてしまう
ことがある
大枠に position : absolute ; を指定することで解決できる。
ただし、行内で改ページしてしまうなどといった具合に通常の
改ページのフローを無視するようになる。

58. IE で改ページのときに切れてしまう

59. IE で改ページのときに切れてしまう
list-style-imageを使えばWebブラウザーにも対応可能
@media print{
#container{
/position : absolute;
}
}
/potision のように、『/』から始めるプロパティは IE 6, 7 用の
CSS ハック

60. IE で改ページのときに切れてしまう
demo
/site2/print_test_ie2/demo.html

61. Fx 2 ,3で改ページのときに切れてしまう
大きな隙間が空いてしまったり、
改ページ後切れてしまう
overflow : hidden | auto が指定されている要素が原因
1. overflow : hidden | auto内では
改ページを避けようとする
2. 収まらなかったら次のページに表示
3. 次のページ内ではみ出したら
それ以降は表示されない

62. Fx 2 ,3で改ページのときに切れてしまう
demo
/site2/print_test_fx/demo.html

63. Fx 2 ,3で改ページのときに切れてしまう
overflow : hidden ; の使用を避ける
clearfix などで overflow : hidden ; を使う場合には
注意が必要

64. 機能しなくなったリンク箇所の補助
CSS をつかって a 要素の href 属性 (リンク先の URL) を表示
する方法もある
@media print{
a[href]:after { content: attr(href); }
}

65. 機能しなくなったリンク箇所の補助
demo

66. まとめ

67. 紙を意識すれば
今まで身につけたCSSのスキルを
そのまま使えます

68. まとめ
紙という媒体を意識する
ページの幅、高さは有限
改ページがある
Staticなメディア
印刷時のアプローチには2種類ある
画面の表示と同じように出力
印刷専用レイアウトで出力
クライアントとよく相談しましょう