Qt スタイルシートの例

ここでは、Qt スタイルシートの使用を始めるための例をいくつか見ていきます。

スタイルシートの使用方法

前景色と背景色のカスタマイズ

まず、アプリケーション内のすべてのQLineEditの背景色を黄色に設定してみましょう。これは次のように実現できます:

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

特定のダイアログの子（または孫、ひ孫）であるQLineEditにのみこのプロパティを適用したい場合は、次のように記述します：

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

特定の1つのQLineEdit にのみこのプロパティを適用したい場合は、QObject::setObjectName()を使用して名前を付け、IDセレクタを使ってそれを参照します：

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

あるいは、セレクタを省略して、QLineEdit に直接background-colorプロパティを設定することもできます：

nameEdit->setStyleSheet("background-color: yellow");

十分なコントラストを確保するために、テキストの色も適切に指定する必要があります：

nameEdit->setStyleSheet("color: blue; background-color: yellow");

選択されたテキストに使用される色も変更しておくとよいでしょう：

nameEdit->setStyleSheet("color: blue;"
                        "background-color: yellow;"
                        "selection-color: yellow;"
                        "selection-background-color: blue;");

動的プロパティを使用したカスタマイズ

必須項目を含むフォームを表示する必要がある場面は数多くあります。ユーザーにそのフィールドが必須であることを示すための、効果的（ただし美観的には疑問が残る）な解決策の一つは、それらのフィールドの背景色を黄色にすることです。Qtスタイルシートを使用すれば、これは非常に簡単に実装できます。まず、アプリケーション全体で以下のスタイルシートを使用します：

*[mandatoryField="true"] { background-color: yellow }

これにより、mandatoryField というQtプロパティがtrueに設定されているすべてのウィジェットの背景色が黄色になります。

次に、各必須フィールドのウィジェットに対して、その場でmandatoryField プロパティを作成し、trueに設定します。例えば：

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);

QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);

QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);

ボックスモデルを使用した QPushButton のカスタマイズ

今回は、赤いQPushButton を作成する方法をご紹介します。このQPushButton は、おそらく非常に破壊的なコードに接続されることになるでしょう。

まず、次のようなスタイルシートを使いたくなるかもしれません：

QPushButton#evilButton { background-color: red }

しかし、その結果、境界線のない、味気ないフラットなボタンになってしまいます：

平らな赤いボタン

何が起きたかというと、次のようなことです:

ネイティブのスタイルだけでは満たせない要求をしてしまったのです（例えば、Windowsのネイティブテーマエンジンでは、ボタンの背景色を指定することができません）。
そのため、ボタンはスタイルシートを使用してレンダリングされます。
border-widthやborder-style の値を指定していないため、デフォルトで幅 0 ピクセル、スタイルが `none` の枠線が表示されます。

枠線を指定して、この状況を改善してみましょう：

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-color: beige;
}

ベージュの縁取りが施された赤いボタン

すでにずいぶん見栄えが良くなりました。しかし、ボタンが少し窮屈に見えます。padding を使って、枠線とテキストの間にスペースを設けましょう。さらに、最小幅を指定し、角を丸め、フォントを大きくして、ボタンをより見栄え良くします：

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}

ベージュの丸い枠で囲まれた赤いボタンと、大きく太字のテキスト

残っている唯一の問題は、ボタンを押しても反応しないことです。これを修正するには、背景色を少し変え、別の境界線スタイルを指定します。

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton#evilButton:pressed {
    background-color: rgb(224, 0, 0);
    border-style: inset;
}

サブコントロールを使用すると、ウィジェットのサブ要素にアクセスできます。たとえば、QPushButton::setMenu() を使用してメニューに関連付けられたQPushButton には、メニューインジケータがあります。赤いプッシュボタンのメニューインジケータをカスタマイズしてみましょう：

QPushButton#evilButton::menu-indicator {
    image: url(myindicator.png);
}

デフォルトでは、メニューインジケータはパディング矩形の右下隅に配置されます。subcontrol-positionおよびsubcontrol-origin を指定してインジケータのアンカー位置を変更することで、この配置を変更できます。また、topおよびleftを使用して、インジケータを数ピクセル分移動させることも可能です。例えば：

QPushButton::menu-indicator {
    image: url(myindicator.png);
    subcontrol-position: right center;
    subcontrol-origin: padding;
    left: -2px;
}

これにより、myindicator.png がQPushButton のパディング矩形の右中央に配置されます（詳細についてはsubcontrol-originを参照してください）。

複雑なセレクタの例

赤が私たちのお気に入りの色のようですので、次のアプリケーション全体のスタイルシートを設定して、QLineEdit 内のテキストを赤にしてみましょう：

QLineEdit { color: red }

ただし、QLineEdit が読み取り専用であることを視覚的に示すため、灰色で表示したいとします：

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }

ある時点で、デザインチームから、登録フォーム内のすべてのQLineEdit（object name registrationDialog を使用）を茶色にするという要件が提示されました：

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }

数回のUIデザイン会議を経て、すべてのQDialogのQLineEditを茶色にすることに決定しました：

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
QDialog QLineEdit { color: brown }

クイズ：QDialog 内に読み取り専用のQLineEdit がある場合、どうなるでしょうか？ [ヒント：上記「競合の解決」のセクションで、このような場合の挙動について説明されています。]

特定のウィジェットのカスタマイズ

このセクションでは、スタイルシートを使用して特定のウィジェットをカスタマイズする例を紹介します。

QAbstractScrollAreaのカスタマイズ

QAbstractScrollArea （Itemビュー、QTextEdit 、QTextBrowser ）の背景は、backgroundプロパティを使用して設定できます。たとえば、スクロールバーに合わせてスクロールする背景画像を設定するには：

QTextEdit, QListView {
    background-color: white;
    background-image: url(draft.png);
    background-attachment: scroll;
}

背景画像をビューポートに固定する場合は、次のようにします：

QTextEdit, QListView {
    background-color: white;
    background-image: url(draft.png);
    background-attachment: fixed;
}

QCheckBoxのカスタマイズ

QCheckBox のスタイル設定は、QRadioButton のスタイル設定とほぼ同じです。主な違いは、3状態のQCheckBox には「不定状態」があることです。

QCheckBox {
    spacing: 5px;
}

QCheckBox::indicator {
    width: 13px;
    height: 13px;
}

QCheckBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

QCheckBox::indicator:unchecked:hover {
    image: url(:/images/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/images/checkbox_unchecked_pressed.png);
}

QCheckBox::indicator:checked {
    image: url(:/images/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover {
    image: url(:/images/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(:/images/checkbox_checked_pressed.png);
}

QCheckBox::indicator:indeterminate:hover {
    image: url(:/images/checkbox_indeterminate_hover.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(:/images/checkbox_indeterminate_pressed.png);
}

QComboBoxのカスタマイズ

ここでは、QComboBox のドロップダウンボタンがコンボボックスのフレームと「融合」して表示される例を見ていきます。

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

QComboBox:editable {
    background: white;
}

QComboBox:!editable, QComboBox::drop-down:editable {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on { /* shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}

QComboBox::down-arrow {
    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}

QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}

QComboBox のポップアップはQAbstractItemView であり、子孫セレクタを使用してスタイルを設定します：

QComboBox QAbstractItemView {
    border: 2px solid darkgray;
    selection-background-color: lightgray;
}

QDockWidgetのカスタマイズ

QDockWidget のタイトルバーとボタンは、次のようにカスタマイズできます：

QDockWidget {
    border: 1px solid lightgray;
    titlebar-close-icon: url(close.png);
    titlebar-normal-icon: url(undock.png);
}

QDockWidget::title {
    text-align: left; /* align the text to the left */
    background: lightgray;
    padding-left: 5px;
}

QDockWidget::close-button, QDockWidget::float-button {
    border: 1px solid transparent;
    background: darkgray;
    padding: 0px;
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover {
    background: gray;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;
}

ドックウィジェットのボタンを左側に移動させたい場合は、次のスタイルシートを使用できます：

QDockWidget {
    border: 1px solid lightgray;
    titlebar-close-icon: url(close.png);
    titlebar-normal-icon: url(float.png);
}

QDockWidget::title {
    text-align: left;
    background: lightgray;
    padding-left: 35px;
}

QDockWidget::close-button, QDockWidget::float-button {
    background: darkgray;
    padding: 0px;
    icon-size: 14px; /* maximum icon size */
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover {
    background: gray;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;
}

QDockWidget::close-button {
    subcontrol-position: top left;
    subcontrol-origin: margin;
    position: absolute;
    top: 0px; left: 0px; bottom: 0px;
    width: 14px;
}

QDockWidget::float-button {
    subcontrol-position: top left;
    subcontrol-origin: margin;
    position: absolute;
    top: 0px; left: 16px; bottom: 0px;
    width: 14px;
}

注： QDockWidget のセパレータ（サイズ変更ハンドル）をカスタマイズするには 、QMainWindow::separator を使用してください。

QFrameのカスタマイズ

QFrame のスタイル設定には、ボックスモデルが使用されます。

QFrame, QLabel, QToolTip {
    border: 2px solid green;
    border-radius: 4px;
    padding: 2px;
    background-image: url(images/welcome.png);
}

QGroupBoxのカスタマイズ

QGroupBox のタイトルを中央に移動させる例を見てみましょう。

QGroupBox {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #E0E0E0, stop: 1 #FFFFFF);
    border: 2px solid gray;
    border-radius: 5px;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center; /* position at the top center */
    padding: 0 3px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #FF0ECE, stop: 1 #FFFFFF);
}

チェック可能なQGroupBox の場合は、{#indicator-sub}{::indicator}サブコントロールを使用し、QCheckBox とまったく同じようにスタイルを設定します（つまり）

QGroupBox::indicator {
    width: 13px;
    height: 13px;
}

QGroupBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

/* proceed with styling just like QCheckBox */

QHeaderViewのカスタマイズ

QHeaderView は次のようにカスタマイズします：

QHeaderView::section {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #616161, stop: 0.5 #505050,
                                      stop: 0.6 #434343, stop:1 #656565);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
}

QHeaderView::section:checked
{
    background-color: red;
}

/* style the sort indicator */
QHeaderView::down-arrow {
    image: url(down_arrow.png);
}

QHeaderView::up-arrow {
    image: url(up_arrow.png);
}

QLineEditのカスタマイズ

QLineEdit のフレームは、ボックスモデルを使用してスタイル設定されます。角が丸いラインエディットを作成するには、次のように設定します:

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

QLineEdit::Password のエコーモードを持つラインエディットのパスワード文字は、以下のように設定できます:

QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

読み取り専用のQLineEdit の背景は、以下のように変更できます:

QLineEdit:read-only {
    background: lightblue;
}

QListViewのカスタマイズ

交互の行の背景色は、以下のスタイルシートを使用してカスタマイズできます:

QListView {
    alternate-background-color: yellow;
}

アイテムにカーソルを合わせたときに特別な背景を表示するには、::itemサブコントロールを使用できます。例えば、

QListView {
    show-decoration-selected: 1; /* make the selection span the entire width of the view */
}

QListView::item:alternate {
    background: #EEEEEE;
}

QListView::item:selected {
    border: 1px solid #6a6ea9;
}

QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}

QListViewのカスタマイズ

QMainWindow のセパレータは、次のようにスタイルを設定できます：

QMainWindow::separator {
    background: yellow;
    width: 10px; /* when vertical */
    height: 10px; /* when horizontal */
}

QMainWindow::separator:hover {
    background: red;
}

QListViewのカスタマイズ

QMenu の個々の項目は、次のように「item」サブコントロールを使用してスタイルを設定します:

QMenu {
    background-color: #ABABAB; /* sets background of the menu */
    border: 1px solid black;
}

QMenu::item {
    /* sets background of menu item. set this to something non-transparent
        if you want menu color and menu item color to be different */
    background-color: transparent;
}

QMenu::item:selected { /* when user selects item using mouse or keyboard */
    background-color: #654321;
}

さらに高度なカスタマイズを行うには、次のようにスタイルシートを使用します：

QMenu {
    background-color: white;
    margin: 2px; /* some spacing around the menu */
}

QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent; /* reserve space for selection border */
}

QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}

QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}

QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}

QMenu::indicator {
    width: 13px;
    height: 13px;
}

/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

QMenu::indicator:non-exclusive:unchecked:selected {
    image: url(:/images/checkbox_unchecked_hover.png);
}

QMenu::indicator:non-exclusive:checked {
    image: url(:/images/checkbox_checked.png);
}

QMenu::indicator:non-exclusive:checked:selected {
    image: url(:/images/checkbox_checked_hover.png);
}

/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QMenu::indicator:exclusive:unchecked:selected {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QMenu::indicator:exclusive:checked {
    image: url(:/images/radiobutton_checked.png);
}

QMenu::indicator:exclusive:checked:selected {
    image: url(:/images/radiobutton_checked_hover.png);
}

QMenuBarのカスタマイズ

QMenuBar のスタイル設定は以下の通りです：

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 lightgray, stop:1 darkgray);
    spacing: 3px; /* spacing between menu bar items */
}

QMenuBar::item {
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}

QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
}

QMenuBar::item:pressed {
    background: #888888;
}

QProgressBarのカスタマイズ

QProgressBar の境界線、チャンク、およびテキストの配置は、スタイルシートを使用してカスタマイズできます。ただし、1つのプロパティまたはサブコントロールをカスタマイズする場合は、他のすべてのプロパティまたはサブコントロールも同様にカスタマイズする必要があります。

30%と表示されている進行状況バー

たとえば、境界線をグレーに、チャンクをセルリアンブルーに変更します。

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
}

QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}

これでテキストの配置が残りますが、これはテキストをプログレスバーの中央に配置することでカスタマイズします。

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

チャンクをより見やすくするために、マージンを設定することもできます。

切り欠きのある進捗バー

上のスクリーンショットでは、0.5 ピクセルのマージンを使用しています。

QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

QPushButtonのカスタマイズ

QPushButton のスタイルは次のように設定します。

QPushButton {
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
    min-width: 80px;
}

QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton:flat {
    border: none; /* no border for a flat push button */
}

QPushButton:default {
    border-color: navy; /* make the default button prominent */
}

メニュー付きのQPushButton の場合は、::menu-indicatorサブコントロールを使用します。

QPushButton:open { /* when the button has its menu open */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}

QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
    position: relative;
    top: 2px; left: 2px; /* shift the arrow by 2 px */
}

チェック可能なQPushButton には、:checkedという疑似状態が設定されています。

QRadioButtonのカスタマイズ

QRadioButton のインジケータは、以下を使用して変更できます:

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}

QRadioButton::indicator::unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(:/images/radiobutton_checked_pressed.png);
}

QScrollBarのカスタマイズ

QScrollBar は、ハンドル、追加線、サブラインなどのサブコントロールを使用してスタイルを設定できます。なお、1つのプロパティまたはサブコントロールをカスタマイズする場合、他のすべてのプロパティまたはサブコントロールも同様にカスタマイズする必要があります。

緑色の装飾が施されたスクロールバー

上のスクロールバーは、アクアマリン色で、灰色の実線枠が設定されています。

QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

左矢印と右矢印には、白を背景色とした実線のグレーの枠線が適用されています。あるいは、矢印の画像を埋め込むことも可能です。

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

macOSのように、スクロールバーのスクロールボタンを端ではなく隣り合わせに配置したい場合は、次のスタイルシートを使用できます:

QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}

QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}

QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}

QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right;
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

上記のスタイルシートを使用したスクロールバーは、次のようになります。

色付きのスクロールバー

垂直スクロールバーをカスタマイズするには、次のようなスタイルシートを使用します：

 QScrollBar:vertical {
     border: 2px solid grey;
     background: #32CC99;
     width: 15px;
     margin: 22px 0 22px 0;
 }
 QScrollBar::handle:vertical {
     background: white;
     min-height: 20px;
 }
 QScrollBar::add-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

QSizeGripのカスタマイズ

QSizeGrip は通常、画像を設定するだけでスタイルを設定できます。

QSizeGrip {
    image: url(:/images/sizegrip.png);
    width: 16px;
    height: 16px;
}

QSliderのカスタマイズ

水平スライダーのスタイルは、以下のように設定できます:

QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

ハンドルの前後のスライダー部分の色を変更したい場合は、add-pageおよびsub-pageサブコントロールを使用できます。たとえば、垂直スライダーの場合：

QSlider::groove:vertical {
    background: red;
    position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
    left: 4px; right: 4px;
}

QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}

QSlider::add-page:vertical {
    background: white;
}

QSlider::sub-page:vertical {
    background: pink;
}

QSpinBoxのカスタマイズ

QSpinBox は、以下のように完全にカスタマイズ可能です（スタイルシートにはインラインでコメントが記載されています）：

QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */

    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
   image: url(:/images/up_arrow_disabled.png);
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */

    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}

QSpinBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
   image: url(:/images/down_arrow_disabled.png);
}

QSplitterのカスタマイズ

QSplitter はQFrame を継承しているため、QFrame と同様にスタイルを設定できます。グリップ（ハンドル）は、::handleサブコントロールを使用してカスタマイズします。

QSplitter::handle {
    image: url(images/splitter.png);
}

QSplitter::handle:horizontal {
    width: 2px;
}

QSplitter::handle:vertical {
    height: 2px;
}

QSplitter::handle:pressed {
    url(images/splitter_pressed.png);
}

QStatusBarのカスタマイズ

ステータスバーの背景や、ステータスバー内の項目の枠線は、次のように設定できます：

QStatusBar {
    background: brown;
}

QStatusBar::item {
    border: 1px solid red;
    border-radius: 3px;
}

なお、QStatusBar に追加されたウィジェットは、子孫宣言（つまり）を使用してスタイルを設定できます。

QStatusBar QLabel {
    border: 3px solid white;
}

QTabWidget および QTabBar のカスタマイズ

複数のタブが表示された画像

上記のスクリーンショットを実現するには、次のようなスタイルシートが必要です：

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}

QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

多くの場合、以下のようにタブが重なるように表示する必要があります：

タブが重なった画像

上記のようなタブウィジェットを実現するには、負のマージンを利用します。負の値を指定すると、要素がデフォルトよりも隣接する要素に近づいて描画されます。その結果、スタイルシートは次のようになります：

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}

QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
    /* expand/overlap to the left and right by 4px */
    margin-left: -4px;
    margin-right: -4px;
}

QTabBar::tab:first:selected {
    margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}

QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

QTabBar::tab:only-one {
    margin: 0; /* if there is only one tab, we don't want overlapping margins */
}

タブバーを中央に配置するには（下図のように）、次のようなスタイルシートが必要です：

ウィジェットの中央に配置された複数のタブ

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
    position: absolute;
    top: -0.5em;
}

QTabWidget::tab-bar {
    alignment: center;
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

タブのインジケーターやスクロールボタンは、次のようにさらにカスタマイズできます:

QTabBar::tear {
    image: url(tear_indicator.png);
}

QTabBar::scroller { /* the width of the scroll buttons */
    width: 20px;
}

QTabBar QToolButton { /* the scroll buttons are tool buttons */
    border-image: url(scrollbutton.png) 2;
    border-width: 2px;
}

QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */
    image: url(rightarrow.png);
}

QTabBar QToolButton::left-arrow {
    image: url(leftarrow.png);
}

閉じるボタンは次のようにカスタマイズできます：

QTabBar::close-button {
    image: url(close.png)
    subcontrol-position: left;
}
QTabBar::close-button:hover {
    image: url(close-hover.png)
}

QTableViewのカスタマイズ

QTableView で選択された項目の背景色を、バブルガムピンクから白へとフェードさせるようにしたいとします。

カスタムスタイルが適用されたテーブルビュー

これはselection-background-colorプロパティを使用することで可能であり、必要な構文は次の通りです：

QTableView {
    selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
                                stop: 0 #FF92BB, stop: 1 white);
}

コーナーウィジェットは、以下のスタイルシートを使用してカスタマイズできます

QTableView QTableCornerButton::section {
    background: red;
    border: 2px outset red;
}

QTableView のチェックボックスインジケータもカスタマイズできます。以下のスニペットでは、未チェック状態のインジケータ `background-color ` をカスタマイズしています:

QTableView::indicator:unchecked {
    background-color: #d7d6d5
}

QToolBarのカスタマイズ

QToolBar の背景色とハンドルは、以下のようにカスタマイズできます：

QToolBar {
    background: red;
    spacing: 3px; /* spacing between items in the tool bar */
}

QToolBar::handle {
    image: url(handle.png);
}

QToolBoxのカスタマイズ

QToolBox のタブは、「tab」サブコントロールを使用してカスタマイズします。

QToolBox::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border-radius: 5px;
    color: darkgray;
}

QToolBox::tab:selected { /* italicize selected tabs */
    font: italic;
    color: white;
}

QToolButtonのカスタマイズ

QToolButtonには3つのタイプがあります。

QToolButton にはメニューがありません。この場合、QToolButton のスタイルはQPushButton とまったく同じになります。例については、「QPushButtonのカスタマイズ」を参照してください。
QToolButton にはメニューがあり、QToolButton::popupMode がQToolButton::DelayedPopup またはQToolButton::InstantPopup に設定されています。この場合、QToolButton のスタイルは、メニュー付きのQPushButton とまったく同じになります。menu-indicator疑似状態の使用例については、「QPushButtonのカスタマイズ」を参照してください。
QToolButton のQToolButton::popupMode はQToolButton::MenuButtonPopup に設定されています。この場合、次のようにスタイルを設定します：

QToolButton { /* all types of tool button */
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
}

QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}

QToolButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
    border: 2px solid gray;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    /* 16px width + 4px for border = 20px allocated above */
    width: 16px;
}

QToolButton::menu-arrow {
    image: url(downarrow.png);
}

QToolButton::menu-arrow:open {
    top: 1px; left: 1px; /* shift it a bit */
}

QToolTipのカスタマイズ

QToolTip は、QLabel とまったく同じようにカスタマイズされます。さらに、対応しているプラットフォームでは、opacity プロパティを設定して不透明度を調整することができます。

たとえば、

QToolTip {
    border: 2px solid darkkhaki;
    padding: 5px;
    border-radius: 3px;
    opacity: 200;
}

QTreeViewのカスタマイズ

交互の行の背景色は、次のスタイルシートを使用してカスタマイズできます:

QTreeView {
    alternate-background-color: yellow;
}

アイテムにカーソルを合わせた際に特別な背景を表示するには、::itemサブコントロールを使用できます。例えば、

QTreeView {
    show-decoration-selected: 1;
}

QTreeView::item {
     border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

QTreeView::item:selected {
    border: 1px solid #567dbc;
}

QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}

QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}

QTreeView のブランチは、::branchサブコントロールを使用してスタイル設定されます。次のスタイルシートは、ブランチを描画する際のさまざまな状態を色分けしています。

QTreeView::branch {
        background: palette(base);
}

QTreeView::branch:has-siblings:!adjoins-item {
        background: cyan;
}

QTreeView::branch:has-siblings:adjoins-item {
        background: red;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
        background: blue;
}

QTreeView::branch:closed:has-children:has-siblings {
        background: pink;
}

QTreeView::branch:has-children:!has-siblings:closed {
        background: gray;
}

QTreeView::branch:open:has-children:has-siblings {
        background: magenta;
}

QTreeView::branch:open:has-children:!has-siblings {
        background: green;
}

色鮮やかではありますが、以下の画像を使用すれば、より実用的な例を作成できます：


vline.png	branch-more.png	branch-end.png	branch-closed.png	branch-open.png

QTreeView::branch:has-siblings:!adjoins-item {
    border-image: url(vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item {
    border-image: url(branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: url(branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
        border-image: none;
        image: url(branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
        border-image: none;
        image: url(branch-open.png);
}

その結果、ツリービューは次のようになります：

スタイルが適用されたブランチを持つツリービュー

よくある間違い

このセクションでは、スタイルシートを使用する際によくある間違いをいくつか挙げます。

QPushButton と画像

QPushButton のスタイルを設定する際、ボタンのグラフィックとして画像を使用したい場合がよくあります。background-imageプロパティを使用しようとすることが一般的ですが、これにはいくつかの欠点があります。例えば、背景は背景として扱われないため、ボタンの装飾の背後に隠れて見えなくなってしまうことがよくあります。さらに、ボタンのサイズが変更されると、背景全体が引き伸ばされたりタイル状に繰り返されたりしますが、これは必ずしも見栄えが良いとは限りません。

その点、「border-image」プロパティを使用する方が適しています。このプロパティは、背景の有無にかかわらず常に画像を表示します（背景にアルファ値が含まれている場合は、背景と組み合わせることも可能です）。また、ボタンのサイズ変更に対応するための特別な設定も用意されています。

次のコードスニペットを考えてみましょう：

        QPushButton {
            color: grey;
            border-image: url(/home/kamlie/code/button.png) 3 10 3 10;
            border-top: 3px transparent;
            border-bottom: 3px transparent;
            border-right: 10px transparent;
            border-left: 10px transparent;
        }

これにより、次のようなボタンが生成されます：

背景付きのボタン

URLの後の数値は、それぞれ上、右、下、左のピクセル座標を表しています。これらの数値は境界線に対応しており、サイズが変更されても伸縮しません。ボタンのサイズを変更するたびに、画像の中央部分が両方向に伸縮しますが、スタイルシートで指定されたピクセル値は伸縮しません。これにより、ボタンの境界線が次のように、より自然に見えます：

境界線のサイズが指定されたボタン

枠線あり

境界線のサイズが指定されていないボタン

枠線あり

「Qt Widgets のスタイル設定手法」、「サポートされているHTMLサブセット」、および「QStyle 」も参照してください 。

スタイルシートリファレンスレイアウト管理

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.

Qt スタイルシートの例

スタイルシートの使用方法

前景色と背景色のカスタマイズ

動的プロパティを使用したカスタマイズ

ボックスモデルを使用した QPushButton のカスタマイズ

QPushButtonのメニューインジケータサブコントロールのカスタマイズ

複雑なセレクタの例

特定のウィジェットのカスタマイズ

QAbstractScrollAreaのカスタマイズ

QCheckBoxのカスタマイズ

QComboBoxのカスタマイズ

QDockWidgetのカスタマイズ

QFrameのカスタマイズ

QGroupBoxのカスタマイズ

QHeaderViewのカスタマイズ

QLineEditのカスタマイズ

QListViewのカスタマイズ

QListViewのカスタマイズ

QListViewのカスタマイズ

QMenuBarのカスタマイズ

QProgressBarのカスタマイズ

QPushButtonのカスタマイズ

QRadioButtonのカスタマイズ

QScrollBarのカスタマイズ

QSizeGripのカスタマイズ

QSliderのカスタマイズ

QSpinBoxのカスタマイズ

QSplitterのカスタマイズ

QStatusBarのカスタマイズ

QTabWidget および QTabBar のカスタマイズ

QTableViewのカスタマイズ

QToolBarのカスタマイズ

QToolBoxのカスタマイズ

QToolButtonのカスタマイズ

QToolTipのカスタマイズ

QTreeViewのカスタマイズ

よくある間違い

QPushButton と画像