すべてのプロダクト
Search
ドキュメントセンター

Quick BI:クエリコントロールのスタイル設定

最終更新日:Jun 24, 2025

このトピックでは、クエリ条件の設定後、クエリコントロールの表示スタイルを設定する方法について説明します。

スタイル設定エリアの上部にある [検索ボックス] にキーワードを入力して、[設定項目] をすばやく見つけます。

image.png

右側にある image..png アイコンをクリックすると、[すべてのカテゴリを展開/折りたたむ] 機能が切り替わります。

image.png

PC スタイル設定

説明

IE 11 ブラウザは、フォント(サイズ、色など)、罫線、背景色、またはピッチの設定をサポートしていません。

  • [タイトルとカード] セクションで、[タイトル][コンポーネントコンテナ] を設定します。

    設定項目

    説明

    タイトル

    • [メインタイトルを表示する] かどうかを設定し、タイトルのスタイルを設定できます。 image.png

    • [行区切り] を設定できます。 image.png

    コンポーネントコンテナ

    [カスタム背景塗りつぶし](①)、[角丸半径](②)、および [カード内側パディング](③)を設定できます。 image.png

  • [位置とレイアウト] セクションで、以下の設定を行います。

    設定項目

    説明

    ページ上のコントロールの位置

    [デフォルト] または [グローバルトップ] をサポートします。グローバルトップに設定すると、ページをスクロールしてもコントロールは上部に固定されます。

    1.gif

    デフォルトですべてのフィルタ条件を展開

    [デフォルトですべてのフィルタ条件を展開] を設定できます。

    2.gif

    カードの高さ

    [デフォルトですべてのフィルタ条件を展開] がオンになっている場合、[カードの高さ][自動回転] または [手動設定] に設定できます。

    このうち、[手動設定] はドラッグアンドドロップ調整を指します。超えた場合は、縦スクロールバーが表示されます。高さを手動で設定すると、すべてのフィルタ条件を折りたたむことはできません。

    image.png

    条件の配置

    条件の配置を [水平] または [垂直] に設定できます。

    • 水平: image.png

    • 垂直: image.png

    コンテナ内の条件の位置

    [左揃え][中央揃え][右揃え] をサポートします。

    4.gif

    条件ピッチ

    [条件ピッチ] を設定できます。

    41.gif

  • [条件選択ボックス] で、以下の設定を行います。

    設定項目

    説明

    選択ボックススタイル

    選択ボックススタイルは、[塗りつぶし][線フレーム][ミニマリスト] をサポートします。

    image.png

    背景色

    条件選択ボックスの [背景色] を設定できます。

    image.png

    境界線

    条件選択ボックスの [罫線] の太さと色を設定できます。

    image.png

    角丸半径

    条件選択ボックスの [角丸半径] サイズを設定できます。

    image.png

    テキスト

    条件チェックボックスの [テキスト]. の色とフォントサイズを設定できます。

    image.png

    カスタム条件スタイル

    クエリ条件の表示タイプに応じて、個々のクエリ条件に対してよりカスタマイズされたスタイル設定を実行できます。

    説明

    オブジェクトが重複している場合、カスタムスタイルは上記の一般的なスタイルを上書きします。リセットを選択してデフォルトに戻すことができます。

    • クエリコントロールの表示タイプが [ドロップダウンリスト][テキスト入力ボックス][数値入力ボックス][ツリー ドロップダウン]、および標準の [日付選択] の場合、各条件の [オプション幅][背景色][罫線][角丸半径]、および [テキストの色] を設定できます。 7.gif

    • クエリコントロールの表示タイプが [ドロップダウンリスト] の場合、[タイルオプション] または [固定リスト] に切り替えることができます。

      • コントロールタイプが [タイルオプション] の場合、[最大表示数][選択済み]、および [未選択] スタイルを設定できます。

        image.png

      • コントロールタイプが [固定リスト] の場合、[デフォルトの表示オプション数] を設定できます。

        image.png

    • クエリコントロールの表示タイプが [日付選択] で、日付条件で [クイック間隔] が有効になっている場合、[ドロップダウンリスト][タイルオプション] を選択して、クイック間隔の異なる間隔タイプをドロップダウンまたはタイル表示できます。

      image.png

      説明

      タイルボタンスタイルは、クイック間隔オプションが 5 つを超えない場合にのみサポートされます。

      • [ドロップダウンリスト] は、[選択ボックス全体] のスタイル設定をサポートします。

        image.png

      • [タイルオプション] は、[クイック間隔タイリング][日付選択] のスタイル設定をサポートします。

        • クイック間隔タイリング

          image.png

        • 日付選択

          image.png

  • [条件名] の表示を有効または無効にし、その [位置][テキスト]、および選択ボックスとの [ピッチ] を設定します。

    設定項目

    説明

    位置

    条件名の位置を [上] または [左] にすることができます。上に設定した場合、左揃え、中央揃え、右揃えの配置をサポートします。

    9.gif

    テキスト

    条件名のテキストスタイルを設定できます。

    image.png

    選択ボックスとのピッチ

    条件名の [選択ボックスとのピッチ] を設定できます。

    image.png

  • [ボタン] セクションで、[ボタン表示][ボタン位置][ボタンの色][ボタンの角丸半径]、および [テキスト] スタイルを設定します。

    設定項目

    説明

    ボタン表示

    image

    説明

    [ボタン表示] 設定項目が [クリア][表示] として選択されている場合にのみ、[リセット] ボタンと [クリア] ボタンが表示されます。

    • リセット: クエリ条件が設定されたデフォルト値に復元されることを示します。

    • クリア: クエリ条件に表示されている値がクリアされることを示します。

    たとえば、フィルタバー A がフィルタバー B とカスケードされている場合、フィルタバー A はフィルタバー B の上位レベルです。フィルタバー A がリセットまたはクリアされると、フィルタバー B もリセットまたはクリアされます。フィルタバー B がリセットまたはクリアされても、フィルタバー A は変更されません。

    左側の image アイコンをドラッグして、ボタンの表示順序を設定できます。

    30

    ボタン位置

    [デフォルト][条件の右側][条件の下]、および [条件に追従] をサポートします。

    • 条件の権利

      image

      この場合、ボタンを [上][中央][下] に設定し、[ボタンの配置][水平] または [垂直] に設定できます。

      34

    • 条件の下

      image

      この場合、ボタンを [左揃え][中央揃え][右揃え] に設定し、[ボタンの配置][水平] または [垂直] に設定できます。

      35

    • 条件に追従

      image

    ボタンの色

    [ボタンの色] を設定できます。

    image

    ボタンの角丸半径

    [ボタンの角丸半径] を設定できます。

    image.png

    テキスト

    ボタンの [テキスト] スタイルを設定できます。

    image.png

モバイルスタイル設定

  • [タイトルとカード] セクションで、[タイトル][コンポーネントコンテナ] を設定します。

    設定項目

    説明

    タイトル

    • [メインタイトルを表示する] かどうかを設定し、タイトルのスタイルを設定できます。 image.png

    • [行区切り] を設定できます。 image.png

    コンポーネントコンテナ

    [カスタム背景塗りつぶし](①)、[角丸半径](②)、および [カード内側パディング](③)を設定できます。 image.png

  • [位置とレイアウト] セクションで、以下の設定を行います。

    設定項目

    説明

    ページ上のコントロールの位置

    [デフォルト] または [グローバルトップ] をサポートします。グローバルトップに設定すると、ページをスクロールしてもコントロールは上部に固定されます。

    12.gif

    コンテナ内の条件の位置

    [左揃え][中央揃え][右揃え] をサポートします。

    13.gif

    条件ピッチ

    [条件ピッチ] を設定できます。

    14.gif

  • [条件選択ボックス] で、以下の設定を行います。

    設定項目

    説明

    選択ボックススタイル

    選択ボックススタイルは、[塗りつぶし][線フレーム][ミニマリスト] をサポートします。

    15.gif

    背景色

    条件選択ボックスの [背景色] を設定できます。

    image.png

    罫線

    条件選択ボックスの [罫線] の太さと色を設定できます。

    image.png

    角丸半径

    条件選択ボックスの [角丸半径] サイズを設定できます。

    image.png

    テキスト

    条件付きチェックボックスの [テキスト]. の色とフォントサイズを設定できます。

    image.png

    カスタム条件スタイル

    個々のクエリ条件に対して、より詳細なカスタムスタイル設定を実行できます。

    説明

    オブジェクトが重複している場合、カスタムスタイルは上記の一般的なスタイルを上書きします。リセットを選択してデフォルトに戻すことができます。

    • ドロップダウンリスト

      • 条件の [背景色][罫線][角丸半径]、および [テキスト] スタイルを設定できます。

        18.gif

      • ドロップダウンオプションスタイルを [リストオプション] または [タイルオプション] に設定し、列数または 1 行の表示数を設定できます。

        19.gif

    • タイルオプション

      • [角丸半径][選択済み]、および [未選択] スタイルを設定できます。

        image.png

      • 1 行の表示数を設定できます。

        image.png

    • 固定リスト

      • [背景色][罫線][角丸半径]、および [テキスト] スタイルを設定できます。

        image.png

      • 選択列の数を設定できます。

        image.png

    • 日付選択

      • 日付条件で [クイック間隔] が有効になっている場合、[ドロップダウンリスト][タイルオプション] を選択できます。

        • [ドロップダウンリスト] は、[背景色][罫線][角丸半径]、および [テキスト] スタイルの設定をサポートします。

          image.png

        • [タイルオプション] は、[クイック間隔タイリング][日付選択] のスタイル設定をサポートします。

          説明

          タイルボタンスタイルは、クイック間隔オプションが 5 つを超えない場合にのみサポートされます。

          • [クイック間隔タイリング] は、[角丸半径][選択済み]、および [未選択] スタイルの設定をサポートします。

            image.png

          • [日付選択] は、[背景色][罫線][角丸半径]、および [テキスト] スタイルの設定をサポートします。

            image.png

      • 日付選択の [単一の日付](単一年、単一日、単一月、単一週など)または間隔タイプが [開始日時][終了日時] の場合、[矢印の位置] を設定できます。

        image.png

    • 入力ボックス

      [テキスト入力ボックス] と [数値入力ボックス] は、[背景色][罫線][角丸半径]、および [テキスト] スタイルの設定をサポートします。

      image.png

    • ツリードロップダウン

      • [背景色][罫線][角丸半径]、および [テキスト] スタイルを設定できます。

        image.png

      • 選択列の数を設定できます。

        image.png

  • [条件名] の表示を有効または無効にし、その [位置][テキスト]、および選択ボックスとの [ピッチ] を設定します。

    設定項目

    説明

    位置

    条件名の位置を [上] または [左] にすることができます。上に設定した場合、左揃え、中央揃え、右揃えの配置をサポートします。

    17.gif

    テキスト

    条件名のテキストスタイルを設定できます。

    image.png

  • [ボタン] セクションで、[ボタン表示][ボタンの色]、および [テキスト] のフォントサイズを設定します。

    image