しばらく前にお伝えしたJUGEMのテンプレートコンテストですが、先日受賞者の発表があったみたいですね。どれもハイクオリティーなものばかり。グランプリを受賞したmkdnさんのサイトはFlashも効果的に使われた、いかにもJUGEMらしい作品なのではないでしょうか。他のテンプレートも普通のブログスタイルというよりかは少し変わったものも幾つかあり、見ているのも楽しくなるのが多々ですね。あと、当サイトのライターをしているNaoさんも受賞してします。これで２冠ですね。
さて、このエントリーを書いているヤスヒサは現在、このサイトのリニューアル作業に大忙しといったところです。かなりガラっとかわるのでお楽しみに。
以前このエントリーでWin、Mac関係なく多くのブラウザのキャプチャーを撮ってくれる有料サービスについて紹介しましたが、今回紹介するのはWindowsのブラウザ（IE4.01、IE5.01、IE5.5、IE6.0、 Firefox 0.8、Opera 7.23）を無料でチェック出来るサイトです。
ieCapture：the PC cousin of iCapture
Dan Vinceという方が作ったWebアプリで現在自宅サーバーを使っているので激しく重たいです。昨日、今日と挑戦してみたのですがキャプチャ撮れなかったです（泣）とはいうものの将来的にはかなり期待できそうですよね。今後の予定としてはIE5.2もテスト対象になるようです。複数のPCをもっている人やパーティションあててないと複数のIEでテストなんて出来ないと思うのでWinユーザーにも便利かもしれませんね。まぁこれだけ期待していても日本語は文字化けというケースも考えられなくないですけどねぇ。日本の方で誰か作ってくれますかー（他力本願）
《追伸》
ではWindowsユーザーの方に朗報。どうやらWindowsにIE6が入っていても古いバージョンを入れることは可能なんですね。知りませんでした。
QuirkMode：Multiple Explorers
バージョン３から入れることが出来るみたいですね。試しに入れてみましたが、IEが問題なく動作しました（ただIE5.5のバージョン情報がIE6って出て来ていますがそれは問題ないとのこと）。Windowsユーザーならまずこれがあれば一安心かと。
この記事は、Mezzoblueのデイブ・シェイ氏による“CSS Crib Sheet”という記事を訳したものです。リンク先のサイトはすべて英文のみとなっています。
疑わしい時は検証しよう
デバッグ中、まず素直にコードを検証ツールにかけることで、悩みの種をずいぶん減らす事ができるはずです。適切でないXHTMLやCSSコードは様々なレイアウト上の不具合を引き起こすでしょう。
他のブラウザでCSSをテストする「後」ではなく「前」に最先端のブラウザで構築・テストしよう
バグの多いブラウザでテストしながらサイトを構築すると、そのコードは使用したブラウザによるバグ含みのレンダリングに依存するものになってしまいます。後によりウェブ標準に準拠したブラウザでテストする段階で、不適当なレンダリングがされることに不満を感じるでしょう。その代わりに、完成したCSSを作成するところから取り掛かり、それからより劣ったブラウザ向けのハックをするようにしょう。こうすれば、あなたの書いたコードは最初からよりウェブ標準に準拠したものになり、他のブラウザに対応するためのハックもそれほどしなくてよくなるでしょう。現時点では最先端のブラウザとは、Mozilla、Safari、またはOperaのことを指します。
求めているエフェクトが実際に存在するか確認しよう
公式仕様には含まれない、ブラウザ固有のCSS拡張機能も存在します。もしCSSフィルターを適用したり、スクロールバーの体裁を整えようとしたりしているのなら、IE以外のブラウザでは動作しない独自のコードを扱っていることになります。検証ツールが「あなたが使用したコードは定義されていません」と教えてくれた場合、恐らくそれは独自コードであり、すべてのブラウザで一定の動作をしないでしょう。
floatに依存したレイアウトをする場合､floatを確実にclearすること
floatは扱いにくく、いつでも期待したように振るまってはくれません。floatが内包する要素のborderを突き抜けて延びてしまっていたり、または単に期待したような動作をしてくれない場合は、あなたの求めているものが正しいことを確かめてください。この事については、エリック・メイヤー氏のチュートリアルを見てください。
マージンは崩れる。防止のためにpaddingやborderを利用しよう
不必要な余白や、必要なところに現れてくれない余白と格闘するかも知れません。もしmarginを使っているなら、恐らくその崩れが原因でしょう。アンディ・バッド氏がどういうことが起こりうるのかを説明しています。
固定widthの要素にpaddingやborderを適用するのはなるべく避けよう
IE5はボックス・モデルを正しく解釈しません。これはいろいろなことを本当に台無しにしてしまいます。この問題を回避する方法もありますが、固定widthを持つ子要素にpaddingを適用する代わりに、親要素に適用することで避けるのが一番良いでしょう。
IEでのFlash of Unstyled Content（フラッシュ・オブ・アンスタイルド・コンテント）を防ごう
外部スタイルシートを使う際、@importのみに依存していると、IEがCSSを適用する前にプレーンでフォーマットされていないHTMLを一瞬表示することにそのうち気づくでしょう。これは防ぐことができます。
IEのmin-widthはあてにならない
IEはmin-widthをサポートしていませんが、ある程度まではwidthをmin-widthとして扱います。ちょっとしたIE振り分けを使えば、同じような最終的結果を得る事ができるでしょう。
疑わしい時はwidthの値を減らそう
時に、誤った四捨五入によって50%＋50%の結果が100.1%のようになり、一部のブラウザでのレイアウトが崩れてしまうことがあります。50%を49%に下げてみてください。たとえ49.9%へと減らすだけでも、変化があるかもしれません。
第一回目のインタビューに引き続き麻遊さんとのインタビューです。ワタクシは麻遊さんと一度お会いしたことがあるのですが、気さくな方でWeb標準のことからアクセシビリティなどなどいろいろ話をすることが出来ました。今回のインタビューでもCSSを勉強している方には興味深い内容だと思いますよ。
６：CSSを勉強するにあたって役にたったサイトはありますか？
全部英語なんですが…。まずはアメリカでCSSがやけに盛り上がった時には誰もが見ていたサイト３つ。テーブルなしのレイアウトの例が数種類紹介されていて、関連のエッセイもいいポイントを押さえているのでためになりました。
７：CSSの編集／サイト構築にはどんなソフトを使っていますか？
ほぼBBEditのみ（Mac）。他のエディターやCSS専用のものも試してみましたが、今のところは結局いつもここに戻ってきています。WYSIWYG（ウィジウィグ：What You See Is What You Getの略）型だとDreamweaver。テーブル使う時にはこれでざっくりレイアウト組むこともあります。
iNTERNET magazine+の2004年5月号より『Before After CSSテクニック』という名前で連載がスタートしました。初心者向けのCSS講座です。コードがどういった作りになっているかも大事ですが、それよりコードをコピペするくらいの軽いノリでCSSに慣れ親しんでくれたらなという思いで書いています。現時点はブログにすぐ適応出来るCSSのTip集といったスタンスをとっているので、ブログユーザーにはお勧めかもしれません。もちろんブログ以外の目的でも応用は出来ますよ。
今後、他のライターさんもこの連載に参加していく予定なのでこれからどうぞよろしく。
また、雑誌のほうであなたの「イケてるブログサイト」も募集しています。このサイトでも後に募集をしようと思っていますので、ぜひ応募してください。「イケてるCSSサイト」といえばこういうリンク集もありますよね。ナイスです。
あと、『JUGEMではじめるCSS講座』というのもスタートしました。JUGEMユーザーを対象にしたこれまた初心者向けのCSS講座です。「そもそもCSSって何？」というところから入っているのでJUGEMユーザー以外の方にもおもしろい内容じゃないかなと思います。今後、JUGEMでオリジナルテンプレートが作れるようになるまでの手順を紹介する予定なので、こちらもお楽しみに。
