Swapskills Print Css

  • 8,572 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,572
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 ブラウザーでの表示は違う
  • 12. CSS を読み込ませる方法いろいろ 特定のメディア型向けのCSSを読み込ませる方法は いくつかある
  • 13. 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;>
  • 14. @import ルール @import url(quot;screen.cssquot;) projection, tv, screen; @import url(quot;print.cssquot;) print;
  • 15. @media ルール @media print { body { font: 10pt serif } }
  • 16. スマートな読み込ませ方 @media ルールを利用する!!  @media ルールは IE 6 でも対応している。
  • 17. スマートな読み込ませ方
  • 18. スマートな読み込ませ方 demo demo_media_rule
  • 19. プリント用に用意されているCSS ページドなメディア用にいくつかのCSSが用意されている ただし現状は微妙
  • 20. ページボックス プリントメディアではページボックスを使うことになっている
  • 21. @page ルール size (ページ領域), margin (ページ余白),  marks (トンボの指定) を行う @page { size: auto; margin: 10%; marks: crop cross; }
  • 22. @page ルール @page pageid : 名前をつけて参照できる @page :right : 見開き右のページ @page :left : 見開き左のページ @page :first : 最初のページ
  • 23. @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } @page :first { margin-top: 10cm; } [Picture Caption]
  • 24. 改ページ関連 page-break-before 値 : auto | always | avoid | left | right | inherit 対象の要素の前での改ページ制御 page-break-after 値 : auto | always | avoid | left | right | inherit 対象の要素の後ろでの改ページ制御 page-break-inside 値 : avoid | auto | inherit 対象の要素の中での改ページ制御
  • 25. 改ページ関連 orphans 値 : <integer> | inherit ページの下部に残さなければならない段落の最小行 widows 値 : <integer> | inherit ページの上部に残さなければならない段落の最小行数
  • 26. 現状では Web ブラウザー側の 実装がまちまちで 利用する機会がない!!
  • 27. 今できること Web ブラウザーの印刷の仕様やクセを活用する
  • 28. 今できること 領域が限られているので特に横幅に気をつける 多くの場合、背景が出力されない ため、 表現を背景に依存しすぎない ナビゲーションやリンク箇所は機能しなく なり、 リンク先は不明になる 崩れやすいので小技を使う
  • 29. 印刷時の出力結果の選択 ディスプレイでの表示と同じように出力する プリントメディア専用のレイアウトに変えて出力する メリット/デメリットを説明し、 事前にクライアントに確認 をする
  • 30. ディスプレイと同じ表示での出力 クライアントやユーザーは、 印刷時に画面に表示されたものが そのまま紙に出力されることを期待する人が多い 横幅が広い場合には縮小しなければいけない ディスプレイと同じように表示するのは至難の業 背景は出力されない環境が多い
  • 31. 印刷専用のレイアウトで出力 ディスプレイと同じように表示しづらいときの言い訳になる サイドバーなどを消すことで横幅を有効に使える
  • 32. 事前にクライアントに確認をする クライアント : 画面の表示そのまま。印刷対応というからには横幅も何と かしておさまってくれるんだろう 制作側 : 横幅を有効活用するためにサイドバーは非表示。背景は 表示されないが必要な情報は失わない 「印刷に対応します」と作った Web サイトで、 クライアントとの認識の違いが起こる可能性がある 事前に出力のされ方や利点を説明しておくことが大切
  • 33. 事前にクライアントに確認をする 画面と同じように出力  画面に表示されたものが そのまま紙に出力されることを期待する人が多い 印刷時専用レイアウトで出力 横幅を有効活用するためにサイドバーを消す 印刷するユーザーにとっては必要な 情報さえあればよく、余分な装飾は不必要 デフォルトで背景が表示されないのは仕様
  • 34. 実践!! 画面と同じように出力しよう編 印刷専用レイアウトで出力しよう編 印刷時のためのテクニック共通編
  • 35. 画面と同じように出力しよう編
  • 36. 横幅が広いためおさまらない! IE 6 にはフィット/拡大縮小 機能が無いのではみ出て切れて しまう それならば、縮小させればいい IE には zoom プロパティがあるのでこれを利用する
  • 37. 横幅が広いためおさまらない! IE6で印刷時に縮小させる方法 @media print{ * html body{ zoom : 0.7 ; } } 「* html」 は IE 6 用にするための CSS ハック 
  • 38. 横幅が広いためおさまらない! demo site1/print_test_ie/demo.html
  • 39. 印刷専用レイアウトで出力しよう編
  • 40. 不必要な要素を消す ナビゲーションは意味を持たなくなる サイドバーは不必要な場合が多い フッターの情報はコピーライト以外はいらないケースが多 い
  • 41. 不必要な要素を消す
  • 42. 不必要な要素を消す @media print{ #navigation, #sidebar, #footer ul { display : none; } }
  • 43. 不必要な要素を消す demo /site2/print_test_ie/demo.html
  • 44. 印刷時のためのテクニック共通編
  • 45. 背景に依存しすぎない 多くの場合、背景が出力されない。
  • 46. 背景に依存しすぎない 重要な情報を持つ画像は背景にはしない 見出し、キービジュアル、挿絵など http://www.w3.org/TR/WCAG20-TECHS/F3.html
  • 47. 画像置換した部分が表示できない CSSの画像置換は背景 なので表示できない 背景は 表示されない。背景以外 は表示される。 つまり背景以外で画像置換を行えばよい
  • 48. 画像を表示できる CSS プロパティー E:before, E:after + content で表示する画像 p:before{ content : url(img/ico.gif); }
  • 49. 画像を表示できる CSS プロパティー list-style-image で表示する画像 p{ display:list-item; list-style-image:url(img/ico.gif); }
  • 50. 画像を表示できる CSS プロパティー AlphaImageLoader (IE only) で表示する画像 p{ filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(sizingMethod=scale,src='ico. png'); zoom:1; }
  • 51. 画像置換した箇所を表示する list-style-imageを使えばWebブラウザーにも対応可能
  • 52. 画像置換した箇所を表示する 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); }
  • 53. 画像置換した箇所を表示する demo /demo_printimage/demo.html
  • 54. IE で改ページのときに切れてしまう IE でうまく改ページされず、後続のコンテンツが切れてしまう ことがある 大枠に position : absolute ; を指定することで解決できる。 ただし、行内で改ページしてしまうなどといった具合に通常の 改ページのフローを無視するようになる。
  • 55. IE で改ページのときに切れてしまう
  • 56. IE で改ページのときに切れてしまう list-style-imageを使えばWebブラウザーにも対応可能 @media print{ #container{ /position : absolute; } } /potision のように、『/』から始めるプロパティは IE 6, 7 用の CSS ハック 
  • 57. IE で改ページのときに切れてしまう demo /site2/print_test_ie2/demo.html
  • 58. Fx 2 ,3で改ページのときに切れてしまう 大きな隙間が空いてしまったり、 改ページ後切れてしまう overflow : hidden | auto が指定されている要素が原因 1. overflow : hidden | auto内では 改ページを避けようとする 2. 収まらなかったら次のページに表示 3. 次のページ内ではみ出したら それ以降は表示されない
  • 59. Fx 2 ,3で改ページのときに切れてしまう demo /site2/print_test_fx/demo.html
  • 60. Fx 2 ,3で改ページのときに切れてしまう overflow : hidden ; の使用を避ける clearfix などで overflow : hidden ; を使う場合には 注意が必要
  • 61. 機能しなくなったリンク箇所の補助 CSS をつかって a 要素の href 属性 (リンク先の URL) を表示 する方法もある @media print{ a[href]:after { content: attr(href); } }
  • 62. 機能しなくなったリンク箇所の補助 demo
  • 63. まとめ
  • 64. 紙を意識すれば 今まで身につけたCSSのスキルを そのまま使えます
  • 65. まとめ 紙という媒体を意識する ページの幅、高さは有限 改ページがある Staticなメディア 印刷時のアプローチには2種類ある 画面の表示と同じように出力 印刷専用レイアウトで出力 クライアントとよく相談しましょう