少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの^[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

画像はCSS Nite LP3の課題のものを利用させていただいています。

1. 画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]

今までずっとやろうと思っていて怠けていた「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使ってる人にはオススメのスキンです。