# 共有レイアウト設定 *スキルレベル: 中級* ## 開始前に * [定義と用語](/ja/design/designing-your-app/definitions-and-terms.md)を理解していることを確認してください。 * 以前のガイドを読んでいることを確認してください。 ## 動画 {% embed url="" %} ## 手順 #### 1. 共有レイアウト設定にアクセスするには、コンポーネントをクリックしてからレイアウトタブをクリックします。
#### 2. レイアウトタブには、いくつかのオプションがある Shared Layout Settings ウィンドウが表示されます。 これらのオプションは、選択がグループか個々のコンポーネントかによってわずかに変化する場合があります。ここには次の2つのメイン設定があります。 * **Scaling**: 画面サイズが大きくなったり小さくなったりすると、グループまたはコンポーネントのサイズが変更されます。 * **Anchoring**: 画面の特定の部分にグループまたはコンポーネントが「引っ掛かる」方法を制御します。 * **Positioning**（表示されない）: 画面上のグループやコンポーネントの位置は、画面サイズ全体で共有されます。ある画面サイズでグループやコンポーネントを移動すると、他のすべての画面サイズでもその位置が変更されます。 これについて詳しく説明します。
#### 3. 異なる状況でどのオプションが表示されるかをよりよく説明するために、小さな意思決定ツリーを見てみましょう。 {% hint style="info" %} **注意**: 長方形は、内部のすべてのコンポーネントに対して自動グループとして機能しますが、長方形内のコンポーネントは「グループと共にスケーリング」オプションを継承しません。詳細については、[グループ化と長方形](/ja/design/designing-your-app/grouping-components.md)の記事を参照してください。 {% endhint %}
#### 4. それぞれのオプションの動作を見て、定義してみましょう。 #### スケーリングオプション スケーリングとは、画面サイズが幅で大きくなったり小さくなったりするときに、グループやコンポーネントのサイズがどのように変化するかを指します。
オプション説明
画面サイズに合わせてスケーリング画面サイズに基づいてグループやコンポーネントを大きくしたり小さくしたりします。
グループと共にスケーリング親グループのスケーリング設定に合わせてコンポーネントを拡大縮小させます。親グループが「固定されたまま」に設定されていても、このオプションは継承されます。
固定されたまま画面サイズに関係なく、グループやコンポーネントのサイズを変更しません。
#### アンカリング アンカリングとは、画面サイズが大きくなったり小さくなったりするときのグループやコンポーネントの位置を指します。 | オプション | 説明 | 例 | | ----------------------- | ----------------------------------------------------------------------------- | -------------------------------- | | 左にアンカーを設定（固定） | スケーリング時に要素と画面左側との距離を固定します。"固定"が選択されている場合にのみ利用可能です。 | ![](/files/ku7s1romhHafDvR6t2Dr) | | 右にアンカーを設定（固定） | スケーリング時に要素と画面右側との距離を固定します。"固定"が選択されている場合にのみ利用可能です。 | ![](/files/2kIj60yCPnW0yNxzPnvL) | | 中央にアンカーを設定（固定） | コンポーネントを画面の中央にアンカーしますが、画面サイズが拡大または縮小してもコンポーネントはリサイズされません。 | ![](/files/YE5JdD5W4Phkyu23dwtA) | | 中央にアンカーを設定（画面と共にスケーリング） | コンポーネントと画面の両側との距離をスケーリングします。 | ![](/files/G7E2MMgqwakT5HMcPHQM) | | 左右にアンカーを設定（画面と共にスケーリング） | スケーリング時に画面の左右両側との距離を固定します。"画面と共にスケーリング"または"グループと共にスケーリング"が選択されている場合にのみ利用可能です。 | ![](/files/IOHVG0h4nzf1w71gppfq) | #### 5. 共有画面設定の上部にあるトグルは、選択したグループまたはコンポーネントの設定を「ブレイクアウト」し、それらが同じ設定を共有しないようにします。 オフにすると、下に新しいメニューが表示され、共有画面設定とは独立してスケーリング、アンカリング、および位置を変更できます。 次のガイドでは、これらの[カスタム画面設定](/ja/design/designing-your-app/using-the-layout-tab/custom-layout-settings.md)について詳しく学びます。
## もっと詳しく知る * 特定の画面サイズでコンポーネントまたはグループの[レスポンシブ表示](/ja/design/designing-your-app/using-the-layout-tab/screen-size-visibility.md)をオフにすると、その画面サイズの共有画面設定も無効になります。 * 新しいアプリを作成する際には、レスポンシブアプリのテンプレートをチェックして、最適なレイアウトの作成方法を学ぶことができます！ ## ヘルプ この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](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/shared-layout-settings.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.