XUL チュートリアル - ウィンドウ要素の配置

ここでは、要素の位置とサイズのコントロールを見ることにしましょう。

ボックス要素の配置

ここまでで、ボックス内部に、要素を水平方向か垂直方向に配置する方法は分かっています。ボックス内の要素の位置やサイズをもっとコントロールする必要がある場合がしばしばあります。このためには、最初に、ボックスがどのように動作するのか見ておく必要があります。

水平方向に配置されたボックスの内部にボタンが 2 つあるとしましょう。ボタンの水平方向のサイズは、ボタンの内容によって決められます。ラベルが長ければ、ボタンの幅も広くなります。しかしながら、水平方向のボックス内の要素の垂直方向のサイズは、このようにして決められる訳ではありません。ボタンは、ボックスのサイズ全体に適した高さになります。次の例を試してみて下さい。

要素の位置は、そのコンテナのレイアウトスタイルによって決まります。例えば、水平方向のボックス内のボタンの位置は、前にボタンがあるとすればその右側です。要素のサイズは、2 つの要因によって決まります。つまり、その要素にとって必要なサイズとと指定されたサイズです。要素にとって必要なサイズは、その要素の中に何があるのかによって決まります。例えば、ボタンの幅は、ボタン内部にテキストがどれだけあるのかで決まります。

一般的に言えば、要素は、その内容を保持するのに必要な大きさになり、それ以上の大きさになることはありません。テキストボックスなど、要素によっては、使用されるデフォルトサイズをもつものもあります。ボックスは、内部に要素を保持するのに十分な大きさになります。内部に 3 つのボタンのある水平方向のボックスは、3 つのボタンに少量のパディングを加えた幅になります。

下のイメージで、最初の 2 つのボタンは、そのテキストを保持するのに適切なサイズになっています。3 番目のボタンは内容が多いので、もっと大きくなっています。ボタンのあるボックスの幅は、ボタンの幅の合計にボタン間のパディングを加えたものです。ボタンの高さはテキストを保持するのに適切なサイズです。

ウィンドウ内の要素のサイズをもっとコントロールする必要がある場合もあるでしょう。要素のサイズをコントロールできる機能が数多くあります。簡単な方法は、要素に width と height 属性を追加するだけです。これは、HTML の img タグで行なうのとよく似ています。例を以下に示します。

しかし、こうすることは推奨しません。あまりポータブルではなく、テーマによっては適さないからです。もっとよい方法は、スタイルプロパティーを使うことです。これは、HTML のスタイルシートに似た働きをします。以下の CSS プロパティーが使えます。

2 つのプロパティーのどちらかを設定することによって、要素はその幅と高さで作られます。どちらか一方のサイズプロパティーしか指定しなかった場合、他方は必要に応じて計算されます。これらのスタイルプロパティーのサイズは、単位付きの数値で指定します。

サイズは、フレキシブルではない要素の計算をする非常に簡単な方法です。そうした要素は、指定された幅と高さに従うだけです。サイズが指定されなかった場合、要素のデフォルトサイズがその内容に適する大きさになります。フレキシブルな要素の場合、計算は少々トリッキーです。

フレキシブルな要素とは、0 より大きな値に設定された flex 属性をもつもののことです。フレキシブルな要素は使用できるスペースに適したサイズに伸縮することを思い出して下さい。そのデフォルトサイズも、フレキシブルではない要素の場合と同様に計算されます。下の例は、このことを示しています。

ウィンドウは、最初、前のイメージの場合と同様に表示されます。最初の 2 つのボタンは、適切なデフォルト幅のサイズになり、3 番目のボタンは、ラベルが長いので、もっと広くなります。最初のボタンにはフレキシブルが指定されており、3 つの要素はすべてボックス内に置かれています。ボックスの幅は、3 つのボタンすべての合計幅 (イメージでは約 430 ピクセル) に初期設定されます。

ウィンドウの幅を広げると、表示可能なスペースをうめるため、要素はフレキシブルかどうかチェックされます。ボタンだけがフレキシブルな要素ですが、ボタンは広がりません。これは、ボタンのあるボックスがフレキシブルではないからです。フレキシブルではない要素は、利用できるスペースが増えてもサイズが変化することはありません。そのため、ボタンも大きくなることができません。このため、ボタンは広がらないのです。

解決策は、ボックスもフレキシブルにすることです。そうすれば、ウィンドウを広げ余分なスペースが使えるようになると、ボックスは大きくなってそのスペースをうめます。ボックスが広がって余分なスペースが作られたので、ボックス内のフレキシブルなボタンは利用できるスペースに適した大きさになります。このプロセスは、必要に応じて、ネストしたボックスで繰り返されます。

最小サイズと最大サイズを設定する

要素はフレキシブルにしたいが、あるサイズ以上に広がらないようサイズを制約した場合があるかもしれません。あるいは、最小サイズを設定したいかもしれません。これは、以下にリストした CSS プロパティーを設定すれば可能です。

これらのプロパティーは、フレキシブルな要素だけの役に立ちます。例えば、最大の高さを設定することによって、伸縮可能なボタンは、指定された最大の高さまでしか広がることはありません。ウィンドウをリサイズすることはできますが、ボタンは、そのサイズで広がらなくなります。ボタンのあるボックスにも最大の高さを設定していなければ、ボックスは広がり続けます。

2 つのボタンのフレキシビリティーが同じである場合、通常、2 つは余分なスペースを半分づつ分け合います。一方のボタンに最大幅が指定されている場合、もう一方のボタンは広がり続け、残りのスペースすべてを占めることになります。

ボックスに最大幅か最大の高さが指定されている場合、子供はその最大サイズを超えて広がることはできません。ボックスに最小幅か最小の高さが指定されている場合、子供はその最小サイズ以下に縮小することはできません。以下は、幅と高さを設定する例です。

例 1: 最初のボタンは、100 ピクセル (px はピクセルの意味) の幅で表示される。単位を付け加える必要がある。そうしないと、幅は無視される。
例 2: 2 番目のボタンは 10 ピクセルの高さ、100 em (em は現在のフォントで文字 m の幅) の幅で表示される。
例 3: 3 番目のボタンはフレキシブルなので、ボタンのあるボックスのサイズに従って広がる。しかし、ボタンは 50 ピクセル以下に縮小することはない。スペーサーなどその他のフレキシブルなコンポーネントがフレックスの割合を超えた残りのスペースを吸収する。
例 4: 4 番目のボタンはフレキシブルで 2 ex (ex は現在のフォントで文字 x の高さ) 以下の高さになったり 100 ピクセル以上の高さになることはない。
例 5: テキスト入力はフレキシブルであるが、10 em 以上に広がることはない。内部にテキストをもつ要素のサイズを指定する場合、em を使いたいと思うことがしばしばあるかもしれない。この単位は、テキストボックスで役に立つ。フォントが変更され、フォントが非常に大きくなっても、テキストボックスは、適切なサイズのままだからである。
例 6: html 要素は、50 ピクセルの最大幅をもつよう制約されている。内部のテキストは、50 ピクセルを超えると、次の行に折り返される。

こうしたスタイルの幾つかを「ファイル検索」ダイアログに追加しましょう。2 つのボタンは同じサイズで、テキスト入力はウィンドウ全体に適したサイズになるようにします。

<textbox id="find-text" flex="1" style="min-width: 15em;"/>

ここで、テキスト入力はフレキシブルにされています。このため、ユーザーがダイアログのサイズを変更すると、それは伸縮します。これは、ユーザーが長いテキスト文字列を入力したい場合に便利です。また、最小幅は、15 em に設定されています。そのため、テキストボックスは、少なくとも、15 文字を表示します。ユーザーがダイアログを非常に小さいサイズにしても、テキスト入力は、15 em 以下に縮小することはありません。その場合、テキスト入力は、ウィンドウの端を超えて広がっているように描画されます。以下のイメージで、テキスト入力がウィンドウのフルサイズまで広がっている点に注意して下さい。

ボックスのパッキング (Box Packing)

子供要素 2 つからなるボックスがあるとしましょう。子供要素はいずれもフレキシブルではなく、ボックスはフレキシブルであるとします。例えば

ウィンドウをリサイズすると、ボックスはウィンドウサイズに適した大きさになります。ボタンはフレキシブルではないので、その幅は変わりません。その結果、余分なスペースが、ボックス内部で、ウィンドウの右側に表示されます。しかし、お望みであれば、余分なスペースを左側に表示させ、ボタンをウィンドウ内で右寄せすることもできます。

これはボックス内にスペーサーを置くことで可能です。しかし、これを何度も行なわなければならない場合は、混乱の元になります。もっとよい方法は、ボックスに追加属性 pack を使うことです。この属性は、ボックス内の子供要素をパックするよう指示します。水平方向のボックスの場合、これは、子供の水平方向の配置をコントロールします。垂直方向のボックスの場合は、子供の垂直方向の配置をコントロールします。次の値が使えます。

以前の例を変更して、次のように、要素を中央に置くことができます。

ボックスの配置

上の機能は、水平方向のボックスでも垂直方向のボックスでも使えます。水平方向のボックスの場合、flex 属性と pack が、要素の位置とサイズを水平方向でコントロールします。垂直方向のボックスの場合、flex 属性と pack が、要素の位置とサイズを垂直方向でコントロールします。

この振る舞いは、align 属性を使ってコントロールできます。水平方向のボックスの場合、それは、子供の配置を垂直方向でコントロールします。垂直方向のボックスの場合、それは、子供の配置を水平方向でコントロールします。指定できる値は、pack に似ています。

例えば、下の最初のボックスは子供を伸縮させます。これがデフォルトだからです。2 番目のボックスは align 属性が設定されているので、その子供は中央に置かれます。

属性を指定する代わりに、スタイルプロパティー -moz-box-pack と -moz-box-align を使うこともできます。

テキストの切り取りとボタン

潜在的には、ボタンの最大幅以上の大きさのラベルをもつボタン要素を作ることができます。もちろん、解決策は、ボタンのサイズを大きくすることでしょう。しかし、ボタン (とテキスト要素) には、crop と呼ばれる特殊属性があります。これを使うと、テキストが大きくなりすぎた場合、その切り取り方を指定できます。

テキストが切り取られた場合、ボタンに、テキストが切り取られたことを示すエリプシス (...) が表示されます。4 つの値が有効です。

この属性は、実際には、ダイアログが任意のサイズで使われるように設計されている場合にのみ役立ちます。次の例は、この属性の用例を示しています。

ウィンドウを小さくした後、ボタンのテキストの右側がどのように切り取られたかに注意して下さい。

crop 属性は、description 要素や、ラベルに label 属性を使うその他の要素とともに使うこともできます。

(進む) 次は、ボックスモデルの要約と幾つかの追加的な詳細を説明します。