このエントリーでマウスオーバーが可能な画像メニューの作り方を紹介しましたが、CSS初心者だとどうしても難しいと感じてしまうこともあると思います。そこで今回はウィザード形式で簡単に画像メニューが作れるサイトを紹介します。前回のは「position」プロパティを駆使したテクニックに対して、こちらは「display: inline」を使用したものです。
Inknoise：The Amazing Rolloverer
画像は上から「ディフォルト状態」「マウスオーバーの状態」「アクティブの状態」と順に並べてひとつの画像として保存します（ディフォルト状態のみの画像をアップしてもメニューは制作してくれます）。あとはステップにそって必要な情報を記入すればあっという間に完成してしまいます。ソースコードをみて勉強しても良いですし、そのまま使うのも良いのではないでしょうか。また、同サイトにはレイアウトを自動生成してくれるLayout-o-Maticもあるので、手軽に作りたい人はこちらを利用するのも良いかもしれませんね。
ちなみにInknoiseとはTypePadのようなホスティング型のブログツールです。管理者用ページを見る限り、なかなかよく出来たツールのような気がします。
CSSで定義するスタイルが多くなるとどうしてもファイルサイズが大きくなるのは止む終えないことだと思います。このエントリーで紹介した方法でファイルサイズを小さくすることは可能ですが、ある意味裏技みたいな方法なので実用性が高いとは少し言い難いと思います。
CSSのファイルサイズを減らすのでまず出来るのは、プロパティの記述方法を短くすることだと思います。例えば、フォントの記述方法も
font-size: 90%;と、切り分けて書かなくても
line-height: 180%;
font-family: arial, "Lucida Sans", "Futura", sans-serif;
font: 90%/180% arial, "Lucida Sans", "Futura", sans-serif;というふうに１行で書くことが可能です。その他「list」や「background」も１行で短く書くことが可能です。こういう積み重ねがファイルサイズを小さくすることもあります。 今回紹介するのは長くなってしまったCSSをクリックひとつで短く最適化してくれるサイトです。
現存のCSSを最適化してくれます。サーバーに置いてあるCSSファイル又はCSSを直接書き込んで最適化をします。日本語は文字化けしてしまいますし、ハックがあるとハックのコードまで最適化してしまいますが。使えないことないですね。CSSのコードの確認としても使えますし、まだ「１行書き」に慣れてない方はここでサクッと変換してしまえば良いのではないでしょうか。
以前このエントリーで、FirefoxのWeb Developer Toolに匹敵する IE 専用のツールバーを紹介しました。どうやら、先日アップデートされたみたいなので再度紹介したいと思います。
AIS：Web Accessibility Toolbar
日本語版はこちらからダウンロードしてください。
以前はBookmarkletの集合体というイメージが強かったツールバーでしたが、今回は安定性も増ししていますしインターフェイスも良くなっているような気がします。また、ホットキーを設定出来るようになったのでキーボードショートカットでサクッとCSSをオフにする・・・なんて出来るようになりました。ActiveXのオン／オフのようなIEの環境設定画面でしか出来なかったこともツールバーから出来るようになったみたいですね。名前から分かるようにCSSのツールというより、アクセシビリティチェックのソフトとしても使えるので IE ユーザーはぜひダウンロードしてみてはいかがでしょうか。
以前このエントリーで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ユーザーならまずこれがあれば一安心かと。
僕はMacユーザーなのでWindowsを持っていません。もちろんWindowsは持っているけどMac持っていない方も多いと思います（というか、そういう場合のほうが多いですよね）。iCaptureというサイトを使えばMacのSafariブラウザでみた自分のサイトを無料でキャプチャしてくれます。とはいうものの、Macユーザーの方でもIEで見ている方もいますし、Operaを使っている方もいます。しかもLinuxユーザーも忘れてはいけません。もちろん、Mac、Linux、Windowsすべてのマシンを購入してバージョンの違うブラウザをインストールしておけばそれでOKなわけですが、金銭的な問題も含めてそういったことが出来るケースは非常に限られていると思います。
そこで登場となるのがBrowser Camというサイト。
異なるOS、ブラウザに分けて指定のURLのスクリーンショットを撮ってくれるサイトです。５つのプラットフォームに４０種類のブラウザ（バージョンやFlashの有無も含む）でチェックが出来るという優れものです。以前、僕のサイトで紹介したときは日本語のサイトをWindowsでキャプチャすると文字化けしていたのですが、いつの間にやら多言語サポートしたみたいです。これは朗報。
Browser Camの魅力はブラウザの豊富さだけでなく、スクリーンサイズやキャプチャしたときの画像フォーマットなど細かい設定が出来るところだと思います。キャプチャもフォルダに分けて整理しておくことも出来るのも便利だと思います。
さすがにこれだけのサービスを提供しているというだけあって無料というわけにはいかないみたいです。１時間で１０URLをチェック出来る１０ドルプランと１ヶ月間無制限でチェック出来る39.95ドルプランがあります。安いとは言い切れないけど、それほど高くないと思います。無料のトライアル版もあるので、とりあえずBrowser Camがどういったものか体験してみると良いかもしれませんね。
