# スクリーンサイズの可視性

*スキルレベル: 中級*

## 開始前に

* このガイドを読む前に、[定義と用語](/ja/design/designing-your-app/definitions-and-terms.md) に慣れておくことを強くお勧めします。
* このガイドは、レスポンシブレイアウトアプリを構築する際にのみ適用されます。

## 動画

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

## 手順

#### 1. 画面サイズの表示コントロールにアクセスするには、コンポーネントをクリックして、次にレイアウトタブをクリックします。

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

#### 2. 一番上に、このコンポーネントの異なる画面サイズ用の表示コントロールが表示されます。

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

#### 3. これらのボタンのいずれかをクリックすると、選択したコンポーネントのデバイス表示をオンまたはオフに切り替えることができます。

たとえば、この四角形のコンポーネントがモバイルでのみ表示される必要がある場合、デスクトップとタブレットの表示をオフにします。以下のスクリーンショットで、ボタンが今やわらかく灰色になり、「閉じた目」アイコンが付いていることに注目してください。

{% hint style="info" %}
**注意:** コンポーネントまたはグループの表示をオフにすると、その画面サイズの[共有レイアウト設定](/ja/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md) も無効になります。以下のスクリーンショットで、デスクトップとタブレットのトグルがオフになっているため、それらの画面サイズの共有レイアウト設定を変更するオプションがないことに注意してください。
{% endhint %}

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

#### 4. 個々のコンポーネントだけでなく、コンポーネントのグループ全体の表示設定も変更できます。

グループの表示設定は、そのグループ内の個々のコンポーネントの表示設定を上書きします。

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

#### 5. 上記のスクリーンショットで、特定のデバイスでコンポーネントまたはグループを「非表示」にすると、[共有](/ja/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md) および[カスタム](/ja/design/designing-your-app/using-the-layout-tab/custom-layout-settings.md) レイアウト設定を編集する機能も削除されることに注意してください。

{% hint style="info" %}
**ヒント:** レスポンシブデザインを始める最も簡単な方法は、3つの主要な画面サイズ用に複数のレイアウトを設計し、それらを表示で制御することです。ただし、本当にレスポンシブで最適化されたアプリを作成するには、共有およびカスタムレイアウト設定が最適です！
{% endhint %}

## もっと詳しく知る

* 現在、画面サイズの制約を制御することはできません。画面サイズは事前に定義されたピクセル単位の寸法であり、変更することはできません。ただし、これらは非常に標準化されているため、あなたのアプリは市場にあるほとんどのデバイスに最適に対応します。詳細については、[画面サイズ切り替え機能の使用](/ja/design/designing-your-app/using-the-screen-size-switcher.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/screen-size-visibility.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.