マンガは１年ぐらい前に出来てたのですが、マンガを入れるためにサイトの横幅を広げる改造をしたり、マンガにするにあたってHTMLソースをどうするか迷っていたら、こんなに時間が過ぎていたのです...。ふふ...。

マンガはサチコさんに描いてもらったのですが、見ていただいた通り、すごい筋肉を描くのが好きです。
こんなファンシーな世界観に筋肉を輸入してくるとわ...。

ではでは、またそのうち続き書きますね！

もくじです。

• 第1章　jQueryをはじめる前の基礎知識
• 第2章　サンプルで学ぶjQueryのキホン
  • 2-1　jQueryの基本とセレクターの使い方
  • 2-2　HTML/CSSを操作しよう
  • 2-3　「イベント」でタイミングを設定しよう
  • 2-4　フォーム機能を使いこなそう
  • 2-5　Ajaxを使ってみよう
  • 2-6　アニメーション効果で動きを付けよう
• 第3章　現場で使えるデザインレシピ
• 第4章　jQueryプラグインでラクラクWeb制作

2章は特に大事な内容な気がしましたので、細かめに書いてみました。

もくじです。

• 第1章　jQueryの基礎構文
• 第2章　jQueryとJavaScriptを組み合わせてみよう
• 第3章　jQueryのさまざまなテクニック
• 第4章　見た目をよりよく変えてみよう
• 第5章　さまさまなインターフェイスを作成しよう
• 第6章　フォームを入力しやすくしよう
• 第7章　多彩なアニメーション表示を利用しよう
• 第8章　Ajaxを利用しよう
• 第9章　Web APIを組み込もう
• 第10章　iPhone/iPadサイトを作成しよう
• 第11章　ツールを使ってより簡単に開発しよう
• 第12章　The Other Topics of jQuery 〜その他の重要テーマ〜

2次会まで参加したのですが、楽しい会でした！

トモ・リーン

きちんとセレクタを付けているのに、スタイルが適用されていないことってない？

ケンジ

おー、あるある！ 日常茶飯事だゼ～～

トモ・リーン

凡ミスってことも良くあるけど...

トモ・リーン

実はセレクタには「強さ」があります！！

ケンジ

ナニソレ〜？？？

トモ・リーン

まず「*」 これは超弱いです。 最強は「#」ね！

ケンジ

そうなの？？？

トモ・リーン

セレクタの強さとは、スタイルの優先順位のことです。

ケンジ

普通はセレクタが示す部分がかぶるときは最後のスタイルが優先されるよね？

トモ・リーン

これが順番だけじゃないのよね。強さの秘密はこうなの！！

強 ＞ id（#） ＞ class（.） ＞ 要素（htmlタグなど） ＞ 全称（*） ＞ 弱

ケンジ

数字が具体的な強さってわけか！

トモ・リーン

後に書いているのにスタイルが優先されない場合はidとclassの付け方もチェックしましょうね！

ケンジ

やるぜ！

トモ・リーン

もっと詳細に点数を付けると以下のようになります。
（2011/01/16追記さらに011/01/19修正）
ちなみに、たくさんclassをつけてもidより強くなれたりはしません！！

今回のポイント！

最後に書いているのに適用されない場合は、別のところでidやclassをたくさん付けた指定があるかも知れません。
Dreamweaverを持っている人は「ウィンドウ＞CSSスタイル」で「現在」ボタンを使うと探しやすいですよ。

ケンジ

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

トモ・リーン

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

ケンジ

ええええええええ？？？

ケンジ

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

トモ・リーン

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

今回のポイント！

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

ケンジ

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

トモ・リーン

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

ケンジ

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

トモ・リーン

・・・・・・。

トモ・リーン

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

ケンジ

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

トモ・リーン

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

ケンジ

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

今回のポイント！

きちんと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も撮れるので欠点無しよ！！

今回のポイント！

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