印刷用CSS：その他もろもろテク紹介
- トモ・リーン
-
残りの印刷テクについて語ります！
- ケンジ
-
印刷編、感動の最終回だね。
- トモ・リーン
-
うふ！残りのテクは・・・。
ページ分割についてね。
これは全てのブラウザ（モダンブラウザ、IE6・IE7）で使えるのよ。
page-break-before
直前の改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-before:auto;
}
page-break-beforeの値
- auto
- 制御しない （初期値）
- always
- 直前で改ページさせる
- avoid
- 直前の改ページを禁止する
上記のページを印刷プレビューで確認してみてください。
page-break-after
直後の改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-after:auto;
}
page-break-afterの値
- auto
- 制御しない （初期値）
- always
- 直後で改ページさせる
- avoid
- 直後の改ページを禁止する
上記のページを印刷プレビューで確認してみてください。
page-break-inside
要素内での改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-inside:auto;
}
page-break-insideの値
- auto
- 制御しない （初期値）
- avoid
- 要素内で改ページを禁止する
上記のページを印刷プレビューで確認してみてください。
- ケンジ
-
ふむふむ！いいねコレ！！
- トモ・リーン
-
ところが・・・
- ケンジ
-
え？？このパターン・・・。
もしかして使えないテクなの？？
- トモ・リーン
-
ぶっちゃけると、そうね。
使えるシーンが限られるのよ。
使いやすい例としては「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」の時とかね。
- ケンジ
-
んーーーー。
他の時が使いにくい理由って何？？
- トモ・リーン
-
下のサンプルの図を見て。
よくSEO対策などで有効と言われている組み方よ。
- SEO対策のため、ページ内容（コンテンツ部分）がページ上部に出るための組み方
- トモ・リーン
-
この場合、こんな風に改ページの設定がされたスタイルを入れていくわよね。
- 改ページのスタイルの入れ方、一例
- ケンジ
-
ふむふむ！(SEOとか持ち出すなよ〜)
- トモ・リーン
-
問題は改ページの設定の部分より後に、ソース上ではメニューが来ているけど、スクリーン上の見栄えはメニューが前に来ていることとかが影響して、実際にはキチンと改ページが期待した通りにならないことが多いのよ。
- ケンジ
-
ってゆーことは、1カラムのデザインの時にはうまいこと行くけど、カラムが増えた時は、ケースバイケースなんだね。
- 改ページのスタイルが使いやすいレイアウト
- トモ・リーン
-
メニューカラムとコンテンツカラムの情報量のバランスで同じCSSを使っていたとしても、制御できないことがあるから、あるページではうまいこと改ページが出来ても、別のページではコンテンツの量によって調整する必要が出てくるわ。
- ケンジ
-
・・・・・・。
改ページのテクの存在は噂では聞いていたけど、使いどころが限られるね。
- トモ・リーン
-
もっと言うと、印刷系のテクニックはあまりオススメ出来ない物ばかりね。
「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」のような、スクリーンと印刷の見た目がガラッと変わってしまうのは、普通の人はビックリすると思うのよ。
- ケンジ
-
う〜〜む、業界人には受けそうだけど、事情を知らない人はパソコンがおかしいとか思うかもね〜〜！
- トモ・リーン
-
あと、最後に紹介したパターンの「file34. 印刷用CSS：スクリーンと全く同じように印刷する」も非常に手間がかかる割に、そのページを印刷する人ってどのぐらい居るかしらね、ってことね。
さらに改ページ問題から、完璧に印刷表示を制御するのはコンテンツの量も制御しないとダメだから本当に大変よ。
SEO対策をしたいなら、なおさらオススメ出来ないわね。
- ケンジ
-
つまり、トモ・リーンは印刷やめちゃいな！って思ってるんだね。
- トモ・リーン
-
そうなのよ・・・。
「印刷CSS対応ページはクーポン券ページだけ」とか印刷が必須のページのみに限定した方がいいわね。
どうしても完璧に印刷制御したい場合は、IllustratorでそのページをレイアウトしてPDF化がいいわ。
- ケンジ
-
- トモ・リーン
-
おほほほほ！
そのようなメリットよりも印刷対応は過酷だと、遠回しに伝えてみました。
ストレートに「印刷対応は過酷なので覚えなくていいです」言ってもポカーンってしちゃうだろうし、印刷希望のクライアントのかたへも、過酷な理由を知っている方が説明しやすいでしょ！
- ケンジ
-
・・・・・・。
モニターの前のみんなも、印刷はナメてかかると危険だから気をつけようね！！
そして過酷だと言う、真実を知りながらも立ち向かわなければならない、皆さん。
がんばってね！！
- 今回のポイント！
- 印刷対応はメリットと時間のあるときにしましょう。
- コメント(1)
-
- トモ・リーン
「SEO対策のため、ページ内容（コンテンツ部分）がページ上部に出るための組み方」「改ページのスタイルの入れ方、一例」の図が一部間違っていたので直しました。
- 2009/02/16