Skip to main content

Visit Mozilla.org

XUL Tutorial:Adding Style Sheets

出典: MDC

« 前 次 »


これまでに作成してきた要素では、外観についてはほとんど変更しませんでした。 XUL では、要素の外観をカスタマイズするために CSS (Cascading Style Sheets) を使用することになります。

目次

[編集] スタイルシート

スタイルシートとは、要素のスタイル情報を含んだファイルのことです。 スタイルシートは、もともとは HTML 要素のために設計されたものですが、 XUL 要素を含めて、任意の XML に適用することが可能です。 スタイルシートには、フォント (font)、色 (color)、境界線 (border)、要素の大きさといった情報が含まれています。

Mozilla では、特に指定が無い場合、各 XUL ウィンドウにデフォルトのスタイルシートを適用します。 多くの場合は、デフォルトのままでも十分ですが、 場合によっては、カスタムスタイルシートを使用したい状況もあるかもしれません。 この場合、通常は、それぞれの XUL ファイルに対して、1 つずつスタイルシートを関連付けることになります。

スタイルシートは、どこでも好きな場所に置くことができます。 例えば、リモートに格納された XUL ファイルを、HTTP の URL でアクセスする場合は、 スタイルシートも同様にリモートに置くことが可能です。 また、chrome システムの一部としてインストールするために XUL パッケージを作成した場合には、2 つの選択肢があります。 1 つめは、XUL ファイルと同じディレクトリにスタイルシートを格納する方法ですが、 この方法には、そのアプリケーションをテーマに対応させることができなくなるという短所があります。 このため、2 つめの方法では、スタイルシートをテーマの一部として含めておくようにします。

ここで、ファイル検索ダイアログをテーマ対応にして構築する場合のスタイルシートの置き場所ついて検討してみましょう。 ファイル検索ダイアログは、chrome://findfile/content/findfile.xul というURLで参照することができるため、 スタイルシートファイルも、chrome://findfile/skin/findfile.css でアクセス可能な場所に保存しておくのが良いでしょう。

なお、スタイルシートは、これまで見てきた XUL の例の中でも既に使われていました。 これらの例の全ての XUL ファイルの 2行目は、いつも下記の内容だったはずです。 

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

この行は、chrome://global/skin/ で提供されているスタイルを使用するべきであることを指示しています。 Mozilla では、これは global.css ファイルが指定されたと解釈され、 このファイルに含まれる XUL 要素に対するデフォルトのスタイル情報が読み込まれます。 このスタイルシートでは、たくさんのフォントや、色、境界線の指定を、要素の外観をより良くするために適用しているため、 この行を取り去った場合も機能的には動作しますが、見た目はかなり素気ないものになるはずです。

[編集] スタイルを変更する

しかしながら、デフォルトの要素の外観が、望むものではない場合もあると思います。 この場合は、独自のスタイルシートを追加する必要があります。 これまでは、要素上の style 属性を利用して、スタイルを適用してきました。 この方法でも動作はしますが、実際には最良の方法ではありません。 より優れた方法をとる場合は、個別にスタイルシートを作成します。 これによって、外観の変更がスキンを変更するだけで容易に行えるようになります。

しかしながら、限定的ではあるものの、style 属性を使用することが容認される場合もあります。 具体的には、スクリプトからスタイルを変更する場合や、レイアウトの変更が要素の意味にも影響するような場合です。 (といっても、やはり可能な限りこの属性の使用は回避するべきだと思います)。

なお、インストールされているファイルに対しては、マニフェストファイルを作るか、修正してからでないと、スキンをインストールすることはできません。

[編集] ファイル検索ダイアログの例

それでは、ファイル検索ダイアログを、別のスタイルファイルからスタイルを設定するように変更してみましょう。 まず、以下に findfile.xul で変更した行を示します。 

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="findfile.css" type="text/css"?>
  ...
<spacer class="titlespace"/>
  <groupbox orient="horizontal">
    <caption label="Search Criteria"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Name"/>
          <menuitem label="Size"/>
          <menuitem label="Date Modified"/>
        </menupopup>
      </menulist>
      <spacer class="springspace"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Is"/>
          <menuitem label="Is Not"/>
        </menupopup>
      </menulist>

      <spacer class="springspace"/>
      <menulist id="find-text" flex="1"
          editable="true"
          datasources="file:///mozilla/recents.rdf"
          ref="http://www.xulplanet.com/rdf/recent/all"/>
  ...
<spacer class="titlespace"/>
<hbox>

  <progressmeter id="progmeter" value="50%" style="display:none;"/>

ここでは、新しい xml-stylesheet の行が、スタイルシートをインポートするために使用されています。 インポートするファイルには、これまで直接 XUL ファイルの中に記述していたスタイルが含まれることになります。 同様の指定を繰り返すことで、任意の数のスタイルシートを取り込むことが可能です。 なお、この例ではスタイルシートは findfile.xul と同じディレクトリに置かれています。

また、上記のコードでは、これまで置かれていたいくつかのスタイルを削除しています。 ただし、progressmeter の display プロパティについては、 スクリプトから変更されるため、削除せずに残してあります。 このようにしても、プログレスバーを初期状態から表示させたい状況は通常考えられないため、この実装が問題になることは無いはずです。 といっても、実際に必要になった場合、個別のスタイルシートの方に置くようにしても構いません。 また、スペーサーには、スタイルシートから参照できるように、class を追加しています。

さらに、スタイルシートも新たに作成する必要があります。 とりあえずは、XUL ファイルと同じディレクトリに findfile.css というファイル名で作成することにします。 (通常、スタイルシートは、別のスキンのための場所に置きます)。 そして、このファイルには、以下に示すスタイルの宣言を加えます。 

#find-text {
  min-width: 15em;
}

#progmeter {
  margin: 4px;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

上記のスタイルで指定している内容自体は、これまでと同等のものにすぎませんが、 これによって、第三者がファイル検索ダイアログの外観を変更するような場合には、 スタイル宣言の追加と変更のために、このファイルを修正するかスキンを変更するだけで済むため、より簡単な作業で済むはずです。 なお、利用者がインターファイスのスキンを変更した場合は、 これらのファイルはデフォルトで適用されるディレクトリとは別の場所に置かれたものが使用されます。

[編集] スタイルシートをインポートする

XUL から、スタイルシートを使用するためにインポートする方法は、少し前にも説明していますが、 以下の例で示すような記述になります。 

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

これは、ブックマークウィンドウ用 XUL ファイルの最初の方に記述されている内容と、おそらくは同じです。 この指定によって、bookmark.css というブックマーク用のスタイルシートをインポートします。 ここでは特定のファイル名を指定していませんが、 Mozilla のスキンシステムは十分洗練されているので、適切なスタイルシートが自動的に選択されます。 なお、同様の指定は、グローバルスタイルシートファイル (chrome://global/skin) のときにも行っています。

また、スタイルシートは CSS の import ディレクティブを使用することで、 他のスタイルシートからインポートすることも可能です。 このため、通常は、各 XUL ファイルからは、それぞれに関連付けられた 1 つのスタイルシートだけをインポートし、 共通のグローバルスタイルシートは、そのスタイルシートからインポートするようにします。 これは、以下に示すコードによって行なうことが可能です。 これによって、XUL ファイルからグローバルスタイルシートをインポートする指定を削除できます。 

XUL からのスタイルのインポート:
<?xml-stylesheet href="chrome://global/skin/"  type="text/css"?>

CSS からのスタイルのインポート:
@import url(chrome://global/skin/);

2 つめの構文の方が、XUL ファイル自体と依存関係があるファイル数を減少させることができるので好まれています。

それでは、findfile.xul から、グローバルスタイルシートのインポートを削除して findfile.css に追加してください。

全ての要素は CSS を使うことでスタイルを設定することが可能です。 このとき、スタイルを設定したい要素を選択するためにセレクタ (selector) を使用します。 (セレクタとは、スタイルルールの中括弧 "{" の前の部分のことです)。 以下に、有効なセレクタの一部を一覧にまとめたものを示します。

button 
全ての button 要素に適用されます。
#special-button 
id が special-button である要素に適用されます。
.bigbuttons 
class が bigbuttons である、全ての要素に適用されます。
button.bigbuttons 
class が bigbuttons である、全ての button 要素に適用されます。
toolbar > button 
toolbar 要素の中に直接置かれた、全ての button 要素に適用されます。
toolbar > button.bigbuttons 
toolbar 要素の中に直接置かれた、class が bigbuttons である、全ての button 要素に適用されます。
button.bigbuttons:hover 
class が bigbuttons である、全ての button 要素が該当しますが、実際にスタイルが適用されるのはマウスがその要素の上にあるときのみです。
button#special-button:active 
id が special-button である要素が該当しますが、適用されるのはアクティブ (その要素上でマウスボタンが押されている状態) のときのみです。
box[orient="horizontal"] 
orient 属性が horizontal に設定されている、全ての box 要素に適用されます。

これらのルールは、必要に応じて任意に組み合わせることが可能です。 要素のスタイル付けを指定する際には、いつも可能な限り正確な指定を行うことを心がけてください。 そのほうが効率的ですし、間違った対象にスタイルを付けてしまう可能性も減らすことができるはずです。

ここまでのファイル検索ダイアログの例 : ソース 表示

次のセクションでは、ツリーにスタイルを適用する方法を見ていきます。

« 前 次 »

"http://developer.mozilla.org/ja/docs/XUL_Tutorial:Adding_Style_Sheets" より作成