> ## 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のレイアウトコンテナコンポーネントの使い方を解説。定義や利用シーン、属性設定、レイアウトモード・モバイル設定・ソースコード編集などのスタイル設定に加え、CSSレイアウトモデルの基礎まで、ページ設計に必要な情報を紹介します。

## 1. レイアウトコンテナコンポーネントについて

### 1.1 レイアウトコンテナとは

* レイアウト：既存のビジュアルコンポーネントの配置を制御します。1つのアクションを表します。
* レイアウトコンテナ：レイアウト機能を持つコンテナです。レイアウトコンテナ内に複数のコンポーネントを配置して表示できます。
* 複雑なレイアウトが必要な場面では、YiDAのflexレイアウト（**flex-layout**）の使用を推奨します。現在、フロントエンド業界で主流のCSSレイアウト手法でもあります。
* flexレイアウトの詳細については、**チュートリアルリンク**をご参照ください。

レイアウトコンテナコンポーネントを追加します。

レイアウトコンテナ内に個別のコンポーネントを追加します。

### 1.2 利用シーン

* ページを分割する必要がある場合。たとえば、ページを2カラムで表示する場合など。
* ページを異なる画面サイズに対応させる必要がある場合。
* ページレイアウトにネスト、相対配置、位置依存の設計が含まれる場合。
* 高度なCSSレイアウト技術を必要とするページスタイルを実装する場合。

<Note>
  コンポーネントの属性、使い方、例については、[**コンポーネント詳細ページ**](/ja/open/yida/components/layout/regionalContainer)をご参照ください。
</Note>

## 2. 属性

### 2.1 レイアウト

システムテンプレートを直接選択するか、カスタムレイアウトを設定します。以下の例をご覧ください。

レイアウトモードを選択します。

### 2.2 モバイル設定

モバイル端末でのコンポーネントの配置方法を定義します。以下の例をご覧ください。

モバイル設定。

## 3. スタイル

レイアウトコンテナのスタイル設定です。

コンポーネントのスタイルを設定します。

### 3.1 ソースコード編集

CSSソースコードで直接スタイルを編集します。現在のdivはデフォルトでflexレイアウトを使用しています。

### 3.2 状態

従来のPC側コンポーネントの状態によるグループ設定は、次のとおりです。

* default：通常状態。
* hover：ポインタがコンポーネントのホットゾーン上にあり、クリックしていない状態。
* focus：ページ要素がカーソルのフォーカス位置にある状態。
* active：ページ要素が選択され、アクティブになっている状態。

**備考：**

* default状態は他の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 マージンとパディング

マージンとは、ボックスモデルにおいて、ボックスと他の要素ノードとの距離を指します。

パディングとは、ボックスモデルにおいて、ボックスとその内部要素との間の余白を指します。以下の例をご覧ください。

### 3.5 テキスト

テキスト設定は、グループ内のコンポーネントタイトルに影響します。テキストをカスタマイズするか、プリセットのテキストタイトルを選択します。以下の例をご覧ください。

### 3.6 背景

システム内蔵のカラーから選択するか、ローカルの画像を背景としてアップロードできます。以下の例をご覧ください。

### 3.7 ボーダー

レイアウトコンテナコンポーネントのボーダー効果を設定します。

角丸の設定もサポートしており、コンポーネントの4つの角の丸みを制御できます。以下の例をご覧ください。

### 3.8 シャドウ

コンポーネントのシャドウ投影を設定します。xとyで方向を指定し、blurとspreadでシャドウを調整します。以下の例をご覧ください。

### 3.9 不透明度

* ブロック全体の透明度を設定します。範囲は0〜100です。
* デフォルトは100です。0は完全に透明であることを意味します。

### 3.10 Cursor

* pointerを選択すると、ポインタがブロック上にホバーしたときに手のアイコンが表示されます。
* defaultを選択すると、ポインタがブロック上にホバーしたときに矢印アイコンが表示されます。