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

ボタンをクリックするだけで、異なる画面サイズでコンポーネントやコンポーネントグループの表示を変更することができます！

スキルレベル: 中級

開始前に

• このガイドを読む前に、定義と用語 に慣れておくことを強くお勧めします。

• このガイドは、レスポンシブレイアウトアプリを構築する際にのみ適用されます。

動画

手順

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

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

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

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

注意: コンポーネントまたはグループの表示をオフにすると、その画面サイズの共有レイアウト設定 も無効になります。以下のスクリーンショットで、デスクトップとタブレットのトグルがオフになっているため、それらの画面サイズの共有レイアウト設定を変更するオプションがないことに注意してください。

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

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

5. 上記のスクリーンショットで、特定のデバイスでコンポーネントまたはグループを「非表示」にすると、共有 およびカスタム レイアウト設定を編集する機能も削除されることに注意してください。

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

もっと詳しく知る

• 現在、画面サイズの制約を制御することはできません。画面サイズは事前に定義されたピクセル単位の寸法であり、変更することはできません。ただし、これらは非常に標準化されているため、あなたのアプリは市場にあるほとんどのデバイスに最適に対応します。詳細については、画面サイズ切り替え機能の使用を参照してください。

ヘルプ

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

チュートリアルやヘルプドキュメントのリクエストがありますか？お知らせください！