ArtSaltのサイドストーリー

音楽、フリーウェア、WEBサービス、食べものなどに関する日記。トラックバック、コメント歓迎。

Firefoxは、フォーカスリングよりもアウトラインのほうがいいかも(その1)

リンクのフォーカスリングとは

某ソーシャルブックマーク経由で知ったページ。
ITmedia Biz.ID:第2回 キーボードだけでWebブラウジング

「Alt + カーソルキー」でドロップダウンリストを展開できるというのは初めて知った(FirefoxとOperaで確認)

それはさておき、これをブックマークしているユーザが十数人いたのは驚き。
XUL/Migemo [Forked Edition] がなにげなく紹介されていたことも驚きだったけど。

で、このITmedia Biz.IDの記事を読んで、少し気になったことが。

この1つで効率50%アップ──という操作が、[Tab]キー。この記事を読みながら、試しに押してみてほしい(押したら、またこの部分まで戻ってきてください)。

 これはページ内の「次のリンク」に飛ぶというキー操作だ。入力フォームを移動する方法として有名だが、リンクも移動できるのである。飛ぶとリンクが点線で囲まれるのが分かるだろう(フォーカスが当たる)。ここで「Enter」を押すと、マウスでクリックしたのと同様に、リンクをたどることができる。

ITmedia Biz.ID:第2回 キーボードだけでWebブラウジング(強調タグは私(ArtSalt)が加えたもの)

ここで言われている「点線」はフォーカスリング(focus ring)と呼ばれる。

Firefoxのuser.jsに、

user_pref("browser.display.focus_ring_width", 3);

… とか書いとけば、この点線つまりフォーカスリングが太くなって、視認性が高まるのは、ちょっとしたチップ。

フォーカスリングのスクリーンショットその1 フォーカスリングのスクリーンショットその2

ところが、ブラウザの世界って、本当に奥が深いのだった。ユーザスタイルシートを使うという知恵。

2ちゃんねるのSyleraスレッド。
(SyleraはFirefoxの兄弟 ? みたいなブラウザ)

566 名前:名無しさん@お腹いっぱい。 :2006/09/20(水) 21:10:58 ID:bRZyrJ1p0
リンクがフォーカスされている時に黒の点線が出るのを、もっと見やすくする為に黒から赤などの点線に変えたいのですが、できますか?

569 名前:名無しさん@お腹いっぱい。 :2006/09/21(木) 00:08:50 ID:IOcSfGlt0
>>566
usercontent.cssに
:-moz-any-link:focus {outline: 1px dotted #ff0000;}
って書けばできるはず
色や線の太さ、種類はお好みで替えてね

さて、今度はuserContent.cssではなく、user.jsの話。

今まで私は、

user_pref("browser.display.focus_background_color", "#ffffff");
user_pref("browser.display.focus_ring_on_anything", true);
user_pref("browser.display.focus_ring_width", 3);
user_pref("browser.display.focus_text_color", "#000000");
user_pref("browser.display.use_focus_colors", true);

と、user.jsに書いていたんだけど、browser.display.focus_ring_on_anything と browser.display.focus_ring_width を初期値にしないと、2ちゃんのSyleraスレッドで紹介されていたuserContent.cssの上記スタイル(outline属性)が反映されないことが判明。

つまり、

user_pref("browser.display.focus_background_color", "#ffffff");
user_pref("browser.display.focus_ring_on_anything", false);
user_pref("browser.display.focus_ring_width", 1);
user_pref("browser.display.focus_text_color", "#000000");
user_pref("browser.display.use_focus_colors", true);

と、書かないといけない。

うーん、困った。

そうすると、フォームのチェックボックスとかボタンなどの部分のフォーカスリングが細くなってしまう。

当ブログ内の関連エントリ

しかし、うまい解決法があった。
このエントリの続きをこちらに書く。

Google
WWW ArtSaltのサイドストーリー
Web site (optional)
Comment - Need to type CAPTCHA, an image of distorted Japanese Hiragana or Katakana afterward.
Password - Not allowed to modify your comment later if password not entered.
On secret mode?
 

http://art2006salt.blog60.fc2.com/tb.php/463-53d18460

このブログについて

最近のエントリ

カテゴリー
あわせて読みたいブログ

あわせて読みたい

最近のコメント
Internet Explorer
よりも便利です

Opera 9 - Always secure with Opera Firefoxをダウンロード!!

相互リンク