Qt Style Sheet完全ガイド：応用テクニックとサンプルコード

By /

Qt Style Sheet完全ガイド：応用テクニックとサンプルコード

Qt Style Sheets（QSS）は、QtフレームワークでGUIアプリケーションの見た目をカスタマイズするための強力なメカニズムです。CSSと同様の構文を使用することで、開発者はアプリケーション全体のルックアンドフィールを簡単に制御できます。この記事では、QSSの基本から応用テクニックまでを網羅し、サンプルコードを交えながら詳細に解説します。

1. QSSの基本：CSSとの類似点と相違点

QSSは、CSS（Cascading Style Sheets）をベースとしていますが、完全に同じではありません。Web開発者がCSSに慣れている場合、QSSの基本概念は理解しやすいでしょう。しかし、Qtウィジェットに特有の機能や制限が存在するため、QSS固有の知識も必要となります。

1.1 CSSとの類似点

  • セレクタ (Selectors): 特定のウィジェットやウィジェットのグループを対象とします。
  • プロパティ (Properties): ウィジェットの外観の特定の側面（色、フォント、ボーダーなど）を制御します。
  • 値 (Values): プロパティに割り当てられる具体的な値です。
  • カスケード (Cascade): 複数のスタイルルールが競合する場合、優先順位に基づいて最終的なスタイルが決定されます。

1.2 CSSとの相違点

  • ウィジェットの種類: QSSは、QPushButton、QLabel、QLineEditなど、Qtフレームワークのウィジェットに適用されます。CSSはHTML要素に適用されます。
  • プロパティと値: QSSで使用できるプロパティと値は、Qtウィジェットの特性に合わせて定義されています。CSSで使用できるプロパティと値とは異なります。
  • 擬似クラス (Pseudo-classes): QSSは、CSSと同様に擬似クラス（:hover、:checkedなど）をサポートしますが、利用可能な擬似クラスはQtウィジェットに依存します。
  • 単位 (Units): QSSで使用できる単位は、CSSほど多様ではありません。通常、ピクセル（px）やパーセント（%）などが使用されます。
  • アニメーションとトランジション: QSSは、CSSほど高度なアニメーションとトランジション機能をサポートしていません。

2. QSSの構文と構造

QSSは、セレクタ、プロパティ、値の組み合わせで構成されるルールセットの集合です。

qss
セレクタ {
プロパティ: 値;
プロパティ: 値;
}

2.1 セレクタの種類

QSSでは、さまざまなセレクタを使用して、特定のウィジェットまたはウィジェットのグループをターゲットにすることができます。

  • タイプセレクタ (Type Selector): ウィジェットのタイプに基づいてウィジェットを選択します。例：QPushButton
  • クラスセレクタ (Class Selector): setObjectName()で設定されたオブジェクト名に基づいてウィジェットを選択します。例：.myButton
  • IDセレクタ (ID Selector): setObjectName()で設定されたオブジェクト名に基づいて、一意のウィジェットを選択します。例：#mySpecialButton
  • 属性セレクタ (Attribute Selector): ウィジェットの属性に基づいてウィジェットを選択します。例：QPushButton[flat="true"]
  • 子セレクタ (Child Selector): 親ウィジェットの直接の子であるウィジェットを選択します。例：QDialog > QPushButton
  • 孫セレクタ (Descendant Selector): 親ウィジェットの子孫であるウィジェットを選択します。例：QDialog QPushButton
  • 隣接兄弟セレクタ (Adjacent Sibling Selector): 同じ親を持つ直後の兄弟ウィジェットを選択します。例：QLineEdit + QPushButton
  • 一般兄弟セレクタ (General Sibling Selector): 同じ親を持つすべての兄弟ウィジェットを選択します。例：QLineEdit ~ QPushButton
  • 擬似クラスセレクタ (Pseudo-class Selector): ウィジェットの状態に基づいてウィジェットを選択します。例：QPushButton:hover

2.2 プロパティと値

QSSで使用できるプロパティと値は、Qtウィジェットの特性に合わせて定義されています。一般的なプロパティには、background-color、color、font-family、border、padding、marginなどがあります。

2.3 カスケードと優先順位

複数のスタイルルールが競合する場合、QSSはカスケードと優先順位のルールに基づいて最終的なスタイルを決定します。

  • 重要度 (!important): !importantキーワードを使用すると、特定のスタイルの優先順位を高くすることができます。
  • 特異性 (Specificity): セレクタの特異性が高いほど、優先順位が高くなります。IDセレクタはクラスセレクタよりも特異性が高く、クラスセレクタはタイプセレクタよりも特異性が高くなります。
  • ソース順序: 同じ特異性を持つスタイルルールの場合、最後に定義されたルールが優先されます。

3. QSSの適用方法

QSSをQtアプリケーションに適用する方法はいくつかあります。

  • アプリケーション全体に適用: QApplication::setStyleSheet()を使用して、アプリケーション全体のスタイルシートを設定します。
  • ウィジェットごとに適用: QWidget::setStyleSheet()を使用して、特定のウィジェットにスタイルシートを設定します。
  • Qt Designerで適用: Qt Designerを使用して、ウィジェットのスタイルシートを直接設定します。
  • 外部ファイルからロード: QSSを外部ファイルに保存し、Qtアプリケーションでロードして適用します。

4. QSSの応用テクニックとサンプルコード

ここでは、QSSの応用テクニックをいくつか紹介し、サンプルコードを交えながら解説します。

4.1 ボタンのカスタマイズ

ボタンは、GUIアプリケーションで最も一般的なウィジェットの1つです。QSSを使用して、ボタンの見た目を大幅にカスタマイズできます。

“`qss
/ 基本的なスタイリング /
QPushButton {
background-color: #4CAF50; / 緑色の背景 /
border: none; / ボーダーを削除 /
color: white; / 白色のテキスト /
padding: 15px 32px; / パディング /
text-align: center; / テキストを中央揃え /
text-decoration: none; / テキストの装飾を削除 /
display: inline-block; / インラインブロックとして表示 /
font-size: 16px; / フォントサイズ /
margin: 4px 2px; / マージン /
cursor: pointer; / カーソルをポインタに変更 /
border-radius: 5px; / 角を丸める /
}

/ ホバー時のスタイリング /
QPushButton:hover {
background-color: #3e8e41; / より濃い緑色の背景 /
}

/ 押下時のスタイリング /
QPushButton:pressed {
background-color: #367537; / さらに濃い緑色の背景 /
box-shadow: 0 5px #666; / シャドウを追加 /
transform: translateY(4px); / 少し下に移動 /
}

/ 無効時のスタイリング /
QPushButton:disabled {
background-color: #cccccc; / 薄い灰色の背景 /
color: #666666; / 濃い灰色のテキスト /
cursor: not-allowed; / カーソルを使用禁止に変更 /
}

/ チェック状態のスタイリング (QPushButton が checkable の場合) /
QPushButton:checked {
background-color: #008CBA; / 青色の背景 /
color: white;
}
“`

このコードは、QPushButton の様々な状態 (通常、ホバー、押下、無効、チェック) に対して異なるスタイルを適用する方法を示しています。background-color、color、padding、font-size などのプロパティを使って、ボタンの外観を自由にカスタマイズできます。特に、:hover、:pressed、:disabled、:checked などの擬似クラスを使うことで、ユーザーインタラクションに応じた動的なスタイリングが可能です。 border-radius プロパティで角を丸めることで、モダンな印象を与えることもできます。 box-shadow と transform を組み合わせることで、ボタンが押された際に少し沈み込むような視覚効果を作り出すことも可能です。

4.2 テキスト入力フィールドのカスタマイズ

QLineEditなどのテキスト入力フィールドも、QSSを使用してカスタマイズできます。

“`qss
QLineEdit {
border: 2px solid #ccc; / 灰色のボーダー /
border-radius: 4px; / 角を丸める /
padding: 8px 10px; / パディング /
font-size: 16px; / フォントサイズ /
background-color: white; / 白色の背景 /
color: #333; / 濃い灰色のテキスト /
}

QLineEdit:focus {
border-color: #007bff; / フォーカス時に青色のボーダー /
outline: none; / アウトラインを削除 /
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); / フォーカス時にシャドウを追加 /
}

QLineEdit::placeholder {
color: #aaa; / プレースホルダーのテキストを薄い灰色にする /
font-style: italic; / プレースホルダーのテキストをイタリックにする /
}
“`

この例では、QLineEditの基本的なスタイリングとして、ボーダー、角の丸み、パディング、フォントサイズ、背景色、テキストの色などを設定しています。 QLineEdit:focus 擬似クラスを使って、テキスト入力フィールドがフォーカスされたときのスタイルを定義しています。ボーダーの色を変更したり、シャドウを追加することで、フォーカスされていることをユーザーに視覚的に知らせることができます。 QLineEdit::placeholder 擬似要素を使って、プレースホルダーテキストの色やスタイルをカスタマイズすることも可能です。

4.3 スクロールバーのカスタマイズ

スクロールバーは、QSSを使用して非常に細かくカスタマイズできます。

“`qss
QScrollBar:vertical {
background: #f0f0f0; / スクロールバーの背景色 /
width: 16px; / スクロールバーの幅 /
margin: 0px 0px 0px 0px; / スクロールバーのマージン /
}

QScrollBar::handle:vertical {
background: #ccc; / ハンドルの背景色 /
min-height: 20px; / ハンドルの最小の高さ /
border-radius: 8px; / ハンドルの角を丸める /
}

QScrollBar::handle:vertical:hover {
background: #bbb; / ホバー時のハンドルの背景色 /
}

QScrollBar::add-line:vertical {
background: none; / 下向き矢印ボタンの背景を削除 /
height: 0px; / 下向き矢印ボタンの高さを削除 /
subcontrol-position: bottom; / 下向き矢印ボタンの位置を底に設定 /
subcontrol-origin: margin; / 下向き矢印ボタンの位置の基準をマージンに設定 /
}

QScrollBar::sub-line:vertical {
background: none; / 上向き矢印ボタンの背景を削除 /
height: 0px; / 上向き矢印ボタンの高さを削除 /
subcontrol-position: top; / 上向き矢印ボタンの位置を上に設定 /
subcontrol-origin: margin; / 上向き矢印ボタンの位置の基準をマージンに設定 /
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none; / ページアップ/ダウンの背景を削除 /
}
“`

このコードは、垂直スクロールバー (QScrollBar:vertical) の外観をカスタマイズしています。スクロールバーの背景色、幅、マージン、ハンドルの背景色、最小の高さ、角の丸みなどを設定しています。 :hover 擬似クラスを使って、マウスがハンドルの上にホバーしたときのスタイルも定義しています。QScrollBar::add-line と QScrollBar::sub-line 擬似要素を使って、上下の矢印ボタンの背景と高さを削除しています。 QScrollBar::add-page と QScrollBar::sub-page 擬似要素を使って、ページアップ/ダウンの背景も削除しています。 このように、QSSを使うことで、スクロールバーのあらゆる部分を細かく制御し、アプリケーションのデザインに完全に一致させることができます。

4.4 ウィジェットの透明化

background-colorプロパティでrgba()関数を使用すると、ウィジェットの背景を透明にできます。

qss
QWidget {
background-color: rgba(255, 255, 255, 0.5); /* 半透明の白い背景 */
}

このコードは、すべてのQWidgetの背景色を半透明の白に設定します。 rgba()関数は、赤、緑、青、アルファ（透明度）の4つの引数を取ります。アルファ値は0（完全に透明）から1（完全に不透明）の範囲です。

4.5 カスタムフォントの適用

font-familyプロパティを使用して、カスタムフォントを適用できます。

qss
QLabel {
font-family: "MyCustomFont"; /* カスタムフォントを適用 */
}

このコードは、すべてのQLabelに “MyCustomFont” という名前のフォントを適用します。 Qtアプリケーションでカスタムフォントを使用するには、事前にQFontDatabase::addApplicationFont() 関数を使用してフォントファイルをロードする必要があります。

4.6 ツールチップのカスタマイズ

QSSを使用して、ツールチップの見た目をカスタマイズすることも可能です。

qss
QToolTip {
background-color: #333; /* 濃い灰色の背景 */
color: white; /* 白色のテキスト */
border: 1px solid #aaa; /* 薄い灰色のボーダー */
padding: 5px; /* パディング */
font-size: 12px; /* フォントサイズ */
}

このコードは、QToolTipの背景色、テキストの色、ボーダー、パディング、フォントサイズなどを設定します。 これにより、アプリケーション全体のツールチップの外観を統一し、デザインに合わせてカスタマイズすることができます。

4.7 QListWidgetのカスタマイズ

QListWidgetはリスト表示を行うウィジェットですが、QSSを使って細かくスタイルを変更できます。

“`qss
QListWidget {
background-color: #f8f8f8; / リストの背景色 /
border: 1px solid #ccc; / ボーダー /
outline: 0; / フォーカス時のアウトラインを削除 /
}

QListWidget::item {
padding: 5px; / 各アイテムのパディング /
margin: 2px; / 各アイテムのマージン /
background-color: white; / 各アイテムの背景色 /
color: #333; / 各アイテムのテキストの色 /
border-bottom: 1px solid #eee; / アイテム間の区切り線 /
}

QListWidget::item:selected {
background-color: #e0e0e0; / 選択されたアイテムの背景色 /
color: #000; / 選択されたアイテムのテキストの色 /
}

QListWidget::item:hover {
background-color: #f0f0f0; / ホバー時のアイテムの背景色 /
}
“`

この例では、QListWidget全体の背景色やボーダー、および各アイテム (QListWidget::item) のパディング、マージン、背景色、テキストの色などを設定しています。 :selected 擬似クラスを使って、選択されたアイテムのスタイルを定義し、:hover 擬似クラスを使って、マウスがアイテムの上にホバーしたときのスタイルを定義しています。 border-bottom プロパティでアイテム間の区切り線を追加しています。

4.8 レイアウトのカスタマイズ

QSSでレイアウト（QVBoxLayout、QHBoxLayoutなど）自体を直接カスタマイズすることはできませんが、レイアウト内のウィジェットを間接的に制御することで、レイアウト全体の外観を改善できます。 例えば、ウィジェット間のスペースを調整するためにmarginプロパティを使用したり、背景色を設定することで視覚的な区切りを設けたりできます。

4.9 QTabWidgetのカスタマイズ

QTabWidgetはタブ形式のUIを提供するウィジェットですが、QSSを使ってタブの外観をカスタマイズできます。

“`qss
QTabWidget::pane { / メインコンテンツ領域 /
border: 1px solid #C4C4C3;
background: white;
}

QTabWidget::tab-bar {
left: 5px; / 必要に応じて調整 /
}

QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #F8F8F8,
stop: 0.5 #F8F8F8, stop: 1.0 #E1E1E1);
border: 1px solid #C4C4C3;
border-bottom-color: #C2C7CB; / 上のタブとの区切り /
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; /選択されたタブで上部のタブを覆う/
}

QTabBar::tab:!selected {
margin-top: 2px; / 選択されていないタブを少し下に移動 /
}
“`

この例では、QTabWidget::pane でメインコンテンツ領域のボーダーと背景色を設定し、QTabWidget::tab-bar でタブバーの位置を調整しています。 QTabBar::tab でタブの背景をグラデーションにし、ボーダー、角の丸み、最小幅、パディングを設定しています。 :selected 擬似クラスを使って、選択されたタブとホバーされたタブのスタイルを定義しています。 margin-top プロパティを使って、選択されていないタブを少し下に移動させて、視覚的な効果を高めています。

5. QSSのデバッグ

QSSのデバッグは、スタイルが正しく適用されていない場合や、予期せぬ動作が発生した場合に重要です。

  • qDebug(): qDebug()を使用して、QSSルールやプロパティの値を出力し、問題の特定に役立てます。
  • Qt Style Sheet Syntax Highlighting: Qt CreatorなどのIDEを使用すると、QSSファイルの構文ハイライトが提供され、構文エラーを簡単に特定できます。
  • Qt Style Sheet Reference: QtドキュメントのQt Style Sheet Referenceを参照して、利用可能なプロパティと値を確認します。
  • Incremental Testing: スタイルルールを段階的に適用し、各ステップで結果を確認することで、問題のあるルールを特定できます。
  • Developer Tools (Qt WebEngine): Qt WebEngineを使用してGUIを構築している場合、Chrome DevToolsなどの開発者ツールを使用して、適用されたスタイルを検査できます。

6. QSSのベストプラクティス

  • 一貫性: アプリケーション全体で一貫したスタイルを使用することで、プロフェッショナルな外観を実現します。
  • 可読性: QSSコードを適切にインデントし、コメントを追加することで、可読性を向上させます。
  • 再利用性: 共通のスタイルルールをまとめて、再利用可能なクラスを作成します。
  • パフォーマンス: 複雑なスタイルルールはパフォーマンスに影響を与える可能性があるため、必要最小限のルールを使用します。
  • メンテナンス性: QSSコードをモジュール化し、外部ファイルに保存することで、メンテナンス性を向上させます。

7. まとめ

QSSは、Qtアプリケーションの見た目をカスタマイズするための強力なツールです。この記事では、QSSの基本から応用テクニックまでを網羅的に解説しました。QSSを効果的に活用することで、ユーザーエクスペリエンスを向上させ、アプリケーションの魅力を高めることができます。様々なサンプルコードを参考に、QSSを使いこなして、独自のGUIデザインを実現してください。

8. 付録：QSSプロパティリファレンス

ここでは、QSSでよく使用されるプロパティの一部をリストアップします。

  • 背景:
    • background-color: 背景色を設定します。
    • background-image: 背景画像を設定します。
    • background-repeat: 背景画像の繰り返し方法を設定します。
    • background-position: 背景画像の配置位置を設定します。
  • ボーダー:
    • border: ボーダーのスタイル、幅、色をまとめて設定します。
    • border-width: ボーダーの幅を設定します。
    • border-style: ボーダーのスタイル（solid、dashedなど）を設定します。
    • border-color: ボーダーの色を設定します。
    • border-radius: ボーダーの角を丸めます。
  • フォント:
    • font-family: フォントの種類を設定します。
    • font-size: フォントのサイズを設定します。
    • font-weight: フォントの太さを設定します。
    • font-style: フォントのスタイル（italicなど）を設定します。
  • テキスト:
    • color: テキストの色を設定します。
    • text-align: テキストの配置を設定します。
    • text-decoration: テキストの装飾（underlineなど）を設定します。
  • ボックスモデル:
    • padding: コンテンツとボーダーの間のスペースを設定します。
    • margin: ウィジェットの外側のスペースを設定します。
  • その他:
    • opacity: ウィジェットの透明度を設定します。
    • cursor: マウスカーソルの種類を設定します。
    • width: ウィジェットの幅を設定します。
    • height: ウィジェットの高さを設定します。

これはほんの一部であり、Qtドキュメントにはさらに多くのQSSプロパティが記載されています。 詳細は、Qtの公式ドキュメントを参照してください。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール