ArtSaltのサイドストーリー

某ソーシャルブックマーク経由で知ったページ。

⇒ 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);

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

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

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);

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

うーん、困った。

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

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