# カスタムレイアウト設定

*スキルレベル: 中級*

## 開始前に

* [定義と用語](/ja/design/designing-your-app/definitions-and-terms.md)を理解していることを確認してください。
* 特に、[レイアウト](/ja/design/designing-your-app/using-the-layout-tab.md)タブと[共有レイアウト設定](/ja/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md)へのアクセス方法についての以前のガイドを読んでいることを確認してください。

## 動画

{% embed url="<https://www.youtube.com/watch?v=HtcRUgdG6eY>" %}

## 手順

#### 1. カスタムレイアウト設定にアクセスするには、共有レイアウト設定で画面サイズをオフに切り替えます。

これにより、そのコンポーネントまたはグループの画面レイアウト設定が独立して変更できるようになります。

<figure><img src="/files/Wcr2I7ynSrtVbWb3ba29" alt=""><figcaption></figcaption></figure>

#### 2. 画面サイズをカスタムレイアウト設定に分割すると、以前と同じオプションが残りますが、すべての設定が共有レイアウト設定とは独立して動作するようになります。

* **スケーリング:** その画面サイズに応じて、グループまたはコンポーネントは幅をスケーリングまたはリサイズします。これは、そのグループまたは四角形が含まれているかどうかに関係なくです。
* **アンカリング:** その画面サイズに応じて、グループまたはコンポーネントはアンカリングされます。これは、そのグループまたは四角形が含まれているかどうかに関係なくです。
* **位置調整:** 画面上でのコンポーネントの位置や配置は、その画面サイズに応じて完全に異なる場合があります。これは、そのグループまたは四角形が含まれているかどうかに関係なくです。グループの場合、位置の変更に伴う画面サイズ間での位置変更に対応するために、グループの境界が拡張されます。

#### 3. ドロップダウン矢印をクリックして、共有レイアウトと同じオプションが表示されますが、ここでの変更は他の画面サイズに影響しません。以下のスクリーンショットで異なる設定に注目してください:

<figure><img src="/files/6x2Sw9r82l19Z9xu8CuX" alt=""><figcaption></figcaption></figure>

#### 4. コンポーネントのスケーリングやアンカリング方法に加えて、カスタムレイアウト設定で行う位置調整やコンポーネントのサイズ調整は、共有設定とは別に保存されます。

これにより、今後は画面サイズに基づいて要素をスタックしたり、レイアウト内の列数を調整したり、特定の画面サイズに合わせて情報を移動したりすることが可能になります。以下のGIFで、価格カードとボタンがモバイルではスタックされ、タブレットやデスクトップでは並んでいる様子をご覧ください。

<figure><img src="/files/6P45ClX2WlSSvVfF5NXY" alt=""><figcaption><p>アニメーションをクリックして拡大表示してください。</p></figcaption></figure>

## もっと詳しく

* 特定の画面サイズでコンポーネントやグループの[レスポンシブ表示](/ja/design/designing-your-app/using-the-layout-tab/screen-size-visibility.md)をオフにすると、その画面サイズの共有画面設定も無効になります。
* 新しいアプリを作成する際には、Responsive Apps テンプレートをチェックしてみてください - これらは最高のレイアウトを作成する方法を学ぶのに役立ちます！

## ヘルプ

この記事に関して追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問するか、[専門家を雇う](https://adalo.com/experts)ことができます！投稿する際には、この記事へのリンクも貼り付けてください！

チュートリアルやヘルプドキュメントのリクエストがありますか？[お知らせください！](https://ideas.adalo.com/tutorial-requests)


---

# 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/using-the-layout-tab/custom-layout-settings.md?ask=<question>
```

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.