今までずっとやろうと思っていて怠けていた「CSSをきちんと書くこと」ですが、Web制作会社で働かせてもらった関係もあって最近自分のCSSの記述を見直しています。今さら^^;
(ちなみにこのサイトの記述は一年くらい前のなのでぐちゃぐちゃです。汗)

• リストアップ
• シェイプアップ
• まとめ、+α

流行の表題の煽りをちょっと意識してみたり。

Firefoxをお使いの方には、必須なアドオンと言っても過言ではない「All-in-One Gestures」 これはマウスジェスチャ機能を追加する拡張機能です。

僕は、Firefoxを使い始める前からマウスジェスチャを使っていたので、当たり前な機能だと思っていました。でも案外FirefoxやSleipnir、Lunascapeを使っていても知らない人が周りにいることが分かったので、今回僕が実際に使っているお勧めの7つのマウスジェスチャを紹介しようと思います。

導入は、Firefox Add-onsのAll-in-One Gesturesのページからインストール、その後Firefoxを再起動すると有効になります。
使用方法は、右クリックを押しながら、任意の方向にマウスを動かす、です。簡単。

「ツール(T) > アドオン > 拡張機能タブ > All-in-One Gesturesの設定 > ジェスチャのカスタマイズ」　からジェスチャをカスタマイズができます。僕が設定しているものを下に挙げときます。

この設定をした結果が左図の上から7つ。僕は使うもの以外は無効に設定してます。

上のジェスチャを更新に割り当てたのは、CSSとかを編集してると頻繁に更新することがあるからです。
ちなみに、右-左-右で「選択文字列を新しいタブで開く」ですが、どちらかというと、未設定の「選択文字列を検索」の方が使用頻度が高いので、左-右-左を割り当てています。

紹介したマウスジェスチャは、基本的なものばかりです。が、この7つのジェスチャでブラウジングがかなり快適になると思います。(マウスを使ってブラウジングされている方は特に。)
さらに今まで知らなかった人が使ったら、絶対1ヵ月後にはないと不便だと感じるようになりますよ！

続きでは、おまけの残り2個を紹介。

Firefoxの火狐のアイコンをデザインされたことでも有名な、hicksdesignさまのJon HicksさんがBloglinesの美しいスキンを公開されています。

• Bloglines Skin 1.4.1 by hicksdesign様

これは、FirefoxやSafari、Operaなどで使えるユーザースタイルシートとして配布されており、Bloglinesの見た目をユーザ側で変更できるようになっています。

例えば、Firefox(Win)では、以下の方法でこのスキンを適用できます。

1. C:\Documents and Settings\(ユーザ名)\Application Data\Mozilla\Firefox\Profiles\(任意の文字列).default\chromeフォルダにダウンロードしたbloglines-moz.cssを置く
2. Firefoxを終了する
3. 同フォルダ内のuserContent.css（存在しない場合はuserContent-example.cssをコピーしてuserContent.cssにリネームします）を開く
4. userContent.cssの1行目@charset "utf-8";の次の行に@import url(bloglines-moz.css);と記述して保存する
5. Firefoxを起動してBloglinesを開く

たったこれだけで、ちょっとイマイチなBloglinesのデザインをこんなにかっこよくできます！
実際各ボタンの位置が変わっていて、（フィードの編集・追加のリンクは下にボタンとしてあります）UIはより洗練されていますね。

また、Safari、Operaの導入方法は、hicksdesignさまの「OS X skin for Bloglines」というエントリで解説されています。Bloglines使ってる人にはオススメのスキンです。

各ブラウザのCSSの解釈の違い（バグ）を補正するために、そのCSSのバグを逆手にとって、特定のブラウザに意図したデザインを表示させる裏技(?)である、俗にいう「CSSハック。」

そんなCSSハックは、CSSの記述としては正しくないものもあるため、あまり使わないほうがよいというのが一般的です。（どこまでをCSSハックというのか判断しにくいですが・・・）

しかし最もシェアが高く最もバグが多いブラウザが、ご存知Internet Fucking Explorer。使いたくないと言いつつもCSSハックの利用が必須とならざるを得ないという、皮肉な現状があります。

仕事で利用する機会も多いことので、備忘録としてまとめてみました。

CSSハック | BLOG × WORLD ENDING

BLOG × WORLD ENDINGさんの記事では、このCSSハックがきれいにまとめられています。

この、CSSバグの宝庫、「真のWEBのお荷物」ことInternet Fucking Explorer 6のメジャーアップデート版、IE7の日本版が先日リリースされ、バグがどこまで修正されたのか、Webクリエイターたちは戦々恐々です。

僕もIE7をインストールしていじってみたんですが、早速IE6とも違うバグがあったので、この解決法を続きにちょこっと紹介してみます。

11月2日にInternet Explorer 7の日本語ロケールの正式版がリリースされました。

以前IE7が出るのは気が重いと書きましたが、そうはいいながらやっぱりちょっと楽しみだったので早速ノートPCの方にインストールしてみました。

インストール後、初回起動時に設定ページが表示されて、検索プロバイダ(検索サービスのことですね)の追加の是非や、フィッシング対策機能のオン・オフ、ClearTypeを使用するか、などの設定しました。

さらに、様々な検索プロバイダの追加を行なえるページにジャンプし、いくつか追加を行ないました。これをすると、画面右上の検索ボタンのプルダウンのとこに検索プロバイダが追加されます。このプルダウンメニューには、更なる追加と検索プロバイダの設定ができるようになっています。

設定を終え、画面全体を見てみると、

• タブがある
• 一般的な「メニューバー」がデフォルトで表示されていない (表示可能)
• 右上にフィード検出ボタンがある
• 戻る・進むボタンと、更新ボタン、読み込み中止ボタン、ホームボタンの位置がバラバラになっている
• マウスジェスチャはないっぽい？

画面デザインはVistaを意識してか？、テカテカしてる感じです。肝心のタブの操作感は特に問題なく、「クイック タブ」と呼ばれるタブ一覧機能は遅くないし、便利だと思います。
ただ、これらの機能はFirefoxやOperaなどのモダンブラウザではすでに実装されていますが。(一部拡張機能を導入する必要はあります)

ちなみに、ALTキーを押すと「メニューバー」が現れるようです。(その辺クリックしたり、もう一度ALTキー押すと隠れます)

ダウンロードから初期設定、新機能などの雰囲気が知りたい方は以下のページが非常に参考になると思います。

• ダウンロードしたばかりのIE 7日本語版をチェックしてみた by ITmedia Biz.ID様

また、CSSなどのサポート面でも大幅に向上したみたいです。アルファチャンネルpngに対応したのはデザインの幅が広がるので個人的にうれしいです。
僕もいじってみて、これは気をつけなくちゃいけないと思ったCSSハックがあったので、近々エントリしようと思います。

ちなみに11月1日から3日までのVERSION510に訪れる方のブラウザは、IE7が3位の8.6%、IE6がダントツ1位の64.7%です。シェアがどう変動していくのか非常に興味が沸きますね。