本日は、以前にブログで、草稿の作成を公開しました Using CSS to control focus look and Spatial Navigation を見直して完成原稿にします。
原文： 青色表示
訳文： 黒色表示
校正文： 赤色表示
校正対象範囲： 黒色太字表示
*注記、コメント:赤色表示
Using CSS to control focus look and Spatial Navigation
Overview
In Mozilla, CSS controls the look and feel of all elements on the screen. There are many tutorial on CSS and there is always the W3C CSS Specification. After reading through those links, you will know that for every element type you can control the focus style. The important style in our context is that of outline which allows us to draw a border around an element. Note that outlines are very much like border styles but they do not take up any space in the layout of a document. The CSS21 define what properties we support. In addition, we support -moz-outline-radius which allows rounded corners.
フォーカスの見た目と空間ナビゲーションの制御に CSS を使う
概要
Mozilla では、CSS が画面上のすべての要素のルック & フィールを制御します。CSS についての指導書は多数あり、さらに必ず W3C の文書と CSS 仕様書が存在します。 これらのリンクを一通り読むと、すべての要素の型に対して、フォーカスのスタイルを制御できることが分かるはずです。空間ナビゲーションという文脈の中で重要なスタイルは outline で、これで要素の周辺に境界線を引くことが可能になります。留意いただきたいのは、輪郭は境界線のスタイルに良く似ていますが、ドキュメントのレイアウトの中に領域を確保することはありません。CSS21 ではサポートされるプロパティが定義されています。さらに私たちは -moz-outline-radius もサポートしており→さらに -moz-outline-radius もサポートされていて*1、角に丸みを与えることができます。
*1→前文で"we"を省いているので、統一した
CSS Focus Example
Consider the following CSS:
This focus style was ripped from Aaron Leventhal see bug 53927.
In the above style rules, there are three parts.
CSS フォーカスのサンプル
以下の CSS について考えてみてください:
[CSSコード：同上のため省略]
この フォーカススタイルは Aaron Leventhalから借用しました バグ報告 53927を見てください。
上記のスタイルルールは、3 部に分かれています。
The first part defines that all elements have a focus that has an outline border of 3px, it should be solid, and that ugly hexadecimal string means that it should be yellow. To determine the color string for your application, you can do what I did.... search for a table that has a listing of all of the colors, and try each until you get something that you like.
最初のルールは、すべての要素が 3 px の境界線の輪郭があるフォーカスを備え、境界線は実線で、醜い 16 進数の文字列は黄色になるように定義します。アプリケーションに対する文字の色*2を決めるのに、私と同じことを試すことができます。すべての色の一覧のある表を検索し、好みの色を見つけるまですべての色を試すことができます→参考まで、アプリケーションに使う色の文字列を選択するのに、私がやったことと言えば・・・すべての色の一覧のある表を検索し、好みの色を見つけるまで各々の色を試しました。
*2"color stringとは「もじの色」ではなく「色を表す 16 進数の文字列」をいう
The second applies to textarea, button, select, and input elements. We could have broken this out into four separate rules or just use one line to assert that these four element types require the same style.
2 番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を 4 個の別々のルールに切り出す→別々のルールに分けることもできる//た//*1でしょう。あるいは、これら 4 個の要素が同じスタイルを必要とするとして、1 行で説明を済ませることもできます→一行にすることもできました。
*1→ここは、上の選択以外に別の選択が二つあることをcould have p.p.で表現しています。直訳調を脱して→
2 番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を 4 個の別々のルールに分けることもできます。あるいは、これら 4 個の要素が同じスタイルを必要とするとして、1 行にすることもできす。
とするのがよいと思います。
The last rule only applies to radio input. Notice that we have already defined an input focus in the second part. In part three we define a focus style for only inputs that are of the type radio.
Note that is more recent versions of Mozilla, you do not have to prefix outline with -moz-.
最後のルールは、ラジオボタンの入力に対してのみ適用されます。入力フォーカスについては2 番目のルールで定義したことはお分かりですね。3 番目のルールでは、ラジオボタン型についての入力にのみ使われるフォーカススタイルを定義します。
Mozilla のごく最近のバージョンでは、-moz- を、outline の前につける必要はないことに注意してください。
Testing your style
Testing your style is most easily done in a webpage. Testing your style is most easily done in a webpage. You can basically copy the above style into the style portion of a html document. For example
スタイルをテストする
スタイルのテストは、ウェブページでごく簡単に行えます。基本的には、上に説明したスタイルを html 文書のスタイルのエリアにコピーできます。 例えば以下のようにです。
Applying your style
Once you are happy with your CSS, you can apply it to the application in two ways. If this CSS style is meant only for one person or profile, you can add it to the userContent.css file. You can find out how to do this here.
If you wish this style to apply to the entire application, which is very common for embedders, you would add these rules to the bottom of the file "ua.css" which is in your res directory next to the application.
スタイルを適用する
自分の CSS に満足したら、それをアプリケーションに適用しましょう。方法は 2 つあります。CSS スタイルが 1 人の人間や、→個人で、また 1 つのプロファイルに使われるならば、userContent.css ファイルへスタイルを追加できます。そのやり方→方法はここを参照してください。
埋め込み方式で普通に行われていることですが、もし、全アプリケーションを通じてスタイルを適用したい場合は、アプリケーションに隣り合っている res ディレクトリの中にある "ua.css" ファイルの下の部分にそのルールを追加してください。
さて、これで作業を完了します。短い文書ですが、間をおいて今見直してみると、細かいところで意味の取り違いや、日本語の表現の未熟さがありました。(-_-;
あと、ここで紹介されたコードは、皆さんのHTMLの部品にもそのまま使えますよね。私も試しましたが、ちょっといいかも。
ところで、修行はまだまだ続くのです(-"-) ・・・・・・・・
原文： 青色表示
訳文： 黒色表示
校正文： 赤色表示
校正対象範囲： 黒色太字表示
*注記、コメント:赤色表示
Using CSS to control focus look and Spatial Navigation
Overview
In Mozilla, CSS controls the look and feel of all elements on the screen. There are many tutorial on CSS and there is always the W3C CSS Specification. After reading through those links, you will know that for every element type you can control the focus style. The important style in our context is that of outline which allows us to draw a border around an element. Note that outlines are very much like border styles but they do not take up any space in the layout of a document. The CSS21 define what properties we support. In addition, we support -moz-outline-radius which allows rounded corners.
フォーカスの見た目と空間ナビゲーションの制御に CSS を使う
概要
Mozilla では、CSS が画面上のすべての要素のルック & フィールを制御します。CSS についての指導書は多数あり、さらに必ず W3C の文書と CSS 仕様書が存在します。 これらのリンクを一通り読むと、すべての要素の型に対して、フォーカスのスタイルを制御できることが分かるはずです。空間ナビゲーションという文脈の中で重要なスタイルは outline で、これで要素の周辺に境界線を引くことが可能になります。留意いただきたいのは、輪郭は境界線のスタイルに良く似ていますが、ドキュメントのレイアウトの中に領域を確保することはありません。CSS21 ではサポートされるプロパティが定義されています。さらに私たちは -moz-outline-radius もサポートしており→さらに -moz-outline-radius もサポートされていて*1、角に丸みを与えることができます。
*1→前文で"we"を省いているので、統一した
CSS Focus Example
Consider the following 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; } |
This focus style was ripped from Aaron Leventhal see bug 53927.
In the above style rules, there are three parts.
CSS フォーカスのサンプル
以下の CSS について考えてみてください:
[CSSコード：同上のため省略]
この フォーカススタイルは Aaron Leventhalから借用しました バグ報告 53927を見てください。
上記のスタイルルールは、3 部に分かれています。
The first part defines that all elements have a focus that has an outline border of 3px, it should be solid, and that ugly hexadecimal string means that it should be yellow. To determine the color string for your application, you can do what I did.... search for a table that has a listing of all of the colors, and try each until you get something that you like.
最初のルールは、すべての要素が 3 px の境界線の輪郭があるフォーカスを備え、境界線は実線で、醜い 16 進数の文字列は黄色になるように定義します。アプリケーションに対する文字の色*2を決めるのに、私と同じことを試すことができます。すべての色の一覧のある表を検索し、好みの色を見つけるまですべての色を試すことができます→参考まで、アプリケーションに使う色の文字列を選択するのに、私がやったことと言えば・・・すべての色の一覧のある表を検索し、好みの色を見つけるまで各々の色を試しました。
*2"color stringとは「もじの色」ではなく「色を表す 16 進数の文字列」をいう
The second applies to textarea, button, select, and input elements. We could have broken this out into four separate rules or just use one line to assert that these four element types require the same style.
2 番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を 4 個の別々のルールに切り出す→別々のルールに分けることもできる//た//*1でしょう。あるいは、これら 4 個の要素が同じスタイルを必要とするとして、1 行で説明を済ませることもできます→一行にすることもできました。
*1→ここは、上の選択以外に別の選択が二つあることをcould have p.p.で表現しています。直訳調を脱して→
2 番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を 4 個の別々のルールに分けることもできます。あるいは、これら 4 個の要素が同じスタイルを必要とするとして、1 行にすることもできす。
とするのがよいと思います。
The last rule only applies to radio input. Notice that we have already defined an input focus in the second part. In part three we define a focus style for only inputs that are of the type radio.
Note that is more recent versions of Mozilla, you do not have to prefix outline with -moz-.
最後のルールは、ラジオボタンの入力に対してのみ適用されます。入力フォーカスについては2 番目のルールで定義したことはお分かりですね。3 番目のルールでは、ラジオボタン型についての入力にのみ使われるフォーカススタイルを定義します。
Mozilla のごく最近のバージョンでは、-moz- を、outline の前につける必要はないことに注意してください。
Testing your style
Testing your style is most easily done in a webpage. Testing your style is most easily done in a webpage. You can basically copy the above style into the style portion of a html document. For example
| <html> <head> <style> put your style rules here to test. </style> </head> <body> Put some html here to test. </body> </html> |
スタイルをテストする
スタイルのテストは、ウェブページでごく簡単に行えます。基本的には、上に説明したスタイルを html 文書のスタイルのエリアにコピーできます。 例えば以下のようにです。
| <html> <head> <style> テスト用のスタイルルールをここに置いてください </style> </head> <body> テスト用の html をここに置いてください </body> </html> |
Applying your style
Once you are happy with your CSS, you can apply it to the application in two ways. If this CSS style is meant only for one person or profile, you can add it to the userContent.css file. You can find out how to do this here.
If you wish this style to apply to the entire application, which is very common for embedders, you would add these rules to the bottom of the file "ua.css" which is in your res directory next to the application.
スタイルを適用する
自分の CSS に満足したら、それをアプリケーションに適用しましょう。方法は 2 つあります。CSS スタイルが 1 人の人間や、→個人で、また 1 つのプロファイルに使われるならば、userContent.css ファイルへスタイルを追加できます。そのやり方→方法はここを参照してください。
埋め込み方式で普通に行われていることですが、もし、全アプリケーションを通じてスタイルを適用したい場合は、アプリケーションに隣り合っている res ディレクトリの中にある "ua.css" ファイルの下の部分にそのルールを追加してください。
さて、これで作業を完了します。短い文書ですが、間をおいて今見直してみると、細かいところで意味の取り違いや、日本語の表現の未熟さがありました。(-_-;
あと、ここで紹介されたコードは、皆さんのHTMLの部品にもそのまま使えますよね。私も試しましたが、ちょっといいかも。
ところで、修行はまだまだ続くのです(-"-) ・・・・・・・・