螺旋デザイン｜はじめてのCSS　印刷用CSS：印刷用に全く違うレイアウトを作る

はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

印刷用CSS：印刷用に全く違うレイアウトを作る

2009/02/02

トモ・リーン: 今回は印刷用に全く違うレイアウトを作る方法の紹介です！
配置を変更して、印刷範囲が649pxが限界のIE6でも全ての情報が見えるようにします。

図解：印刷用に全く違うレイアウトを作る概念図

ケンジ: ・・・・・・。
劇的に見え方が変わるし、超キモイテクとか炸裂しそうだよね。

トモ・リーン: そんなにキモくは無いわよ。

ケンジ: え〜〜〜〜。
すごいハイテク感があるんだけどな〜！

トモ・リーン: 印刷用のCSSに配置を新しく指定すると大丈夫よ。

実際のHTML 全メディア用CSS 印刷用CSS

ケンジ: プリントプレビューすると、まじで配置変わってるよ・・・。

トモ・リーン: 今回のツボのご紹介です。

ページ全体共通

背景画像はデフォルト設定で印刷されないので、画像置換は使わない。
透過PNGの使用も画像置換の一種なので使えない。
参考：file22. デザイン通りに組む！　～透過PNG～

ヘッダ＆メニュー部分

サイズが変更されるので、変更時のデザインをどうするか考えておくこと。

コンテンツ部分

IE6での印刷幅の限界サイズである、「649px」以内にしておくこと。

作業の順番

上記のことに気をつけながら、組む。
通常のスタイルシートの次に印刷用CSSをリンクする。
※後に書いた方のCSSが優先されるため。
印刷用にレイアウトを再調整する。

ケンジ: ってゆーか、トモ・リーン。
これメンドくさいよね？

トモ・リーン: よく気づいたわね・・・・・・。
簡単そうだけど、ヘッダやメニュー部分に実際に内容がある場合は面倒なのよ。

ケンジ: う〜む。
これはメニューが縦から横にレイアウトが変わるから、デザインもよく考えてしないとダメだね。

トモ・リーン: そうね〜！！

今回のポイント！: ヘッダやメニュー部分はもう一度、組み直す気持ちで印刷用のCSSを作りましょう。
メニュー部分は特にHTMLを組むときもCSSによって縦にも横にも制御できるように、考えながら組みましょう。

次の記事を見る

前の記事を見る

トラックバック(0): このブログ記事を参照しているブログ一覧：印刷用CSS：印刷用に全く違うレイアウトを作る

このブログ記事に対するトラックバックURL: http://www.rasen-d.net/z/mt/mt-tb.cgi/122

コメントする

オススメ本: 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
色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

Amazon.co.jp ウィジェット