現在、当サイト「mozilla.org 日本語版」の和訳文書は更新されておらず、mozilla.org の原文 よりも内容が古くなっている可能性があります。ご不便をお掛けしますが、最新の情報は原文をご確認ください。



フォーカスの見た目と空間ナビゲーションの制御に CSS を使う

概要

Mozilla では、CSS が画面上のすべての要素のルック & フィールを制御します。CSS についての指導書は多数あり、さらに必ず W3C の文書 CSS 仕様書が存在します。 これらのリンクを一通り読むと、すべての要素の型に対して、フォーカスのスタイルを制御できることが分かるはずです。空間ナビゲーションという文脈の中で重要なスタイルは outline で、これで要素の周辺に境界線を引くことが可能になります。留意いただきたいのは、輪郭は境界線のスタイルに良く似ていますが、ドキュメントのレイアウトの中に領域を確保することはありません。CSS21 ではサポートされるプロパティが定義されています。さらに -moz-outline-radius もサポートされていて、角に丸みを与えることができます。

CSS フォーカスのサンプル

以下の CSS について考えてみてください:

*:focus
      {
      -moz-outline: 3px   solid #FFFF00    !important;
      -moz-outline-offset: 1px             !important;
      -moz-outline-radius: 5px             !important;
      }

      textarea:focus, button:focus, select:focus, input:focus
      {
      -moz-outline-offset: -1px            !important;
      }

      input[type="radio"]:focus
      {
      -moz-outline-radius: 12px            !important;
      -moz-outline-offset: 0px             !important;
      }
このフォーカススタイルは Aaron Leventhal から借用しました。バグ報告 53927 を見てください。

上記のスタイルルールは、3 部に分かれています。 

最初のルールは、すべての要素が 3 px の境界線の輪郭があるフォーカスを備え、境界線は実線で、醜い 16 進数の文字列は黄色になるように定義します。ご参考まで、アプリケーションに使う色の文字列を選択するのに、私がやったことと言えば・・・すべての色の一覧のある表を検索し、好みの色を見つけるまで各々の色を試しました。

2 番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を 4 個の別々のルールに分けることもできます。あるいは、これら 4 個の要素が同じスタイルを必要とするとして、1 行にすることもできます。

最後のルールは、ラジオボタンの入力に対してのみ適用されます。入力フォーカスについては2 番目のルールで定義したことはお分かりですね。3 番目のルールでは、ラジオボタン型についての入力にのみ使われるフォーカススタイルを定義します。

Mozilla のごく最近のバージョンでは、-moz- を、outline の前につける必要はないことに注意してください。

スタイルをテストする

スタイルのテストは、ウェブページでごく簡単に行えます。基本的には、上に説明したスタイルを html 文書のスタイルのエリアにコピーできます。  例えば以下のようにです。

<html>
<head>
<style>

テスト用のスタイルルールをここに置いてください
      
</style>
</head>
<body>
      
テスト用の html をここに置いてください
      
</body>
</html>

スタイルを適用する

自分の CSS に満足したら、それをアプリケーションに適用しましょう。方法は 2 つあります。CSS スタイルが 個人で、また 1 つのプロファイルに使われるならば、userContent.css ファイルへスタイルを追加できます。その方法はここを参照してください。

埋め込み方式で普通に行われていることですが、もし、全アプリケーションを通じてスタイルを適用したい場合は、アプリケーションに隣り合っている res ディレクトリの中にある "ua.css" ファイルの下の部分にそのルールを追加してください。