74ページから75ページの見開きです（泣）
う、うれしいい！！！

ピンクの縁取りがしているページなので写真のように、本を横から見るとすぐに発見できます。
是非書店でお買い上げの上、ご覧くださいね！

制作実績
http://www.rasen-d.net/works/

web creators 2010年 03月号
アマゾンのページへ

• デフォルトのPDF閲覧機能だと落ちる重いPDFも結構見られる
• 動画も見られる
• USBで直接コピーしたデータも見られる（別途iPhone Explorerが必要）

私はスキャンした本を見たりするのに使っています。
（iPhone情報整理術 の影響で・・・ぷ。）

最近2.3→2.4にバージョンアップしたのですが、英語のソフトなのでバージョンアップ履歴を見ても「？」となってしまいました（泣）
画面を見ながら英語を「Yahoo!翻訳」にかけて、さらに意訳してみたのが次の文章です。

重要な通知：新しいアプリケーションをインストール、または既存のものを更新した後に、我々はあなたのiPhone/iPodタッチ（電源を切ることで）を再起動することを、強くあなたに提案します。 多くのテクニカルサポート要請は、単に再起動することによって解消されました。

我々は、GoodReaderを改善することに絶えず取り組んでいます。我々の最新版の新着情報は、ここにあります：

バージョン2.4での更新

• ActionsメニューにZip/Unzip機能追加
• スワップジェスチャーによって絵を変えること
• あらがじめ設定されたサーバーに「box.net」を追加
• .ppsと.ppsxファイルの更なるサポート
• 多くのマイナーチェンジとバグフィックス

まず、自分が書いたところを見たのですが、最終のPDFよりさらに見やすくなっていたので、ギリギリまでDTPの人調整したんだな〜とうるっと来ました。
あと表紙にも螺旋デザイン担当記事のキャプチャーが結構載ってて、大はしゃぎしました。
それだけじゃなくって、「本書の使い方」にも螺旋デザインの記事を使って解説されていたので、さらに大はしゃぎしました。

納品するデータは次の通りです。

1. 原稿用のテキストデータ（拡張子も「.txt」のプレーンなテキストデータです）
2. 参照用の図
3. サンプルサイト

やっと「XHTML+CSS プロが教える"本当の使い方"」の仕事に繋がったときの話しをします。
それはとあるイベントの懇親会で、またまた"はじめてのCSS"のフライヤーを配りながら初めてお会いした方々に、螺旋デザインとしての営業的なトーク＋出版の夢の話しをしていたところ、とうとう出版社と橋渡しをしてくれる人が現れたのです！！

しつこく続けた甲斐があったZE☆

その方は東京から来られていて、普段はMdNさんのDTPの仕事や、実際に本を書いたこともある人でした。
"はじめてのCSS"のフライヤーを「MdNの編集さんに渡しておきます！」ってやさしいお言葉を言っていただいて、正直ジーンと来ました。

"はじめてのCSS"の宣伝活動内容

1. 名刺に"はじめてのCSS"を印刷
2. 制作者向けのイベントなどでフライヤーを配布（こんなのとか、こんなの）

まずはきっかけなのですが・・・。
もともと私はWebの仕事をしていまして、ライター業は行っていませんでした。
でも、業界の次のような実情から、本を書きたいな〜〜〜。と思うようになっていったのです。
・
・
・
Webの制作会社に勤務していたの時の経験と、いろんなイベントでお会いした方々の話を聞いていると、どうもCSSへの熟練度はものすごくスキルのある人と、重度の苦手意識のある人とに極端に分かれていると感じました。
しかし、会社員時代に他の同僚たちにCSSを教えているときに思ったのですが、苦手意識のあった人でもちょっと基本を教えてある程度覚えると、ある瞬間から自動でレベルアップして逆に私に新しいテクなどを教えてくれるようになったりしたのです。

いちばん大変なのがサチコさんのイラストですがね！

メインイメージの切り替わる画像の部分のイラストを描いてもらいました。
枚数多いし、イラストにしにくいコーナーもありましたが、がんばってくれました（泣）

業務日誌系のアイコンなどは私、佐藤とも子が作りました。

デザイン全体は２人で揉みながら決めました。

• 中がリキッドデザインなのにTOPが固定幅なので違和感が出ないようにする
• その為には下層ページとレイアウトが変わるが、馴染むようにする
• はじめてのCSSの更新は不定期になったので、メインのイメージを別のものにする
• はじめてのCSSのページが多くなったので検索窓を付ける
  下層ページにも追々設置予定
• お問い合わせと、制作実績へのリンクを目立たせる

コーディングもいろいろ何かやりましたが、図解しないと説明できないので省略します（笑）

螺旋デザインTOPページ
http://www.rasen-d.net/

イラストの部分に「イラスト＝螺旋デザイン・サチコ」とクレジットをいれていただいていますので、最近「螺旋デザイン・サチコ」で検索してこられる方が多く、「さすがasahi.com！」とブルブルしています。
いい仕事ができて良かったです。

制作実績
http://www.rasen-d.net/works/

サチコのイラストブログ
Design & illustration

制作実績
http://www.rasen-d.net/works/

XHTML+CSS プロが教える"本当の使い方"
アマゾンのページへ

PIXTA（写真素材販売サイト）に参加していますので、こちらの螺旋デザインメンバーのアカウントのほうの素材もよろしくお願いします。

また、撮影の依頼時に割引のお知らせも書いているのですが、ぶっちゃけると人物写真だとかなり割引になります。
写真素材になってもOKな方はどんどん、ご依頼くださいね！！

まずは、自分が写真素材になっても見苦しくないように、まじダイエットしてます・・・。

↓実際に配布したフライヤーです。クリックすると大きな絵が見れます。

前と同じ、絵コンテ：佐藤とも子　作画：サチコ　です。

ジャンプっぽい演出を取り入れて、半笑いを全力で誘うように作りました。
実は前の時に一コマだけリアル頭身にと、絵コンテで指示していたところがあったのですが、それを見たサチコさんに「新しいキャラデザせないかんの分かるやろ？ここはいつもの頭身にするから。」とキレられました。
今回は特に頭身指示してなかったのに、全部頭身がリアルタイプに伸びてたので笑けました！
内々の販促物なので、面白かったら何でもアリなんですね～。

さて突然ですが、はじめてのCSSフライヤープレゼントします。
刷り枚数単位と印刷屋さんのおまけ刷り等の関係で余ってるのです。
すごいハイクオリティなので、是非もっと色々な方々に手にとって見ていただきたいです！！（必死）

お問い合わせから以下の項目を、お知らせいただきますと先着数十名さま（適当・・・）にプレゼントいたします。
当選のお知らせは発送にて変えさせていただきます。

名前：発送に使用しますので、本名を入れてください
件名：はじめてのCSSフライヤー希望
本文：郵便番号、住所の記入をお願いします

このプレゼント応募で得た個人情報は当選の方への発送のみに使用し、発送後は破棄いたします。

応募受付が終了したときはこのエントリ内で、お知らせしますので、それまでどんどんご応募くださいね！

3人呼び込んだら、いったん止めてもう一度リッカに話しかけないと駄目みたいと、後の方に気づきました。
初めからキチンとしていたらもっと大入りだったかも・・・と思いました。

こんなキャラでしたよ。
装備、あの後変えたので微妙に違うかもですが・・・。

すれちがっていただいたみなさん、ありがとうございます！

ケンジ

おぅ、どこからでもかかって来い！だぜ☆

トモ・リーン

うふふ。
じゃー、さっそく抜き打ちテストよ！！

ケンジ

ええええええええ？？？

ケンジ

・・・・・・。
なんだか、なつかしいノリだったね。

トモ・リーン

いつもと趣向が違っておもしろかったでしょ？

今回のポイント！

セレクタの書き方は人によって様々です。
どのようなパターンでも理解できるようにしておきましょう。

ケンジ

実はもう二度と、会うことも無いかと思ってたけどね〜！

トモ・リーン

今回は、セレクタの付け方の基礎を解説します。

ケンジ

確かにこれは、慣れるまで俺も適当にしてたよ〜。

トモ・リーン

・・・・・・。

トモ・リーン

基本のセレクタの付け方は、こんな感じです。

ケンジ

ふむふむ、基本はオッケーだぜ！！

トモ・リーン

実際には応用の組み合わせで、もっと色々な書き方が出来るわよ。

ケンジ

ふむふむ、なんか分かったような気がするぜ・・・。

今回のポイント！

きちんとCSSを書いているのに、反映されない場合は、セレクタの付け方を再確認してみましょう。

ケンジ

ええっ！何っ！？
急だよ〜〜〜〜〜〜！！

トモ・リーン

変化は急に訪れるモノなの。
ケンジもここまで私のレッスンに付き合ったんだから、ある程度は自分で解決出来るようになっているはずよ。

ケンジ

う〜〜〜ん、そうかも！
俺はたぶん天才だし☆

トモ・リーン

そんなわけで、とりあえずはオシマイだけど今考えると「あそこ、超説明はしょったな〜」って思うところがあるのよね。
そのあたり不定期に更新していくので気が向いたら見に来て！
RSSを登録しておくとかも、いいかもよ。

ケンジ

皆さんがもっとやさしく＆細かく知りたいネタなどがありましたら、ここのコメントに書くか、螺旋デザインのお問い合わせから投稿してくれたら（トモ・リーンが）解説しちゃうかもしれませんYO！

今回のポイント！

さよならだけど、さよならじゃない！
不定期でがんばります〜！！

ケンジ

禁断ってドキドキする響きだね！！

トモ・リーン

CSSハックとは特殊な記述法でCSSを書くことによって、そのCSSを読めるブラウザを制限するテクニックです。
これで特定のブラウザでしか出ないレイアウトの乱れを直すことが出来ます。

ケンジ

それのどこが禁断なの？

トモ・リーン

CSSハックはとっても便利だけど多用すると、ゴチャゴチャしたソースになるから、どうしても調整できない最終手段として使ってください。
あと、CSSの仕様的に間違った書き方もあるのよ。

ケンジ

うむ、了解したぜ☆

トモ・リーン

ではInternetExplorer６から！
この書き方をでCSSを書くとInternetExplorer6しか参照しません。

ケンジ

書式を気にしなくてもいい場合は、アンダーバーのハックの方が気軽に使えていいね！

トモ・リーン

次はInternetExplorer７対応ね。
この書き方をでCSSを書くとInternetExplorer7しか参照しません。

ケンジ

なんだか気持ち悪いけど、バリデート系サイトでも減点されないんだね！

トモ・リーン

CSSハックじゃないけど実はIEってHTMLのコメントアウトと専用の条件式で、CSS・JavaScriptなどの外部ファイルの読み込みを細かく制御できるのよ。

トモ・リーン

他にも書き方があるんだけど、続きはものすごく細かく書いてある、BLOG × WORLD ENDINGさんのページをみてね！

ケンジ

この人、ものすごい研究してるよ〜〜〜！
IE系専用の記述が多い場合は、CSSハックよりも条件分岐の方がいいね。

トモ・リーン

残りの主なブラウザ用ハックはこんな感じね〜！

ケンジ

う〜〜〜ん。
すごい、不思議な書き方だね！！
始めに気がついた人はすごいよ。

トモ・リーン

CSSハックはブラウザのバグや未実装な部分などを、いい感じに突いたテクなのよ。
本当に裏技ね。
IEの６・7辺りは、もうガチだと思うけど、FirefoxやSafariなどはもしかしたらバージョンアップなどで使えなくなる可能性があるから、最小限の使用にした方がいいわ。

今回のポイント！

CSSハックは便利だけど使い過ぎないように気をつけましょう！

ケンジ

印刷編、感動の最終回だね。

トモ・リーン

うふ！残りのテクは・・・。

ページ分割についてね。
これは全てのブラウザ（モダンブラウザ、IE6・IE7）で使えるのよ。

page-break-before

直前の改ページを制御するCSSプロパティ。

/* 記入例 */
div {
page-break-before:auto;
}

page-break-beforeの値

auto

制御しない （初期値）

always

直前で改ページさせる

avoid

直前の改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

page-break-after

直後の改ページを制御するCSSプロパティ。

/* 記入例 */
div {
page-break-after:auto;
}

page-break-afterの値

auto

制御しない （初期値）

always

直後で改ページさせる

avoid

直後の改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

page-break-inside

要素内での改ページを制御するCSSプロパティ。

/* 記入例 */
div {
page-break-inside:auto;
}

page-break-insideの値

auto

制御しない （初期値）

avoid

要素内で改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

ケンジ

ふむふむ！いいねコレ！！

トモ・リーン

ところが・・・

ケンジ

え？？このパターン・・・。
もしかして使えないテクなの？？

トモ・リーン

ぶっちゃけると、そうね。
使えるシーンが限られるのよ。
使いやすい例としては「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」の時とかね。

ケンジ

んーーーー。
他の時が使いにくい理由って何？？

トモ・リーン

下のサンプルの図を見て。
よくSEO対策などで有効と言われている組み方よ。

SEO対策のため、ページ内容（コンテンツ部分）がページ上部に出るための組み方

トモ・リーン

この場合、こんな風に改ページの設定がされたスタイルを入れていくわよね。

改ページのスタイルの入れ方、一例

ケンジ

ふむふむ！(SEOとか持ち出すなよ〜)

トモ・リーン

問題は改ページの設定の部分より後に、ソース上ではメニューが来ているけど、スクリーン上の見栄えはメニューが前に来ていることとかが影響して、実際にはキチンと改ページが期待した通りにならないことが多いのよ。

ケンジ

ってゆーことは、1カラムのデザインの時にはうまいこと行くけど、カラムが増えた時は、ケースバイケースなんだね。

改ページのスタイルが使いやすいレイアウト

トモ・リーン

メニューカラムとコンテンツカラムの情報量のバランスで同じCSSを使っていたとしても、制御できないことがあるから、あるページではうまいこと改ページが出来ても、別のページではコンテンツの量によって調整する必要が出てくるわ。

ケンジ

・・・・・・。
改ページのテクの存在は噂では聞いていたけど、使いどころが限られるね。

トモ・リーン

もっと言うと、印刷系のテクニックはあまりオススメ出来ない物ばかりね。
「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」のような、スクリーンと印刷の見た目がガラッと変わってしまうのは、普通の人はビックリすると思うのよ。

ケンジ

う〜〜む、業界人には受けそうだけど、事情を知らない人はパソコンがおかしいとか思うかもね〜〜！

トモ・リーン

あと、最後に紹介したパターンの「file34. 印刷用CSS：スクリーンと全く同じように印刷する」も非常に手間がかかる割に、そのページを印刷する人ってどのぐらい居るかしらね、ってことね。
さらに改ページ問題から、完璧に印刷表示を制御するのはコンテンツの量も制御しないとダメだから本当に大変よ。
SEO対策をしたいなら、なおさらオススメ出来ないわね。

ケンジ

つまり、トモ・リーンは印刷やめちゃいな！って思ってるんだね。

トモ・リーン

そうなのよ・・・。
「印刷CSS対応ページはクーポン券ページだけ」とか印刷が必須のページのみに限定した方がいいわね。
どうしても完璧に印刷制御したい場合は、IllustratorでそのページをレイアウトしてPDF化がいいわ。

ケンジ

（Illustratorって極端な・・・。）
前の方では、更新時の情報ズレ問題とかでスクリーン用とプリント用ページを１つのHTMLにすることを言っていたのにね！

トモ・リーン

おほほほほ！
そのようなメリットよりも印刷対応は過酷だと、遠回しに伝えてみました。
ストレートに「印刷対応は過酷なので覚えなくていいです」言ってもポカーンってしちゃうだろうし、印刷希望のクライアントのかたへも、過酷な理由を知っている方が説明しやすいでしょ！

ケンジ

・・・・・・。
モニターの前のみんなも、印刷はナメてかかると危険だから気をつけようね！！
そして過酷だと言う、真実を知りながらも立ち向かわなければならない、皆さん。
がんばってね！！

今回のポイント！

印刷対応はメリットと時間のあるときにしましょう。

ケンジ

う〜〜ん、前のヘッダの所みたいなことを全体でするんだよね？

トモ・リーン

ちょっと違います。
画像を縮小させたり、全てのサイズの再計算とかしていたら死んでしまいます。
そこでIE専用プロパティzoomの出番です！！

ケンジ

おお〜〜！

トモ・リーン

これをページ全ての要素にかけます。
具体的に言うと、800pxの幅のサイトをIE6でもキッチリ印刷出来るサイズ（649px）に変更する場合は

---

* { zoom: 0.8; }

---

と書きます。

ケンジ

・・・・・・。
ってゆーか、「0.8」って数値はどっから来たの？

トモ・リーン

649(印刷での表示幅) ÷ 800(スクリーンでの表示幅) =0.811125

---

つまり、800に0.811125をかけたら649になるのだけど、数値が細か過ぎるから「0.8」にしたのよ。

ケンジ

ふ〜〜〜ん。
納得だぜ！

トモ・リーン

実際に組んでみるわよ。

トモ・リーン

こんなかんじになります。
印刷用CSSの「*」にzoom:0.8しただけだけど。

IE6でのスクリーン表示と印刷プレビューの比較　※クリックで拡大します。

IE7での印刷プレビューの比較　※クリックで拡大します。

ケンジ

ん？
真ん中のメニューとコンテンツの幅がヘッダ＆フッタのより狭いよね。
おかしくね？？

トモ・リーン

（バレたか）そこは気合いで微調整します。
あと、じつはIE7の用紙幅に合わせる設定のレンダリングも、まぁまぁ、いいかげんなのです。
印刷用CSSでzoom設定していない場合はこんな↓感じになってるわよ。

IE7での印刷プレビューの比較：印刷用CSS無し　※クリックで拡大します。

ケンジ

えええええ〜〜〜！！
印刷に関してはIE7のことは信じていたのに！！
ちっくしょおーーーーーー！！

トモ・リーン

こーいうのは根性で直します。

ケンジ

ってゆーか、トモ・リーン。
これメンドくさいよね？（数式とか出さないで根性とか言っちゃったし）

トモ・リーン

よく気づいたわね・・・・・・。
簡単そうだけど、実際に内容がある場合は面倒なのよ。
すべてのページで印刷時にズレがないか確認＋調整が必要なのよね。

デザイン上でもサイト全体を印刷するとしたら、どうしてもデザイン上、背景画像＋背景色を使うところが出てくると思うけど、白っぽいデザインにしておけば、それ程印刷時との違和感は出ないはずよ。

ケンジ

そっか〜。
やっぱり、背景処理無しでサイトを作るのも限界があるよね・・・。

トモ・リーン

他にもページ区切り問題とかあるのだけど、このあたりはまたコミ入ってくるので、また次回にします。

今回のポイント！

IE6の印刷設定はプリント用CSSにzoom指定で縮小しましょう！
IE7の用紙サイズに合わせて印刷内容を調整する機能は癖がありますので、不都合が出た場合は、手を入れましょう。

ケンジ

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

トモ・リーン

そんなにキモくは無いわよ。

ケンジ

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

トモ・リーン

印刷用のCSSに配置を新しく指定すると大丈夫よ。

ケンジ

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

トモ・リーン

今回のツボのご紹介です。

ケンジ

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

トモ・リーン

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

ケンジ

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

トモ・リーン

そうね〜！！

今回のポイント！

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

ケンジ

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

トモ・リーン

それが全然簡単なんです。

ケンジ

えええ〜〜〜。

トモ・リーン

ポイントは印刷時に消したい要素に、印刷用CSSに表示を消すように書くのよ。 /* media="print" メディア指定をした印刷用CSSに以下の記述をする */

消したい要素 {
display: none;
} これだけです。

ケンジ

まじで消えてるよ。
あまりにも簡単すぎて拍子抜けたよ。

トモ・リーン

これは印刷対応でも簡単な方だけど、条件があるわ。
コンテンツの部分がIE6での印刷幅の限界サイズである、「649px」以内にしておくこと。

他にもツボがあるわよ。

ケンジ

作業自体は単純だけど、色々気を使わないといけないんだね！

トモ・リーン

実はデザインにも気をつけるべき箇所があるのよ。

ケンジ

あっ！わかるよ！！
ネコサイトみたいに、透過PNG（巨大ネコ画像部分）＋ナビゲーションにコンテンツ部分がはみ出しているデザインは、ナビゲーション削除タイプにあわないね。

ナビゲーション削除タイプに合わないデザイン例

ナビゲーション削除タイプに合わない理由

トモ・リーン

逆にナビゲーション部分のあしらいの一部がコンテンツにかかる場合、そこは印刷に出さなくても良かったら、透過PNGも使えるわよ。

ナビゲーション削除タイプでもOKなデザイン

ナビゲーション削除タイプでもOKな理由

ケンジ

う〜〜〜む、デザインの時から印刷対応を考えないとダメなんだね・・・。

トモ・リーン

そうなのよ。
いいこと言うわね！

トモ・リーン

あと、DWではver8からメディア別でデザインビューの表示を変えられるから、そこを利用してコーディングをするのもいいわよ。

上部のメニューの 表示＞スタイルレンダリング＞プリントメディアタイプ でアクセス！

ケンジ

最終的にはブラウザで表示して、印刷プレビューでチェックだね！

トモ・リーン

うん！

今回のポイント！

ナビゲーション削除は比較的簡単にできますが、次の点に注意しましょう！

• 残したいコンテンツ部分の幅を649px以内にする
• コンテンツ部分のみの表示にしても不自然じゃないようにデザインをする

ケンジ

おう〜！

トモ・リーン

リストにしてみました。
難易度は下に行くほどupします。

ナビゲーション削除タイプ

ナビゲーションを削除してIE6でも表示が乱れないようにする。

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

配置を変更してIE6でも全ての情報が見えるようにする。

スクリーンと全く同じように印刷する

zoomプロパティを使用し、全体を縮小する。

ケンジ

上の２つ「ナビゲーション削除タイプ」「印刷用に全く違うレイアウトを作る」、劇的に見栄えが変わってるけどスクリーン用と印刷用に2ページ作る、って訳じゃないよね？

トモ・リーン

もちろん違うわ。
1つのHTMLで印刷用のCSSを指定することにより、見栄えを変更しているのよ。
別の印刷用のページが用意できたらそれはそれでいいけど、同じ内容で別のフォーマットというのは修正・更新を繰り返すたびに内容にズレが生じる危険性があるわね。

ケンジ

最後のスクリーンと同じように見せるタイプの「zoomプロパティ」って今まで使ったこと無かったな。

トモ・リーン

IE専用のプロパティなのよ。

トモ・リーン

次はタイプ別に実際に組んでみます。
お楽しみに〜！

今回のポイント！

いろんな方法で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側では印刷したいページの縮小ができないので気をつけましょう。

ケンジ

ふむふむ。

トモ・リーン

早速見え方の違いを、file23のネコサイトで表にしてみたわ

見え方の違いリスト：クリックで拡大します。

• 「A4印刷」とはA4サイズの紙に印刷する設定
• 「背景あり・なし」とは印刷設定で背景画像の表示の切り替えのこと

	モニター	A4：印刷　背景あり	A4：印刷　背景なし
IE6
IE7
Firefox3 win版
safari3 mac版

ケンジ

・・・ん？
IE6はムチャクチャだけど、他のブラウザは結構「背景あり」にしたらキレイにみえるね！

トモ・リーン

ええ。でもそこに問題があるわ。
一般的なWebの閲覧者がその「背景画像」の表示がブラウザから制御できることに気づいているか、と言うことね。
ブラウザの設定の中でも奥の方にあるから、気づいていない人も多いはずよ。

IE6で背景を印刷する場合は ツール＞インターネット オプション で出るダイアログで設定します。

Safariはプリント... で出るダイアログで設定します。

ケンジ

・・・。 確かにこの設定は、インターネットをしている人がみんな知っているか、て言うと無理だね。

トモ・リーン

そうね。
だから背景画像あり印刷でキレイに見えるサイトは、そのサイトのターゲットがパソコンに詳しい層ならいいかもしれないけど、一般的な層がターゲットのサイトだと難しいわね。

ケンジ

多くの人は背景画像を表示して印刷できる、と言う設定があると言うことに気づかないことが多いってことだね。
う〜〜〜む・・・。

トモ・リーン

だから、絶対に印刷したい画像の場合は飾り要素とかでも、背景画像ではなくimgタグで配置するといいわよ。

ケンジ

そっかぁ！

トモ・リーン

つぎはIE6で派手にズレまくる理由にも関わるネタを、冬休みはさんで2009年1月11日12日に更新します。

ケンジ

良いお年を〜！

今回のポイント！

どうしても印刷で出したい画像は背景画像処理では無く、imgタグで置きましょう。

ケンジ

ふむふむ。

トモ・リーン

たとえばfile.23で完成したネコサイトを印刷するとこんな風に見えるわ。

ネコサイトをWindows版Firefoxで印刷プレビューしてみました

クリックで拡大します。

ケンジ

な、なんじゃこりゃああああ！！

トモ・リーン

特に印刷用の設定をしていなければ、こんなものね。悲しいけど、これが現実よ。
IE6ではさらに跡形も無いわよ（泣）

ケンジ

覚悟はしていたが、これほどだったとは・・・！！

トモ・リーン

印刷用のCSSの設定はmediaでプリント指定をするのよ！

ケンジ

いままで、この指定してなかったけど、その場合はどうなるの？

トモ・リーン

特にメディア指定をしていない場合は全てのメディアで指定したCSSが適用されるのよ。

CSSの表示の指定が設定できるメディア一覧

ケンジ

うへぇ〜〜！こんなにあったんだ！
ん？？まてよ。
指定しなかったときは全てのメディアに適用されるってことは今まで書いていたCSSもプリントでも見えるはずなんだけど・・・？

トモ・リーン

その通り！
始めに出したネコサイトの印刷プレビューでも、全てのCSSの情報が期待ハズれなレンダリングをされている訳じゃないわ。
レイアウトは残っているわよね？（IE6は壊滅的だけど）

ケンジ

そうだった！

トモ・リーン

実は同じブラウザでも、スクリーンと印刷じゃ、全く違うレンダリングをするのよ。

ケンジ

なんだって！
それじゃあ、チェックブラウザが増えるようなものじゃないか！！

トモ・リーン

印刷はスクリーンとは全く違うタイプのレイアウト崩れが発生するのでもっとタチが悪いのよ・・・。
お気を付けて！！

ケンジ

くっ・・・・・。
次は、具体的にどうスクリーンと見え方が違うのか教えてね・・・。

今回のポイント！

印刷用のCSSを準備することによって、印刷対応が出来ます。

ケンジ

今度はどんな機能拡張なの？

トモ・リーン

今度はページをまるっと取って保存できて、その上簡単に編集＋メモも貼れる「ScrapBook」。

トモ・リーン

この機能拡張の説明はオフィシャルサイトでの説明が分かりやすいので、多くは語らないけど、閲覧しているWebページを取り込んで欲しい情報以外を消したり、メモで補足できたり出来るわよ。

ケンジ

ふむふむ。
技術的な調べ物をするときや、デザイン的に気に入ったサイトを貯めておくのに使えそうだね！

トモ・リーン

あと、これはWindowsの人だけなんだけど、Firefoxで開いているページをIEで開ける「IE Tab」。

インストールするとココが変わる！

ケンジ

IEのバージョンは選べるの？

トモ・リーン

OSにインストールされているIEを開くのよ。だからIEのバージョンは選べないわね。
あと、MacのFirefoxにいれてもダメなのよ。

ケンジ

そっか〜〜。残念！

トモ・リーン

でも、ブラウザを２つ立ち上げたり、URLをコピペしたりと言った労力は、小さいけど何回もしないといけないから、この辺りが省略できるのってとっても楽よ。

ケンジ

ブラウザチェックってCSSを直すたびに何回も見直すからね。
地味・メンドクサイ作業がちょっとでも楽になるといいね！

トモ・リーン

うんうん！
機能拡張自体は日本語化もされているので、とっても使いやすいわよ。

基本の操作法はアイコンにマウスを重ねると表示されるので覚えなくてもOK！

オプション設定画面の一部

ケンジ

俺の趣味で見に行っているサイトがIEじゃないとダメなところがあって、ブラウザを使い分けていたんだけど、これだとFirefoxだけで良さそうだから普段使いにもいいね！

トモ・リーン

Firefoxには他にも色々な 機能拡張があるので、楽しんでみてね。
でも入れすぎるとFirefoxが重くなったり、機能拡張の相性が問題で挙動がおかしくなることがあるのよ。

ケンジ

よ〜し！加減を考えながら、色々入れてみるよ！！
ところでトモ・リーンはどこでそんな機能拡張を見つけてくるの？？

トモ・リーン

こんなところで探しているわよ。

---

• Firefox Add-ons：https://addons.mozilla.org/ja/firefox/
• Firefox更新情報 Wiki*：http://wikiwiki.jp/firefox/

ケンジ

Firefoxを俺色に染めてやるぜ〜〜〜☆

今回のポイント！

Firefoxの調子を見ながらバンバン機能拡張をいれて、あなた仕様のFirefoxにしてやりましょう！

ケンジ

今度はどんな機能拡張なの？

トモ・リーン

Webページのキャプチャを取りたいときにオススメの品です！

Pearl Crescent Page Saver Basic

オフィシャルサイトからダウンロード！
Pro版（有料）とBasic版（無料）がありますがBasic版で十分大丈夫ですよ。

インストールするとこのようなボタンがツールバーに追加されます。

ケンジ

何コレ！！英語のページじゃん！！！

トモ・リーン

大丈夫！
機能拡張自体は日本語化されているので安心よ。
いろいろ設定できる、オプション画面を見てみて！
※オプション画面はツールバーのアイコンを右クリックすると出てきます。

オプション画面：動作の設定

オプション画面：キャプチャーされる画像の設定

ケンジ

おお〜〜！！なんだか小回りが利きそうだね。

トモ・リーン

自分で作ったページを印刷してチェックしたいときにもオススメね！
CSSで作ったページはプリント用の設定をしないとスクリーンと同じようには見えないのよ。
だからキャプチャをとって、それを印刷するといいわよ。

ケンジ

ちょっとズレるけど印刷用のCSSを作ったとして、その見栄えをチェックしたいときはやっぱり、印刷するしかないのかな・・・。
俺、エコな人間だから印刷とかしたくないんだけど！

トモ・リーン

その場合はブラウザの「印刷プレビュー」でチェックできるわよ。

ケンジ

ふむ、ふむ！

トモ・リーン

ちょっと前のバージョンまでFlashの部分が抜けてキャプチャされていたのだけど、今のバージョンはFlashも撮れるので欠点無しよ！！

今回のポイント！

これを使えばページ全体のキャプチャが画像編集アプリで合成したりせずに撮れるので、とっても便利です！！

ケンジ

今度はどんな機能拡張なの？

トモ・リーン

次はFirebugね。
ローカルはもちろん、ネット上のデータもチェック＆いじったり出来るのよ！

トモ・リーン

実際の使い方の説明が静止画では難しいので、なんと初の動画にしてみました！

トモ・リーン

いじったデータはブラウザ上に反映されるけど、実際のデータは保存されていないのよ。
そこが注意ね。

ケンジ

ネット上のデータの保存は無理だと、俺も分かるけどローカルのデータは保存したいな〜！

トモ・リーン

そうね〜。
ちょっと残念だけど、他の人が作ったイケてるサイトのチェックや、動的なページ作成タイプのCMSの動作確認をするときとか便利よ〜。

ケンジ

そんなことより、本当は鼻声＋滑舌が気になったな〜〜！

トモ・リーン

気にしない方がいいわよ！
かわいそうだから、そこには突っ込まないで（泣）

ケンジ

そっか〜〜。何事にも触れていけないことがあるんだね！

今回のポイント！

Firebugは色々なチェックに使えて便利です。
格好いいサイトを見つけたらFirebugでねちっこく調査してみると楽しいかも！