> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # グループ分け > YiDAのグループ分けコンポーネントの定義、ユースケース、ヘッダー表示やアイコンなどの属性設定を解説します。PC・モバイル向けの設定オプション、ソースコード編集・状態・表示モード・Margin・Paddingを含むスタイル設定まで詳しくご紹介します。 ## 1. グループ分けコンポーネントの概要 ### 1.1 グループ分けとは グループ分けは、類似する機能のモジュールを 1 つのグループにまとめるための公式推奨のブロックマネージャーです。 効果は以下のとおりです。 グループ分けコンポーネント グループ内にコンポーネントを追加 ### 1.2 ユースケース 1 つのページに複数の独立したモジュールを表示する場合（例：店舗の商品、棚、価格などをそれぞれ独立したモジュールに配置する場合）で、各モジュールに複数のフォームコンポーネントが含まれるときは、モジュールごとにグループにまとめて配置します。 ## 2. 属性 ### 2.1 ヘッダーを表示 トグルをオフにすると、すべてのヘッダー設定オプションが自動的に折りたたまれます。 ヘッダー表示と非表示の比較は以下のとおりです。 ヘッダーを表示 ヘッダーを非表示 #### 2.1.1 グループタイトル このグループの名前を表示します。テキストが長すぎる場合は切り詰められ、**最初の 9 文字（漢字）のみが表示されます**。 #### 2.1.2 アイコン グループにアイコンを設定できます。効果は以下のとおりです。 アイコンの設定 #### 2.1.3 ユーザーお知らせ グループ名の後に「i」アイコンが追加されます。クリックすると重要な情報を確認できます。効果は以下のとおりです。 お知らせと注意事項 #### 2.1.4 ヘッダー区切り線 トグルをオフにすると、ヘッダーの区切り線が非表示になります。効果は以下のとおりです。 ヘッダー区切り線 ### 2.2 PC設定 フォームページのレイアウトにおいて、グループ分けコンポーネントの表示方法を制御します。効果は以下のとおりです。 #### 2.2.1 境界線を表示 グループ分けコンポーネントの周囲に境界線を表示します。オン・オフの効果は以下のとおりです。 境界線を表示 #### 2.2.2 Margin グループ分けコンポーネントの外側の余白を調整します。効果は以下のとおりです。 #### 2.2.3 Padding グループ分けコンポーネントの内側の余白を調整します。効果は以下のとおりです。 Paddingのオン・オフ ### 2.3 モバイル設定 PC設定と類似していますが、モバイル側のみに適用されます。設定方法はPCと同じです。効果は以下のとおりです。 ## 3. スタイル グループのスタイル設定では、通常はブロック表示モードを直接使用します。 スタイル設定 ### 3.1 ソースコード編集 CSSソースコードでスタイルを直接編集します。現在のdivはデフォルトでflexレイアウトを使用しています。 ### 3.2 状態 従来のPC側コンポーネントの状態でグループを設定します。 * Default：通常状態 * hover：マウスがコンポーネントのホットスポット上にあり、クリックしていない状態 * focus：ページ要素にカーソルフォーカスがある状態 * active：ページ要素が選択され、アクティブになっている状態 **注意事項：** * 各状態の設定において、デフォルト状態は他の 3 つの状態を上書きします。 * hover、focus、activeの各状態は独立して設定され、相互に影響しません。 * CSSでは独立したセレクタとして設定されます。 ### 3.3 表示 CSSのdisplayモードに対応します。 * block：ボックスモデル * inline-block：インラインボックスモデル * inline：インラインモデル * flex：フレキシブルレイアウトモデル 上記 4 つのモードはいずれもフロントエンドCSSの標準レイアウトモデルであるため、ここでは詳しく説明しません。詳細は [**対応するW3Cドキュメント**](https://www.runoob.com/css/css-website-layout.html) を参照してください。 例えば、flexの一般的な使い方は以下のとおりです。 * flexレイアウトを使用して、項目を必要に応じて水平方向または垂直方向に配置します。 * さらに、水平方向および垂直方向の中央揃えを設定できます。効果は以下のとおりです。 ### 3.4 MarginとPadding Marginは、ボックスモデルと他のノード要素との間の距離を指します。 Paddingは、ボックスモデルとその内側の要素との間の余白を指します。効果は以下のとおりです。 ### 3.5 テキスト テキスト設定は、グループ内のコンポーネントタイトルに反映されます。カスタマイズすることも、テキストタイトルを直接選択することも可能です。効果は以下のとおりです。 ### 3.6 背景 システム組み込みの色を選択するか、ローカルの画像をアップロードして背景に設定します。効果は以下のとおりです。 ### 3.7 境界線 グループ分けコンポーネントの境界線効果を設定します。 さらに、コンポーネントの四隅の丸みを制御する角の半径の設定にも対応しています。効果は以下のとおりです。 ### 3.8 影 コンポーネントの影を設定します。xとyで方向を指定し、blurとspreadで影の見え方を調整します。 ### 3.9 不透明度 コンポーネントモジュール全体の透明度を設定します。範囲は 0 〜 100 で、デフォルトは 100 です。0 は完全に透明であることを意味します。 ### 3.10 Cursor * pointerを選択：マウスがブロック上にあるときに手のアイコンが表示されます。 * defaultを選択：マウスがブロック上にあるときに矢印のアイコンが表示されます。