はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
印刷用CSS：webページの横幅について
2009/01/12
- トモ・リーン
- こんにちは〜！
今回は webページの横幅のサイズが、IE6で派手にズレまくる理由に関わる理由を解説するわよ。
- ケンジ
- うぃ〜っす！！
- トモ・リーン
- 前の回で出した表だけど、IE6以外はキレイに出ているわよね。
見え方の違いリスト：クリックで拡大します。
- 「A4印刷」とはA4サイズの紙に印刷する設定
- 「背景あり・なし」とは印刷設定で背景画像の表示の切り替えのこと
| モニター | A4：印刷 背景あり | A4：印刷 背景なし | |
|---|---|---|---|
| IE6 |  |
 |
 |
| IE7 |  |
 |
 |
| Firefox3 win版 |
 |
 |
 |
| safari3 mac版 |
 |
 |
 |
- ケンジ
- うん。
- トモ・リーン
- 実はIE6以外の他のブラウザ(Firefox,safari,IE7)は指定した紙のサイズに合わせてwebページのサイズを変更出来るのだけど、
- ケンジ
- IE6では出来ないんだね・・・
薄々そんな気はしてたんだ。
- トモ・リーン
- ・・・・・・。
ええ。
- ケンジ
- あっ、でもIE6の印刷プレビューのここ（下の図参照）！！
これで調整できるんじゃね？？
- IE6の疑惑のプルダウン
- トモ・リーン
- 実はそれは紙に対してのサイズじゃなくてモニターでの表示サイズなのよ！！
他のブラウザは紙に対して調整なんだけど。
- トモ・リーン
- 横幅が800pxの画像で印刷プレビューでの挙動を実験してみたので見てみてね。
- IE6：100%表示 画像は切れています。
- IE6：50%表示 画像は切れています。表示も小さくなっています。
- Firefox3：100%表示 画像は切れています。
- Firefox3：50%表示 画像はページ内に収まっています。
- Firefox3：用紙に合わせて縮小表示 画像はいい感じに収まっています。
- ケンジ
- なんじゃこりゃああああ！！！
- トモ・リーン
- また、悲しい現実を目の当たりにしてしまったわね。
でも出来る限りの抵抗はしたいわ！
それが人ってものよ！！
- ケンジ
- ってゆーか、トモ・リーンは妖精でしょ？
- トモ・リーン
- ・・・・・・。
まっ、対抗策はあるのよ。
- ケンジ
- とっとと説明してよ。
- トモ・リーン
- (くっ・・・)まずIE6でキレイに印刷できるギリギリのサイズがあるのよ。
それが横幅649pxね。
- ケンジ
- でも、今のサイトってそんなに狭いサイズのサイト無いよね？
印刷対応のサイトは狭い横幅にするしかないのかな？？？
- トモ・リーン
- はい、実は色々な手法で広い横幅でIE6でも印刷出来るように作ることが出来ます！！
- ケンジ
- やっぱりい〜〜！
- トモ・リーン
- その手法は次回説明するわよ。
- ケンジ
- やっと、実践ネタになりそうだね。
楽しみだよっ！！
- 今回のポイント！
- IE6側では印刷したいページの縮小ができないので気をつけましょう。
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：印刷用CSS：webページの横幅について
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/117
- コメントする
- やさしい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色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
