スタイルシートの構文

Qt スタイルシートの用語や構文規則は、HTML の CSS とほぼ同じです。すでに CSS をご存知の方は、このセクションをざっと目を通すだけで十分でしょう。

スタイル規則

スタイルシートは、一連のスタイル規則で構成されています。スタイル規則は、セレクタと宣言から成り立っています。セレクタは、その規則がどのウィジェットに適用されるかを指定し、宣言は、そのウィジェットにどのプロパティを設定するかを指定します。例えば：

QPushButton { color: red }

上記のスタイルルールでは、QPushButton がセレクタであり、{ color: red } が宣言です。このルールは、QPushButton およびそのサブクラス（例：MyPushButton ）の文字色（フォアグラウンドカラー）を赤にするよう指定しています。

Qt スタイルシートでは、一般的に大文字と小文字は区別されません（つまり、color 、Color 、COLOR 、およびcOloR はすべて同じプロパティを指します）。唯一の例外は、クラス名（object names ）および Qt プロパティ名であり、これらは大文字と小文字が区別されます。

同じ宣言に対して、コンマ（, ）で区切ることで、複数のセレクタを指定することができます。例えば、次のルール

QPushButton, QLineEdit, QComboBox { color: red }

は、次の3つのルールの連鎖と同等です：

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

スタイルルールの宣言部分は、 property: value ペアのリストであり、中括弧（{} ）で囲まれ、セミコロンで区切られています。例えば：

QPushButton { color: red; background-color: white }

Qt Widgetsが提供するプロパティの一覧については、以下の「プロパティの一覧」セクションを参照してください。

セレクタの種類

これまでの例では、最も単純なタイプのセレクタである「タイプセレクタ」を使用してきました。Qt Style Sheets は、CSS2 で定義されているすべてのセレクタをサポートしています。以下の表に、最も有用なセレクタの種類をまとめました。

サブコントロール

複雑なウィジェットのスタイル設定を行うには、QComboBox のドロップダウンボタンやQSpinBox の上下矢印など、そのウィジェットのサブコントロールにアクセスする必要があります。セレクタにはサブコントロールを含めることができ、これによりルールの適用を特定のウィジェットのサブコントロールに限定することが可能です。例：

QComboBox::drop-down { image: url(dropdown.png) }

上記のルールは、すべてのQComboBoxのドロップダウンボタンにスタイルを適用します。二重コロン（:: ）の構文はCSS3の疑似要素を彷彿とさせますが、Qtのサブコントロールは概念的にこれらとは異なり、カスケードのセマンティクスも異なります。

サブコントロールは常に、別の要素（参照要素）を基準として配置されます。この参照要素は、ウィジェット自身でも、別のサブコントロールでもかまいません。例えば、QComboBox の::drop-downは、デフォルトではQComboBox のパディング矩形の右上隅に配置されます。::drop-downは、デフォルトでは、::drop-downサブコントロールの「Contents」矩形の中心に配置されます。ウィジェットのスタイル設定に使用するサブコントロールとそのデフォルトの位置については、以下の「スタイル設定可能なウィジェット一覧」を参照してください。

使用する原点矩形は、subcontrol-originプロパティを使用して変更できます。たとえば、ドロップダウンをデフォルトのパディング矩形ではなく、QComboBox のマージン矩形に配置したい場合は、次のように指定します:

QComboBox {
    margin-right: 20px;
}
QComboBox::drop-down {
    subcontrol-origin: margin;
}

マージン矩形内でのドロップダウンの配置は、subcontrol-positionプロパティを使用して変更します。

widthおよびheightプロパティを使用すると、サブコントロールのサイズを制御できます。画像を設定すると、暗黙的にサブコントロールのサイズが設定される点に注意してください。

相対配置（position: relative）を使用すると、サブコントロールの位置を初期位置からオフセットさせることができます。たとえば、QComboBox のドロップダウンボタンを押した際、内部の矢印をオフセットさせて「押された」効果を出したい場合があります。これを実現するには、次のように指定します：

QComboBox::down-arrow {
    image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
    position: relative;
    top: 1px; left: 1px;
}

絶対配置方式（position: absolute）では、参照要素を基準としてサブコントロールの位置やサイズを変更することができます。

位置が決まると、それらはウィジェットと同様に扱われ、ボックスモデルを使用してスタイルを設定できます。

サポートされているサブコントロールのリストについては、以下の「サブコントロールのリスト」を参照してください。また、実際の例については、「QPushButton のメニューインジケータ・サブコントロールのカスタマイズ」を参照してください。

疑似状態

セレクタには、ウィジェットの状態に基づいてルールの適用を制限することを示す疑似状態を含めることができます。疑似状態はセレクタの末尾に、コロン（: ）を挟んで記述されます。たとえば、次のルールは、QPushButton にマウスをホバーしたときに適用されます：

QPushButton:hover { color: white }

疑似状態は、感嘆符演算子を使用して否定することができます。たとえば、次のルールは、マウスが `QRadioButton` の上にホバーしていない場合に適用されます：

QRadioButton:!hover { color: red }

疑似状態は連鎖させることができ、その場合は論理積（AND）が暗黙的に適用されます。たとえば、マウスがチェックされたQCheckBox の上にホバーしている場合には、次のルールが適用されます：

QCheckBox:hover:checked { color: white }

擬似状態の連鎖には、否定された擬似状態が含まれることがあります。例えば、押されていないQPushButton にマウスをホバーさせた場合には、次のルールが適用されます：

QPushButton:hover:!pressed { color: blue; }

必要に応じて、論理ORはコンマ演算子を使用して表現できます：

QCheckBox:hover, QCheckBox:checked { color: white }

疑似状態は、サブコントロールと組み合わせて使用することができます。例えば：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

Qt Widgetsが提供する疑似状態の一覧については、以下の「疑似状態の一覧」のセクションを参照してください。

競合の解決

複数のスタイルルールが同じプロパティに対して異なる値を指定している場合、競合が発生します。次のスタイルシートを考えてみましょう：

QPushButton#okButton { color: gray }
QPushButton { color: red }

どちらのルールも、okButton という名前のQPushButton インスタンスに一致し、color プロパティに関して競合が発生しています。この競合を解決するには、セレクタの特異性を考慮する必要があります。上記の例では、QPushButton#okButton はQPushButton よりも特異性が高いとみなされます。これは、 が（通常）クラスのすべてのインスタンスではなく、単一のオブジェクトを指すためです。

同様に、疑似状態を含むセレクタは、疑似状態を指定しないセレクタよりも特異度が高くなります。したがって、次のスタイルシートでは、QPushButton 要素に対して、マウスがホバーしている間はテキストを白に、それ以外の場合は赤に設定しています：

QPushButton:hover { color: white }
QPushButton { color: red }

ここで、少しトリッキーな例を挙げます：

QPushButton:hover { color: white }
QPushButton:enabled { color: red }

ここでは、両方のセレクタの特異度が同じであるため、ボタンが有効な状態でマウスをホバーさせると、2番目のルールが優先されます。その場合にテキストを白にしたい場合は、次のようにルールの順序を変更すればよいです：

QPushButton:enabled { color: red }
QPushButton:hover { color: white }

あるいは、最初のルールの特異性を高めることもできます：

QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }

同様の問題は、型セレクタに関連して発生します。次の例を考えてみましょう：

QPushButton { color: red }
QAbstractButton { color: gray }

どちらのルールもQPushButton のインスタンスに適用されます（QPushButton はQAbstractButton を継承しているため）。その結果、colorプロパティに関して競合が生じます。QPushButton はQAbstractButton を継承しているため、QPushButton がQAbstractButton よりも特異度が高いと推測しがちです。しかし、スタイルシートの計算においては、すべての型セレクタは同じ特異度を持ち、最後に現れるルールが優先されます。 つまり、QPushButtonを含むすべてのQAbstractButtonに対して、色は gray に設定されます。もし本当にQPushButtonのテキストを赤くしたい場合は、ルールの順序を変更すればよいのです。

ルールの特異性を決定するにあたり、QtスタイルシートはCSS2仕様に準拠しています：

セレクタの特異度は次のように計算されます：

• セレクタ内の ID 属性の数を数える (= a)
• セレクタ内のその他の属性および疑似クラスの数を数える (= b)
• セレクタ内の要素名の数を数える (= c)
• 疑似要素 [すなわち、サブコントロール] は無視する。

これら3つの数値 a-b-c を（基数の大きい数体系で）連結することで、特異度が得られます。

例をいくつか挙げると：

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

カスケード

スタイルシートは、QApplication 、親ウィジェット、および子ウィジェットに設定できます。任意のウィジェットの有効なスタイルシートは、そのウィジェットの祖先（親、祖父母など）に設定されたスタイルシートと、QApplication に設定されたスタイルシートを統合することで得られます。

競合が発生した場合、競合するルールの特異度にかかわらず、ウィジェット自身のスタイルシートは、継承されたスタイルシートよりも常に優先されます。同様に、親ウィジェットのスタイルシートは、祖父母ウィジェットのスタイルシートよりも優先されます。

この仕組みの結果として、ウィジェットにスタイルルールを設定すると、そのルールは、先祖ウィジェットのスタイルシートや `QApplication ` スタイルシートで指定された他のルールよりも自動的に優先されます。次の例を考えてみましょう。まず、`QApplication` にスタイルシートを設定します：

qApp->setStyleSheet("QPushButton { color: white }");

次に、QPushButton オブジェクトにスタイルシートを設定します：

myPushButton->setStyleSheet("* { color: blue }");

QPushButton に適用されたスタイルシートにより、アプリケーション全体のスタイルシートで定義されたより具体的なルールにもかかわらず、QPushButton （およびその子ウィジェット）のテキストは青色になります。

もし次のように記述していたとしても、結果は同じだったでしょう。

myPushButton->setStyleSheet("color: blue");

と記述した場合でも結果は同じだったでしょう。ただし、QPushButton に子要素があった場合（その可能性は低いですが）、そのスタイルシートは子要素には影響を及ぼさないでしょう。

スタイルシートのカスケードは複雑なトピックです。詳細については、CSS2仕様書を参照してください。なお、Qtでは現在!important が実装されていないことに注意してください。

継承

従来のCSSでは、項目のフォントや色が明示的に設定されていない場合、それらは親から自動的に継承されます。デフォルトでは、Qtスタイルシートを使用する場合、ウィジェットは親ウィジェットからフォントや色の設定を自動的に継承しません。

例えば、QGroupBox 内の `QPushButton ` を考えてみましょう：

qApp->setStyleSheet("QGroupBox { color: red; } ");

このQPushButton には明示的な色が設定されていません。そのため、親であるQGroupBox の色を継承するのではなく、システム色が適用されます。QGroupBox とその子要素の色を設定したい場合は、次のように記述します：

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

対照的に、QWidget::setFont() やQWidget::setPalette() を使用してフォントやパレットを設定すると、その設定は子ウィジェットにも反映されます。

フォントやパレットを子ウィジェットに継承させたい場合は、次のようにQt::AA_UseStyleSheetPropagationInWidgetStyles フラグを設定します：

使用方法：

QCoreApplication::setAttribute(Qt::AA_UseStyleSheetPropagationInWidgetStyles, true);

ウィジェットスタイルのフォントおよびパレットの継承が有効になっている場合、Qtスタイルシートを通じて行われたフォントおよびパレットの変更は、ユーザーがスタイルシートの対象となるすべてのQt Widgetsに対して、対応するQWidget::setPalette()およびQWidget::setFont()メソッドを手動で呼び出したのと同じ動作をします。

• スタイルシートによる変更は伝播されます。変更が行われた時点で、そのスタイルシートに一致するすべてのウィジェットに対して一度だけ適用されます。
• QWidget::setPalette() またはQWidget::setFont() の呼び出しによって行われた変更は継承されます。これらは、それぞれのブラシやフォントが明示的に設定されていない既存および将来の子ウィジェットすべてに継承されます。

C++ 名前空間内のウィジェット

タイプセレクタを使用すると、特定のタイプのウィジェットにスタイルを適用できます。例えば、

classMyPushButton :publicQPushButton {
    // ...
};

// ...
voidsomeFunction()
{
    qApp->setStyleSheet("MyPushButton { background: yellow; }");
   //...

Qt Style Sheet は、ウィジェットの QObject::className() を使用して、Type Selector を適用するタイミングを決定します。カスタムウィジェットが名前空間内にある場合、QObject::className() は <NAMESPACE>::<CLASSNAME> を返します。これは、サブコントロールの構文と競合します。 この問題を解決するには、名前空間内のウィジェットに対してタイプセレクタを使用する際、:: を-- に置き換える必要があります。例えば、

namespacens {
    classMyPushButton :publicQPushButton {
        // ...
    };
}

// ...
voidsomeMethod()
{
    qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");
   //...

QObjectのプロパティの設定

バージョン4.3以降では、設計可能なQ_PROPERTY はすべて、qproperty-<プロパティ名>という構文を使用して設定できます。

例えば、

MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }

プロパティがQ_ENUM で宣言された列挙型を参照している場合、その定数は数値ではなく名前で参照する必要があります。