ボックスモデルの詳細

ここまでのセクションで、ボックスモデルについて多くの特徴を見てきました。ここでは、いくつか例を示しながら、その挙動について、さらに詳細に見ていきます。

詳細なレイアウトの調整

min-width や max-height などのスタイルプロパティは、どんな要素にも設定できます。これまでは、例としてボタンやテキスト入力欄に設定していましたが、スペーサーやボックスに設定することも可能です。また、flex 属性も、あらゆる要素に設定することが可能です。

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

<hbox flex="1">
  <button label="Left" style="min-width: 100px;" flex="1"/>
  <spacer flex="1"/>
  <button label="Right" style="min-width: 100px;" flex="1"/>
</hbox>

上の例の 3 つの要素はすべて伸縮可能であるため、リサイズすることが可能です。 2 つのボタンには、100 ピクセルで最小幅が指定されています。このため、ボタンは最小幅よりも小さくなることはありませんが、大きくすることは可能です。このため、ウィンドウ全体は、 2 つのボタンを置くために最低限必要なサイズである 200 ピクセル以上の大きさで表示されることになります。また、伸縮可能に設定することにより追加のスペースが必要になることはないため、 3 つの要素がすべて伸縮可能であっても、それ以上の場所が必要となることはありません。

上記の画像が示すように、2 つのボタンがコンテナとなる要素にあわせて垂直に広がってしまっています。 (コンテナは、この場合は hbox です)。水平ボックスの align 属性を使えば、この挙動は変更できます。また、要素に最大の高さ設定することによっても、縦に広がることを抑止することが可能です。さらに、ボックスに最大の高さが指定されている場合、内部の要素はその制約を受けることを利用して、個々の要素ではなく、ボックス自身に最大の高さを設定することによって抑止することも可能です。ただし、この方法をとる場合は「要素の大きさが事前にわかっている必要がある」という問題をクリアする必要があります。以下の例では、align 属性を設定しています。

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

<hbox flex="1" align="top">
  <button label="Left" style="min-width: 100px;" flex="1"/>
  <spacer flex="1"/>
  <button label="Right" style="min-width: 100px;" flex="1"/>
</hbox>

ボックスモデルのまとめ

一般に、複雑なレイアウトを行なうためには、ネストしたボックスを追加していき、要素のいくつかには最小サイズと最大サイズを指定し、要素によっては伸縮可能を指定をする必要があるでしょう。どんなサイズでも問題なく表示できるインターフェイスが理想です。ボックスモデルは難しいので、自分自身でいろいろあれこれ試行錯誤しながら体得していってください。

以下は、2 種類のボックスの概要です。

水平ボックス

要素を水平方向に順に配置していきます。
伸縮可能性 (flex 属性) は水平方向の伸縮を制御します。
まとめ方 (pack 属性) は、水平方向に余白がある場合の子要素のまとめ位置を制御します。
そろえ方 (align 属性) は、横一行に並んだ各要素の縦位置をどのようにそろえるかを制御します。

垂直ボックス

要素を垂直方向に一列に配置します。
伸縮可能性 (flex 属性) は垂直方向の伸縮を制御します。
まとめ方 (pack 属性) は、垂直方向に余白がある場合の子要素のまとめ位置を制御します。
そろえ方 (align 属性) は、縦一列に並んだ各要素の横位置をどのようにそろえるかを制御します。

ボックスは、テーブルのような HTML 要素の内部を含めて、XUL ファイルのどこにでも置くことができます。ただし、HTML 要素の内部に置いた場合は、その部分のレイアウトは HTML 要素が制御することになります。このため、HTML 要素の内部に置かれたボックスでは flex は期待した通りに正しく動作しなくなります。伸縮可能性 (flex 属性) は、ボックスかボックス型の要素の内部にある要素にとってだけ意味があるということを覚えておいてください。

レイアウトの例

スペーサーを使う

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

<hbox>
  <button label="One"/>
  <spacer style="width: 5px"/>
  <button label="Two"/>
</hbox>

ここでは、スペーサーは、幅を明示的に 5 ピクセルに設定することによって、2 つのボタンの間のセパレータとして使用しています。同様の効果は、CSS の margin プロパティを使って、マージンを設定することでも可能です。

ボタンを中央に置く

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

<hbox pack="center" align="center" flex="1">
  <button label="Look at Me!"/>
  <button label="Push Me!"/>
</hbox>

この例では、内部にボタンが 2 つ置かれている水平ボックスがあって、ボックスには flex 属性が設定されています。また、ボックスには、ボタンを水平方向で中央に置くために pack 属性が設定されており、さらに、ボタンを垂直方向で中央に置くための align 属性も設定されています。このため、ボタンは水平と垂直の両方向で中央に置かれることになります。この例は、垂直ボックスに変更しても、2 番目のボタンが最初のボタンの隣りではなく下側に来ることを除けば、同様に動作します。

テキスト検索ダイアログ

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

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="findtext" title="Find Text" orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <vbox flex="3">
    <label control="t1" value="Search Text:"/>
    <textbox id="t1" style="min-width: 100px;" flex="1"/>
  </vbox>

  <vbox style="min-width: 150px;" flex="1" align="start">
    <checkbox id="c1" label="Ignore Case"/>
    <spacer flex="1" style="max-height: 30px;"/>
    <button label="Find"/>
  </vbox>

</window>

この例では、2 つの垂直ボックスが作られています。 1 つはテキスト入力欄、もう 1 つはチェックボックスとボタンのためのものです。左のボックスは、右のボックスの 3 倍の伸縮性を持っています。そのため、ウィンドウのサイズが増えた場合、左のボックスは、常に右の 3 倍の割合で増えたスペースを受け取ります。また、右のボックスは、150 ピクセルの最小幅が設定されています。

テキスト入力欄は伸縮可能です。そのため、ウィンドウのサイズが変更されると、テキスト入力欄のサイズも変わります。テキスト入力欄にも、100 ピクセルの最小幅が設定されています。チェックボックスは、右のボックスにラベルとともに表示されます。チェックボックスのすぐ下には、スペーサーがあります。スペーサーは伸縮しますが、30 ピクセル以上になることはありません。このため、チェックボックスと Find ボタンは、30 ピクセル以内で間隔をあけて配置されます。

2 番目のボックスは、align 属性により、開始位置 (start) で、そろえる指定になっています。これによって、子要素は左端にそろえられます。この指定をしなかった場合、デフォルト値である stretch が指定されたことになり、子要素は水平方向いっぱいに伸張 (stretch)することになります。ここでは、Find ボタンのサイズは変更したくないため、align 属性を設定する必要があります。

次は、さらに特定用途向けのボックス型である、グループボックスについて学びます。

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