• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Swapskills Print Css
 

Swapskills Print Css

on

  • 11,572 views

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

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

Statistics

Views

Total Views
11,572
Views on SlideShare
11,520
Embed Views
52

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 52

http://www.slideshare.net 21
http://swapskills.info 19
http://s.deeeki.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Swapskills Print Css Swapskills Print Css Presentation Transcript

    • print メディア向け CSS 設計 2008年12月20日 小山田晃浩
    • 自己紹介 名前            : 小山田 晃浩 やってること : HTMLコーダー (株式会社メタフェイズ) 自信のWeblogで情報発信 www.yomotsu.net たまに雑誌の記事を執筆 web creators
    • 印刷にはどうに対応していますか? 特に対応しない PDFを自動で生成するAPIを使う http://capture.heartrails.com/help/make_pdf JavaScriptで対応しているケース http://www.nytimes.com/ http://www.mitsui.co.jp/index.html CSSをメディア別に用意して対応するケース http:// http://
    • CSSで印刷に対応する しっかり構造化された (X)HTML なら 印刷用に別ページを用意する必要がない プリントメディア型のCSSを用意するだけで対応できる
    • CSSで印刷に対応する
    • プリントメディア型 印刷したときや、印刷プレビューの画面に 適用されるメディア型 メディア型 ページ付けしたメディア
    • プリントメディア型の特徴 ページという概念がある!!
    • プリントメディア型の特徴 ページボックスの概念 (screen でいうと Web ブラウザーの外枠) 高さ、横幅が有限 (多くの場合A4サイズ) (Web ブラウザーの場合は無限にスクロールできる) 改ページ (Web ブラウザーの場合はスクロールがあるので改ページはない) スクロールできない (overflow : scroll; や iframe などに気をつける) static なメディア : JavaScriptやFlashは動かない
    • ページボックスの特徴 横幅は有限なので領域を有効に使う必要がある
    • 改ページ位置の特徴 ボックス間の上下マージンで改ページできる (通常フロー) 行と行の間で改ページできる (通常フロー) 絶対配置されるボックスの中では, 改ページはできない 境界のあるブロックの中での改ページを避けようとする 表内部の改ページを避けようとする 浮動要素の中の改ページを避けようとする
    • 媒体が違う(紙)ので プリント時の表示と  Web ブラウザーでの表示は違う
    • CSS を読み込ませる方法いろいろ 特定のメディア型向けのCSSを読み込ませる方法は いくつかある
    • 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;>
    • @import ルール @import url(quot;screen.cssquot;) projection, tv, screen; @import url(quot;print.cssquot;) print;
    • @media ルール @media print { body { font: 10pt serif } }
    • スマートな読み込ませ方 @media ルールを利用する!!  @media ルールは IE 6 でも対応している。
    • スマートな読み込ませ方
    • スマートな読み込ませ方 demo demo_media_rule
    • プリント用に用意されているCSS ページドなメディア用にいくつかのCSSが用意されている ただし現状は微妙
    • ページボックス プリントメディアではページボックスを使うことになっている
    • @page ルール size (ページ領域), margin (ページ余白),  marks (トンボの指定) を行う @page { size: auto; margin: 10%; marks: crop cross; }
    • @page ルール @page pageid : 名前をつけて参照できる @page :right : 見開き右のページ @page :left : 見開き左のページ @page :first : 最初のページ
    • @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } @page :first { margin-top: 10cm; } [Picture Caption]
    • 改ページ関連 page-break-before 値 : auto | always | avoid | left | right | inherit 対象の要素の前での改ページ制御 page-break-after 値 : auto | always | avoid | left | right | inherit 対象の要素の後ろでの改ページ制御 page-break-inside 値 : avoid | auto | inherit 対象の要素の中での改ページ制御
    • 改ページ関連 orphans 値 : <integer> | inherit ページの下部に残さなければならない段落の最小行 widows 値 : <integer> | inherit ページの上部に残さなければならない段落の最小行数
    • 現状では Web ブラウザー側の 実装がまちまちで 利用する機会がない!!
    • 今できること Web ブラウザーの印刷の仕様やクセを活用する
    • 今できること 領域が限られているので特に横幅に気をつける 多くの場合、背景が出力されない ため、 表現を背景に依存しすぎない ナビゲーションやリンク箇所は機能しなく なり、 リンク先は不明になる 崩れやすいので小技を使う
    • 印刷時の出力結果の選択 ディスプレイでの表示と同じように出力する プリントメディア専用のレイアウトに変えて出力する メリット/デメリットを説明し、 事前にクライアントに確認 をする
    • ディスプレイと同じ表示での出力 クライアントやユーザーは、 印刷時に画面に表示されたものが そのまま紙に出力されることを期待する人が多い 横幅が広い場合には縮小しなければいけない ディスプレイと同じように表示するのは至難の業 背景は出力されない環境が多い
    • 印刷専用のレイアウトで出力 ディスプレイと同じように表示しづらいときの言い訳になる サイドバーなどを消すことで横幅を有効に使える
    • 事前にクライアントに確認をする クライアント : 画面の表示そのまま。印刷対応というからには横幅も何と かしておさまってくれるんだろう 制作側 : 横幅を有効活用するためにサイドバーは非表示。背景は 表示されないが必要な情報は失わない 「印刷に対応します」と作った Web サイトで、 クライアントとの認識の違いが起こる可能性がある 事前に出力のされ方や利点を説明しておくことが大切
    • 事前にクライアントに確認をする 画面と同じように出力  画面に表示されたものが そのまま紙に出力されることを期待する人が多い 印刷時専用レイアウトで出力 横幅を有効活用するためにサイドバーを消す 印刷するユーザーにとっては必要な 情報さえあればよく、余分な装飾は不必要 デフォルトで背景が表示されないのは仕様
    • 実践!! 画面と同じように出力しよう編 印刷専用レイアウトで出力しよう編 印刷時のためのテクニック共通編
    • 画面と同じように出力しよう編
    • 横幅が広いためおさまらない! IE 6 にはフィット/拡大縮小 機能が無いのではみ出て切れて しまう それならば、縮小させればいい IE には zoom プロパティがあるのでこれを利用する
    • 横幅が広いためおさまらない! IE6で印刷時に縮小させる方法 @media print{ * html body{ zoom : 0.7 ; } } 「* html」 は IE 6 用にするための CSS ハック 
    • 横幅が広いためおさまらない! demo site1/print_test_ie/demo.html
    • 印刷専用レイアウトで出力しよう編
    • 不必要な要素を消す ナビゲーションは意味を持たなくなる サイドバーは不必要な場合が多い フッターの情報はコピーライト以外はいらないケースが多 い
    • 不必要な要素を消す
    • 不必要な要素を消す @media print{ #navigation, #sidebar, #footer ul { display : none; } }
    • 不必要な要素を消す demo /site2/print_test_ie/demo.html
    • 印刷時のためのテクニック共通編
    • 背景に依存しすぎない 多くの場合、背景が出力されない。
    • 背景に依存しすぎない 重要な情報を持つ画像は背景にはしない 見出し、キービジュアル、挿絵など http://www.w3.org/TR/WCAG20-TECHS/F3.html
    • 画像置換した部分が表示できない CSSの画像置換は背景 なので表示できない 背景は 表示されない。背景以外 は表示される。 つまり背景以外で画像置換を行えばよい
    • 画像を表示できる CSS プロパティー E:before, E:after + content で表示する画像 p:before{ content : url(img/ico.gif); }
    • 画像を表示できる CSS プロパティー list-style-image で表示する画像 p{ display:list-item; list-style-image:url(img/ico.gif); }
    • 画像を表示できる CSS プロパティー AlphaImageLoader (IE only) で表示する画像 p{ filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(sizingMethod=scale,src='ico. png'); zoom:1; }
    • 画像置換した箇所を表示する list-style-imageを使えばWebブラウザーにも対応可能
    • 画像置換した箇所を表示する 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); }
    • 画像置換した箇所を表示する demo /demo_printimage/demo.html
    • IE で改ページのときに切れてしまう IE でうまく改ページされず、後続のコンテンツが切れてしまう ことがある 大枠に position : absolute ; を指定することで解決できる。 ただし、行内で改ページしてしまうなどといった具合に通常の 改ページのフローを無視するようになる。
    • IE で改ページのときに切れてしまう
    • IE で改ページのときに切れてしまう list-style-imageを使えばWebブラウザーにも対応可能 @media print{ #container{ /position : absolute; } } /potision のように、『/』から始めるプロパティは IE 6, 7 用の CSS ハック 
    • IE で改ページのときに切れてしまう demo /site2/print_test_ie2/demo.html
    • Fx 2 ,3で改ページのときに切れてしまう 大きな隙間が空いてしまったり、 改ページ後切れてしまう overflow : hidden | auto が指定されている要素が原因 1. overflow : hidden | auto内では 改ページを避けようとする 2. 収まらなかったら次のページに表示 3. 次のページ内ではみ出したら それ以降は表示されない
    • Fx 2 ,3で改ページのときに切れてしまう demo /site2/print_test_fx/demo.html
    • Fx 2 ,3で改ページのときに切れてしまう overflow : hidden ; の使用を避ける clearfix などで overflow : hidden ; を使う場合には 注意が必要
    • 機能しなくなったリンク箇所の補助 CSS をつかって a 要素の href 属性 (リンク先の URL) を表示 する方法もある @media print{ a[href]:after { content: attr(href); } }
    • 機能しなくなったリンク箇所の補助 demo
    • まとめ
    • 紙を意識すれば 今まで身につけたCSSのスキルを そのまま使えます
    • まとめ 紙という媒体を意識する ページの幅、高さは有限 改ページがある Staticなメディア 印刷時のアプローチには2種類ある 画面の表示と同じように出力 印刷専用レイアウトで出力 クライアントとよく相談しましょう