カスタムレイアウト設定

共有レイアウト設定を使用して、すべての画面サイズでコンポーネントとグループが同じように動作するようにします。

スキルレベル: 中級

開始前に

• 定義と用語を理解していることを確認してください。

• 特に、レイアウトタブと共有レイアウト設定へのアクセス方法についての以前のガイドを読んでいることを確認してください。

動画

手順

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

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

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

• スケーリング: その画面サイズに応じて、グループまたはコンポーネントは幅をスケーリングまたはリサイズします。これは、そのグループまたは四角形が含まれているかどうかに関係なくです。

• アンカリング: その画面サイズに応じて、グループまたはコンポーネントはアンカリングされます。これは、そのグループまたは四角形が含まれているかどうかに関係なくです。

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

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

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

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

アニメーションをクリックして拡大表示してください。

もっと詳しく

• 特定の画面サイズでコンポーネントやグループのレスポンシブ表示をオフにすると、その画面サイズの共有画面設定も無効になります。

• 新しいアプリを作成する際には、Responsive Apps テンプレートをチェックしてみてください - これらは最高のレイアウトを作成する方法を学ぶのに役立ちます！

ヘルプ

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

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