CSSでボックス要素を画面中央に表示させてみる

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

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

“CSSでボックス要素を画面中央に表示させてみる” の続きを読む

CSS ロールオーバーのアクセシビリティを少し考えてみた

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

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

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

“CSS ロールオーバーのアクセシビリティを少し考えてみた” の続きを読む

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

CSS プロパティの記述順を考える

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

“CSS プロパティの記述順を考える” の続きを読む

ブラウジングを快適にする7+2個のマウスジェスチャ

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

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

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

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

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

設定したマウスジェスチャ
機能 ジェスチャ 備考
履歴を戻る デフォルト
履歴を進む デフォルト
文書を再読み込み カスタム
文書を強制的に再読み込み 上-下-上 デフォルト
現在のタブを閉じる デフォルト
選択文字列を新しいタブで開く 右-左-右 デフォルト
選択文字列を検索 左-右-左 カスタム

画像 : All-in-One gestures 設定

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

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

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

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

“ブラウジングを快適にする7+2個のマウスジェスチャ” の続きを読む

Bloglines の美しいスキン

画像 : bloglines skin

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

これは、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使ってる人にはオススメのスキンです。