ラベルと画像を追加する

このセクションでは、ウィンドウにラベルと画像を追加する方法について説明します。また、ラベルとボタン要素をグループ化する方法にも触れます。

テキスト要素

XUL では、タグで囲まずに直接 XUL ファイルに記述しても、そのテキストが表示されることはありません。テキストの表示は、以下で説明する 2 つの要素を使用することで可能になります。

label 要素

ウィンドウにテキストを表示させるための、最も基本的な方法は、label 要素を使用することになります。ボタンのような制御用の要素のそばに説明ラベルを置きたい場合には、この要素を使用する必要があります。以下に例を示します。

<label value="This is some text"/>

value 属性は、表示したいテキストを指定するのに使用します。 value 属性でテキストを指定したとき、テキストは途中で改行されないため、テキストの全てが単一の行として表示されることになります。このため、この構文はラベルのためによく利用されます。

テキストの自動改行が必要な場合は、以下の例のようにテキストを開始タグと終了タグの間に置けば可能になります。

var el = env.locale; 例 2 :

<label>This is some longer text that will wrap onto several lines.</label>

HTML と同様に、改行と余分な空白文字は、1 つの空白に縮められます。後のセクションで要素の幅を制限する方法を説明する予定です。幅の制限を行った場合、自動改行はより起こりやすくなります。

control 属性

ラベルに、関連するコントロールを指定するために、control 属性が使用できます。関連を設定すると、利用者が関連するラベルをクリックしたとき、対応するコントロールがフォーカスされるようになります。また、この関連付けは、アクセシビリティの点からも重要です。なぜならば、画面の読み上げ機能は、利用者がタブ操作で移動した制御要素のラベルを読み上げることになるからです。この control 属性の値には、フォーカスしたい要素の id を設定します。

var el = env.locale; 例 3 : ソース表示

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

上の例では、ラベルのクリックによって、ボタンがフォーカスされるはずです。

description 要素

特定の制御要素と関連しない説明用のテキストには、description タグが利用できます。この要素は、例えばダイアログの先頭や、制御要素のグループに対する情報を示すために適しています。 label と同様に、単一行の場合は value 属性を利用でき、長いテキストブロックの場合には description の開始と終了タグの間にテキストコンテントを置くことが可能です。通常、属性を使用する構文は label に対してよく利用され、テキストコンテントの構文は description に対してよく利用されています。

var el = env.locale; 例 4 : ソース表示

<description>
  This longer section of text is displayed.
</description>

内部的には label 要素と description 要素は同じものです。ですが label 要素は、テキスト入力欄の様なコントロールのラベルとして利用することが意図されています。このため control 属性は label に対してのみサポートされています。また description 要素は、その他の、ダイアログボックス冒頭の説明といった、記述的なテキストのために利用することが意図されています。

画像要素

HTML と同様、XUL にも、ウィンドウに画像を表示するための要素があります。この要素は、文字どおり image と名付けられています。タグ名が HTML と異なっていることに注意してください (img ではなく image です)。画像ファイルの URL を指定するために、 src 属性が使用できます。以下に例を示します。

<image src="images/banner.jpg"/>

この構文を使用しても良いのですが、より良い方法として、画像の URL を設定するためにスタイルシートを使用することも可能です。スタイルシートの使い方については、後のセクションで触れる予定ですが、完全を期すため、今回も例を示しておくことにします。画像の URL を指定するには、CSS プロパティの list-style-image が使用可能です。以下に例を示します。

XUL:
 <image id="image1"/>
 <image id="search"/>

Style Sheet:
 #image1 {
   list-style-image: url("chrome://findfile/skin/banner.jpg");
 }

 #search {
   list-style-image: url("chrome://findfile/skin/images/search.png");
 }

画像は、 chrome ディレクトリに置かれた findfile パッケージのための skin の中から呼び出されます。スキンに応じて画像を変えるために、通常、画像は skin ディレクトリに置いておきます。

次のセクションでは、ウィンドウに入力コントロールを追加する方法を学びます。

« 前のページ次のページ »