はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
印刷用CSS：ナビゲーション削除タイプ
2009/01/26
- トモ・リーン
- こんばんみ〜！
今回は印刷時にナビゲーションを削除してIE6でも印刷出来るものを作ってみたいと思います。
- ケンジ
- ・・・・・・。
劇的に見え方が変わるし、超キモイテクとか炸裂しそうだよね。
- トモ・リーン
- それが全然簡単なんです。
- ケンジ
- えええ〜〜〜。
- トモ・リーン
- ポイントは印刷時に消したい要素に、印刷用CSSに表示を消すように書くのよ。
/* media="print" メディア指定をした印刷用CSSに以下の記述をする */これだけです。
消したい要素 {
display: none;
}
- ケンジ
- まじで消えてるよ。
あまりにも簡単すぎて拍子抜けたよ。
- トモ・リーン
- これは印刷対応でも簡単な方だけど、条件があるわ。
コンテンツの部分がIE6での印刷幅の限界サイズである、「649px」以内にしておくこと。
他にもツボがあるわよ。
ナビゲーション部分
- ナビゲーション部分は表示を消すので、好きなように組める。（画像置換もOK）
コンテンツ部分
- IE6での印刷幅の限界サイズである、「649px」以内にしておくこと。
- 背景画像はデフォルト設定で印刷されないので、画像置換は使わない。
- 透過PNGの使用も画像置換の一種なので使えない。
参考：ile22. デザイン通りに組む！ ～透過PNG～
作業の順番
- 上記のことに気をつけながら、組む。
- 通常のスタイルシートの次に印刷用CSSをリンクする。
※後に書いた方のCSSが優先されるため。 - 不要な部分をdisplay: none;する。
- 見せたい部分の親要素で見せたい部分より大きいサイズを指定している部分は、サイズ調整をする。
例）width: auto;または649pxにするなど。
- ケンジ
- 作業自体は単純だけど、色々気を使わないといけないんだね！
- トモ・リーン
- 実はデザインにも気をつけるべき箇所があるのよ。
- ケンジ
- あっ！わかるよ！！
ネコサイトみたいに、透過PNG（巨大ネコ画像部分）＋ナビゲーションにコンテンツ部分がはみ出しているデザインは、ナビゲーション削除タイプにあわないね。
- ナビゲーション削除タイプに合わないデザイン例
- ナビゲーション削除タイプに合わない理由
- トモ・リーン
- 逆にナビゲーション部分のあしらいの一部がコンテンツにかかる場合、そこは印刷に出さなくても良かったら、透過PNGも使えるわよ。
- ナビゲーション削除タイプでもOKなデザイン
- ナビゲーション削除タイプでもOKな理由
- ケンジ
- う〜〜〜む、デザインの時から印刷対応を考えないとダメなんだね・・・。
- トモ・リーン
- そうなのよ。
いいこと言うわね！
- トモ・リーン
- あと、DWではver8からメディア別でデザインビューの表示を変えられるから、そこを利用してコーディングをするのもいいわよ。
- 上部のメニューの 表示＞スタイルレンダリング＞プリントメディアタイプ でアクセス！
- ケンジ
- 最終的にはブラウザで表示して、印刷プレビューでチェックだね！
- トモ・リーン
- うん！
- 今回のポイント！
- ナビゲーション削除は比較的簡単にできますが、次の点に注意しましょう！
- 残したいコンテンツ部分の幅を649px以内にする
- コンテンツ部分のみの表示にしても不自然じゃないようにデザインをする
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：印刷用CSS：ナビゲーション削除タイプ
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/121
- コメントする
- やさしい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色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
