このトピックでは、クエリ条件の設定後、クエリコントロールの表示スタイルを設定する方法について説明します。
スタイル設定エリアの上部にある [検索ボックス] にキーワードを入力して、[設定項目] をすばやく見つけます。

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

PC スタイル設定
IE 11 ブラウザは、フォント(サイズ、色など)、罫線、背景色、またはピッチの設定をサポートしていません。
[タイトルとカード] セクションで、[タイトル] と [コンポーネントコンテナ] を設定します。
設定項目
説明
タイトル
[メインタイトルを表示する] かどうかを設定し、タイトルのスタイルを設定できます。

[行区切り] を設定できます。

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

[位置とレイアウト] セクションで、以下の設定を行います。
設定項目
説明
ページ上のコントロールの位置
[デフォルト] または [グローバルトップ] をサポートします。グローバルトップに設定すると、ページをスクロールしてもコントロールは上部に固定されます。

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

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

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

垂直:

コンテナ内の条件の位置
[左揃え]、[中央揃え]、[右揃え] をサポートします。

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

[条件選択ボックス] で、以下の設定を行います。
設定項目
説明
選択ボックススタイル
選択ボックススタイルは、[塗りつぶし]、[線フレーム]、[ミニマリスト] をサポートします。

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

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

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

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

カスタム条件スタイル
クエリ条件の表示タイプに応じて、個々のクエリ条件に対してよりカスタマイズされたスタイル設定を実行できます。
説明オブジェクトが重複している場合、カスタムスタイルは上記の一般的なスタイルを上書きします。リセットを選択してデフォルトに戻すことができます。
クエリコントロールの表示タイプが [ドロップダウンリスト]、[テキスト入力ボックス]、[数値入力ボックス]、[ツリー ドロップダウン]、および標準の [日付選択] の場合、各条件の [オプション幅]、[背景色]、[罫線]、[角丸半径]、および [テキストの色] を設定できます。

クエリコントロールの表示タイプが [ドロップダウンリスト] の場合、[タイルオプション] または [固定リスト] に切り替えることができます。
コントロールタイプが [タイルオプション] の場合、[最大表示数]、[選択済み]、および [未選択] スタイルを設定できます。

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

クエリコントロールの表示タイプが [日付選択] で、日付条件で [クイック間隔] が有効になっている場合、[ドロップダウンリスト] と [タイルオプション] を選択して、クイック間隔の異なる間隔タイプをドロップダウンまたはタイル表示できます。
説明タイルボタンスタイルは、クイック間隔オプションが 5 つを超えない場合にのみサポートされます。
[ドロップダウンリスト] は、[選択ボックス全体] のスタイル設定をサポートします。

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

日付選択

[条件名] の表示を有効または無効にし、その [位置]、[テキスト]、および選択ボックスとの [ピッチ] を設定します。
設定項目
説明
位置
条件名の位置を [上] または [左] にすることができます。上に設定した場合、左揃え、中央揃え、右揃えの配置をサポートします。

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

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

[ボタン] セクションで、[ボタン表示]、[ボタン位置]、[ボタンの色]、[ボタンの角丸半径]、および [テキスト] スタイルを設定します。
設定項目
説明
ボタン表示
説明[ボタン表示] 設定項目が [クリア] と [表示] として選択されている場合にのみ、[リセット] ボタンと [クリア] ボタンが表示されます。
リセット: クエリ条件が設定されたデフォルト値に復元されることを示します。
クリア: クエリ条件に表示されている値がクリアされることを示します。
たとえば、フィルタバー A がフィルタバー B とカスケードされている場合、フィルタバー A はフィルタバー B の上位レベルです。フィルタバー A がリセットまたはクリアされると、フィルタバー B もリセットまたはクリアされます。フィルタバー B がリセットまたはクリアされても、フィルタバー A は変更されません。
左側の
アイコンをドラッグして、ボタンの表示順序を設定できます。
ボタン位置
[デフォルト]、[条件の右側]、[条件の下]、および [条件に追従] をサポートします。
条件の権利

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

条件の下

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

条件に追従

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

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

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

モバイルスタイル設定
[タイトルとカード] セクションで、[タイトル] と [コンポーネントコンテナ] を設定します。
設定項目
説明
タイトル
[メインタイトルを表示する] かどうかを設定し、タイトルのスタイルを設定できます。

[行区切り] を設定できます。

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

[位置とレイアウト] セクションで、以下の設定を行います。
設定項目
説明
ページ上のコントロールの位置
[デフォルト] または [グローバルトップ] をサポートします。グローバルトップに設定すると、ページをスクロールしてもコントロールは上部に固定されます。

コンテナ内の条件の位置
[左揃え]、[中央揃え]、[右揃え] をサポートします。

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

[条件選択ボックス] で、以下の設定を行います。
設定項目
説明
選択ボックススタイル
選択ボックススタイルは、[塗りつぶし]、[線フレーム]、[ミニマリスト] をサポートします。

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

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

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

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

カスタム条件スタイル
個々のクエリ条件に対して、より詳細なカスタムスタイル設定を実行できます。
説明オブジェクトが重複している場合、カスタムスタイルは上記の一般的なスタイルを上書きします。リセットを選択してデフォルトに戻すことができます。
ドロップダウンリスト
条件の [背景色]、[罫線]、[角丸半径]、および [テキスト] スタイルを設定できます。

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

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

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

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

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

日付選択
日付条件で [クイック間隔] が有効になっている場合、[ドロップダウンリスト] と [タイルオプション] を選択できます。
[ドロップダウンリスト] は、[背景色]、[罫線]、[角丸半径]、および [テキスト] スタイルの設定をサポートします。

[タイルオプション] は、[クイック間隔タイリング] と [日付選択] のスタイル設定をサポートします。
説明タイルボタンスタイルは、クイック間隔オプションが 5 つを超えない場合にのみサポートされます。
[クイック間隔タイリング] は、[角丸半径]、[選択済み]、および [未選択] スタイルの設定をサポートします。

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

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

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

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

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

[条件名] の表示を有効または無効にし、その [位置]、[テキスト]、および選択ボックスとの [ピッチ] を設定します。
設定項目
説明
位置
条件名の位置を [上] または [左] にすることができます。上に設定した場合、左揃え、中央揃え、右揃えの配置をサポートします。

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

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