左右のハンドルを使用すると、画面にドラッグした任意のセクションを既存のコンテンツの幅に合わせやすくなります。したがって、セクションをドラッグして追加し、すべてのコンテンツが他のコンテンツよりも幅広く見える場合は、単にコンテナを選択して左右のハンドルのいずれかをドラッグします。コンテナとその内部のすべてがご希望の幅に調整されます。
セクションには最小幅と最大幅も設定できます。ハンドルをドラッグしても特定の地点で「停止」する場合は、おそらく最小/最大幅の設定が原因である可能性があります。
{% hint style="info" %}
コンテナのサイズを正確な寸法に設定したり、最小/最大幅を変更したい場合は、コンテナを選択して、サイドバーのレイアウトタブをクリックしてください。詳細メニューの中には、コンテナの幅と高さの正確な値を設定するための入力欄があります。
{% endhint %}
#### 背景色と画像の追加
セクション自体やコンテナに背景色や画像を追加できます。セクションまたはコンテナを選択した状態で、スタイルアコーディオンの下に移動し、「背景タイプ」を「背景カラー」または「背景画像」に変更します。ここでは、角丸、境界線、影のスタイルも設定でき、セクションの見た目と感触を完全にカスタマイズできます。
#### セクションの積み重ね
画面を1つのセクションずつ構築し、上から下に向かって作業します。以下は、セクションを最大限に活用するためのヒントです。
* 重要：セクションは重なってはいけません。画面サイズが変更されると、セクションがより高くなったり低くなったりする場合があります。これが正しく機能するためには、セクションが互いに重ならないようにしてください。
* セクションを横に並べて配置すると見栄えが悪くなる場合があります。垂直に積み重ねたときに一貫した外観になるように設計されています。
* レスポンシブモードで画面にセクションを追加する場合は、他の画面サイズを確認してから、モバイル、タブレット、デスクトップにセクションを移動してからさらにセクションを追加してください。
#### セクションの移動
セクションを移動する場合、セクション内のコンテンツではなく、セクションを移動させることが極めて重要です。例えば、セクションの中にあるリストを選択した場合、意図せずセクションの外にドラッグしてしまう可能性があります。セクションが選択されていることを確認するには、何かを選択した際にサイドバーをご覧ください。選択したもののタイトルの上に 「セクション 」と表示されているのが分かるでしょう。
#### 独自のセクションを構築する
必要なセクションが見つからない場合は、セクションタブに「空のセクション」があり、独自のセクションを作成できます。これはグループのように機能します。好きなコンポーネントをドラッグして入れることができ、それらをまとめて保持します。独自のセクションを構築する際のポイントは以下の通りです。
* レスポンシブアプリを構築している場合は、独自のセクションを作成する前に、当社のレスポンシブレイアウトシステムがどのように機能するかを確認してください。
* 空でないセクションを注意深く調べて、それがどのように構築されているかを確認してください。それらの内部のコンポーネントを選択し、レイアウトタブを見て設定を確認します。これは、同様のレイアウトを作成する際に役立ちます。
* 画面が非常にシンプルでない限り、画面全体を1つの巨大なセクションにするのは避けてください。また、画面ごとに50個のセクションを持つなど、複雑すぎる構造にするのも避けましょう。平均的な画面は約3〜4つのセクションで構成されています。
* セクション内に次のものを絶対に配置しないでください。
* 「スクロール時に固定」に設定されたコンポーネントはセクション内に配置しないでください。固定コンポーネントは、位置に影響を与える親オブジェクトから解放される必要があります。例としては、常に固定されている「アクションボタン」コンポーネントがあります。
* 当社の組み込みのトップナビゲーション、サイドナビゲーション、ボトムナビゲーション、およびアプリバーのコンポーネントはセクション内に配置しないでください。これらは常に独立して存在し、他の親コンポーネント内に配置されるべきではありません。
* セクションを他のセクションの中にネストさせないでください。セクションは常に垂直に積み重ねられ、重ならないように配置されるべきです。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.adalo.com/ja/design/designing-your-app/building-with-sections.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.