はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
印刷用CSS：その他もろもろテク紹介
2009/02/16
- トモ・リーン
-
残りの印刷テクについて語ります！
- ケンジ
-
印刷編、感動の最終回だね。
- トモ・リーン
-
うふ！残りのテクは・・・。
ページ分割についてね。
これは全てのブラウザ（モダンブラウザ、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化がいいわ。
- ケンジ
-
- トモ・リーン
-
おほほほほ！
そのようなメリットよりも印刷対応は過酷だと、遠回しに伝えてみました。
ストレートに「印刷対応は過酷なので覚えなくていいです」言ってもポカーンってしちゃうだろうし、印刷希望のクライアントのかたへも、過酷な理由を知っている方が説明しやすいでしょ！
- ケンジ
-
・・・・・・。
モニターの前のみんなも、印刷はナメてかかると危険だから気をつけようね！！
そして過酷だと言う、真実を知りながらも立ち向かわなければならない、皆さん。
がんばってね！！
- 今回のポイント！
- 印刷対応はメリットと時間のあるときにしましょう。
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：印刷用CSS：その他もろもろテク紹介
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/124
- コメント(1)
-
- トモ・リーン
「SEO対策のため、ページ内容（コンテンツ部分）がページ上部に出るための組み方」「改ページのスタイルの入れ方、一例」の図が一部間違っていたので直しました。
- 2009/02/16
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
