# セクションを使った構築

#### セクションとは？

セクションは、Adaloで画面を構築するスピードを劇的に向上させることができる、事前に設計された完全にレスポンシブなユーザーインターフェースです。各セクションには、すでに配置されスタイルが整えられた複数のコンポーネントが含まれており、見栄え良く設計されています。150以上のセクションから選択でき、セクションを組み合わせて独自のカスタムデザインを作成できます。

#### セクションを探す

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a19c1deef1e4fc3c17d8e69349a5563af13d1731%2Fimage%20(24).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

セクションを探す方法は、左上の+ボタンをクリックし、セクションタブをクリックします。セクションはカテゴリに分類されているため、探しているものを簡単に見つけられます。また、"calendar"や"gallery"などのキーワードで検索するか、関連するセクションを表示することも可能です。

#### 画面にセクションを追加する

画面にセクションを追加するには、コンポーネントのようにドラッグして画面にドロップします。画面にドロップすると、自動的に画面の全幅に拡張されます。（セクションは全幅で設計されています）サイドナビゲーションがある場合、セクションは画面の左端ではなく、サイドナビゲーションの端に自動的にスナップします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e5a2f9f6895b2e6518385452fa6afd07ae1f33e3%2Fimage%20(26).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

画面にセクションを配置した後、セクション内の各コンポーネントを設定して、プレースホルダーコンテンツの代わりにコンテンツを追加する必要があります。テキストコンポーネントの場合は、独自のテキストを入力するか、[マジックテキストを使用](https://help.adalo.com/ja/component-basics/inserting-dynamic-text)します。リスト、フォームなどは、使用したいコレクションに接続し、リストやフォーム内の各アイテムを設定して表示したいデータを持つようにします。

#### セクションコンテナ

各セクションには内部コンテンツ領域と外側の余白があります。内部コンテンツ領域を「コンテナ」と呼び、コンポーネントを追加してボックスのように保持します。セクションのさまざまな部分を選択する方法を理解することが重要です。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-1ae8365f95a8ca953ea19d930d3f16d95e53071b%2Fsection-hovering.gif?alt=media" alt="" width="563"><figcaption><p>セクション、コンテナ、コンポーネント</p></figcaption></figure>

* コンテナ内の任意のコンポーネントをクリックすると、そのコンポーネントが選択されます。
* コンポーネントが存在しないコンテナ内をクリックすると、コンテナが選択されます。
* コンテナの外側の余白をクリックすると、セクションが選択されます。ここをクリックしてセクション全体を移動できます。

{% hint style="info" %}
セクションの境界ボックスは実線で、コンテナの境界ボックスは破線で表示されるため、簡単に区別できます。
{% endhint %}

#### セクション内のスペーシングハンドルの使用

コンテナ内のセクションを選択すると、コンテナの周囲にいくつかの追加の線が表示されます。これらをクリックしてドラッグすると、コンテナの幅や高さ、およびセクションと外側の端との間のスペーシングを調整できます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-c2e00a1939cfd6f74f0b4576edb70490935cfb41%2Fsection-padding-resize.gif?alt=media" alt=""><figcaption><p>セクション内のパディングのリサイズ</p></figcaption></figure>

左右のハンドルを使用すると、画面にドラッグした任意のセクションを既存のコンテンツの幅に合わせやすくなります。したがって、セクションをドラッグして追加し、すべてのコンテンツが他のコンテンツよりも幅広く見える場合は、単にコンテナを選択して左右のハンドルのいずれかをドラッグします。コンテナとその内部のすべてがご希望の幅に調整されます。

セクションには最小幅と最大幅も設定できます。ハンドルをドラッグしても特定の地点で「停止」する場合は、おそらく最小/最大幅の設定が原因である可能性があります。

{% hint style="info" %}
コンテナのサイズを正確な寸法に設定したり、最小/最大幅を変更したい場合は、コンテナを選択して、サイドバーのレイアウトタブをクリックしてください。詳細メニューの中には、コンテナの幅と高さの正確な値を設定するための入力欄があります。
{% endhint %}

#### 背景色と画像の追加

セクション自体やコンテナに背景色や画像を追加できます。セクションまたはコンテナを選択した状態で、スタイルアコーディオンの下に移動し、「背景タイプ」を「背景カラー」または「背景画像」に変更します。ここでは、角丸、境界線、影のスタイルも設定でき、セクションの見た目と感触を完全にカスタマイズできます。

#### セクションの積み重ね

画面を1つのセクションずつ構築し、上から下に向かって作業します。以下は、セクションを最大限に活用するためのヒントです。

* 重要：セクションは重なってはいけません。画面サイズが変更されると、セクションがより高くなったり低くなったりする場合があります。これが正しく機能するためには、セクションが互いに重ならないようにしてください。
* セクションを横に並べて配置すると見栄えが悪くなる場合があります。垂直に積み重ねたときに一貫した外観になるように設計されています。
* レスポンシブモードで画面にセクションを追加する場合は、他の画面サイズを確認してから、モバイル、タブレット、デスクトップにセクションを移動してからさらにセクションを追加してください。

#### セクションの移動

セクションを移動する場合、セクション内のコンテンツではなく、セクションを移動させることが極めて重要です。例えば、セクションの中にあるリストを選択した場合、意図せずセクションの外にドラッグしてしまう可能性があります。セクションが選択されていることを確認するには、何かを選択した際にサイドバーをご覧ください。選択したもののタイトルの上に 「セクション 」と表示されているのが分かるでしょう。

#### 独自のセクションを構築する

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-4bc1059ee2381637da3fd3e931b2f1f955d3d612%2Fimage%20(203).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

必要なセクションが見つからない場合は、セクションタブに「空のセクション」があり、独自のセクションを作成できます。これはグループのように機能します。好きなコンポーネントをドラッグして入れることができ、それらをまとめて保持します。独自のセクションを構築する際のポイントは以下の通りです。

* レスポンシブアプリを構築している場合は、独自のセクションを作成する前に、当社のレスポンシブレイアウトシステムがどのように機能するかを確認してください。
* 空でないセクションを注意深く調べて、それがどのように構築されているかを確認してください。それらの内部のコンポーネントを選択し、レイアウトタブを見て設定を確認します。これは、同様のレイアウトを作成する際に役立ちます。
* 画面が非常にシンプルでない限り、画面全体を1つの巨大なセクションにするのは避けてください。また、画面ごとに50個のセクションを持つなど、複雑すぎる構造にするのも避けましょう。平均的な画面は約3〜4つのセクションで構成されています。
* セクション内に次のものを絶対に配置しないでください。
  * 「スクロール時に固定」に設定されたコンポーネントはセクション内に配置しないでください。固定コンポーネントは、位置に影響を与える親オブジェクトから解放される必要があります。例としては、常に固定されている「アクションボタン」コンポーネントがあります。
  * 当社の組み込みのトップナビゲーション、サイドナビゲーション、ボトムナビゲーション、およびアプリバーのコンポーネントはセクション内に配置しないでください。これらは常に独立して存在し、他の親コンポーネント内に配置されるべきではありません。
  * セクションを他のセクションの中にネストさせないでください。セクションは常に垂直に積み重ねられ、重ならないように配置されるべきです。