本日は、昨日訳しました空間ナビゲーションのリンク先の文書である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 仕様書が存在します。 これらのリンクを一通り読むと、すべての要素の型に対して、フォーカスのスタイルを制御できるようになります。コンテキストで重要なスタイルは、輪郭のスタイルであり、それによって要素の周囲に境界線を引くことが可能になります。留意いただきたいのは、輪郭は境界線のスタイルに良く似ていますが、ドキュメントのレイアウトの中に領域を確保することはありません。CSS21 は サポートされるプロパティーを定義します。さらに私たちは -moz-outline-radius をサポートし、これによって、コーナに丸みを与える対応が可能になります。
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 について考えてみてください:
→コードは省略します。冒頭のリンクを見てください
この フォーカススタイルは Aaron Leventhalから借用しました バグ報告 53927を見てください。
上記のスタイルルールは、３部に分かれています。
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 進数の文字列は黄色になるように定義します。アプリケーションに対する文字の色を決めるのに、私と同じことを試すことができます。すべての色の一覧 のある表を検索し、好みの色を見つけるまですべての色を試すことができます。
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.
２番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を４個の別々のルールに切り出すこともできるでしょう。あるいは、これら４個の要素が同じスタイルを必要とするとして、１行で説明を済ませることもできます
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 *1is more recent versions of Mozilla, you do not have to prefix outline with -moz-.
*1→"is"では無く"in"が正しいようです
最後のルールは、ラジオボタンの入力に対してのみ適用されます。入力フォーカスについては２番目のルールで定義したことはお分かりですね。３番目のルールでは、ラジオボタン型についての入力にのみ使われるフォーカススタイルを定義します。
Mozilla のごく最近のバージョンでは、-moz- を、outline の前につける必要はないことに注意してください。
Testing your style
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 に満足すれば、それをアプリケーションに適用する方法は２つあります。CSS スタイルが１人の人間や、１つのプロファイルに使われるならば、userContent.css ファイルへスタイルを追加できます。そのやり方はここを参照してください。
埋め込み方式で普通に行われていることですが、もし、全アプリケーションを通じてスタイルを適用することを望むならば、アプリケーションに隣り合っている res ディレクトリの中にある "ua.css" ファイルの下の部分にそのルールを追加してください。
とりあえずこれで完了です。全和訳文です。
そそくさと訳しましたので、至らない部分があるかもしれません。しかし、すくに草稿を公開したいと思います。
それではみなさん！(^-^)/~~~~ ごきげんよう。
それでは、早速ですが、おもむろに翻訳作業にかかります。
原文： 青色表示
訳文： 黒色表示
注記： 赤色表示
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 仕様書が存在します。 これらのリンクを一通り読むと、すべての要素の型に対して、フォーカスのスタイルを制御できるようになります。コンテキストで重要なスタイルは、輪郭のスタイルであり、それによって要素の周囲に境界線を引くことが可能になります。留意いただきたいのは、輪郭は境界線のスタイルに良く似ていますが、ドキュメントのレイアウトの中に領域を確保することはありません。CSS21 は サポートされるプロパティーを定義します。さらに私たちは -moz-outline-radius をサポートし、これによって、コーナに丸みを与える対応が可能になります。
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 について考えてみてください:
→コードは省略します。冒頭のリンクを見てください
この フォーカススタイルは Aaron Leventhalから借用しました バグ報告 53927を見てください。
上記のスタイルルールは、３部に分かれています。
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 進数の文字列は黄色になるように定義します。アプリケーションに対する文字の色を決めるのに、私と同じことを試すことができます。すべての色の一覧 のある表を検索し、好みの色を見つけるまですべての色を試すことができます。
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.
２番目は、テキストエリア、ボタン、選択、入力要素に適用されます。これらの要素を４個の別々のルールに切り出すこともできるでしょう。あるいは、これら４個の要素が同じスタイルを必要とするとして、１行で説明を済ませることもできます
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 *1is more recent versions of Mozilla, you do not have to prefix outline with -moz-.
*1→"is"では無く"in"が正しいようです
最後のルールは、ラジオボタンの入力に対してのみ適用されます。入力フォーカスについては２番目のルールで定義したことはお分かりですね。３番目のルールでは、ラジオボタン型についての入力にのみ使われるフォーカススタイルを定義します。
Mozilla のごく最近のバージョンでは、-moz- を、outline の前につける必要はないことに注意してください。
Testing your style
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 に満足すれば、それをアプリケーションに適用する方法は２つあります。CSS スタイルが１人の人間や、１つのプロファイルに使われるならば、userContent.css ファイルへスタイルを追加できます。そのやり方はここを参照してください。
埋め込み方式で普通に行われていることですが、もし、全アプリケーションを通じてスタイルを適用することを望むならば、アプリケーションに隣り合っている res ディレクトリの中にある "ua.css" ファイルの下の部分にそのルールを追加してください。
とりあえずこれで完了です。全和訳文です。
そそくさと訳しましたので、至らない部分があるかもしれません。しかし、すくに草稿を公開したいと思います。
それではみなさん！(^-^)/~~~~ ごきげんよう。