グリッド領域

グリッド領域を使用すると、簡単に再配置できる再利用可能な配置を作成できます。グリッド領域にグリッドの子要素を挿入し、領域を移動して、すべてのコンテンツが領域に合わせて調整される様子を確認します。グリッドのすべての出現が自動的に更新されます。

グリッド領域を利用することで、次のことが可能になります。

• 再利用可能なグリッドレイアウトを確立する
• 領域を再編成して、さまざまなデバイスのグリッドレイアウトを変更します。
• グリッドレイアウトの複数のインスタンスを同時にアップグレードする

この記事を通じて、以下のことがわかります。

1. グリッド領域を使ったレイアウトの考案方法
2. グリッド領域にコンテンツを含め、配置し、整列させる方法
3. グリッド領域を再配置およびサイズ変更する方法
4. さまざまな画面サイズに合わせてグリッド領域を構築する方法
5. グリッド領域を使用してレイアウトをリサイクルする方法
6. グリッドのアクセシビリティを検査する方法
7. よくある質問

グリッド領域を使ったレイアウトの考案方法

グリッドを確立したら、グリッド上の領域のアウトラインを作成して、再利用可能なレイアウトを生成できます。

グリッドテンプレート領域を区切る

グリッド領域をキャンバス上に直接挿入することができます。グリッド編集モードに入り、グリッドセルにマウスを移動して「プラス”アイコンが表示されます。グリッド領域を追加したら、コーナーをクリックしてドラッグし、領域を囲んで位置を変更することができます。また、領域ラベルをクリックして設定モーダルで位置を指定したり、 スタイルパネル、領域ラベルをクリックして、位置を定義します。

地域を特定する

グリッド領域に名前を割り当てるには、グリッド編集モードにアクセスし、領域ラベルをクリックして、 名前グリッド領域名は、領域の役割 (「フッター」など) や領域に含まれるコンテンツの種類 (「メイン画像」など) を説明するのに役立ちます。

グリッド領域にコンテンツを含め、配置し、整列させる方法

グリッド領域を定義したら、各グリッド領域に要素を組み込むことができます。これらの要素はその領域のグリッド子となり、領域に合わせて自動的に調整されます。

グリッド内の要素を移動するには、要素を選択し、 スタイルパネル > グリッドチャイルド > 位置に設定してください エリア、要素を配置したい領域を グリッド領域 落ちる。

領域内のコンテンツを揃える

領域内に配置されたグリッドの子は、親グリッドから配置設定を継承します。領域内の単一のグリッドの子の配置を変更するには、グリッドの子を選択し、 スタイルパネル > グリッドチャイルド > 整列をクリックし、希望の配置設定を選択します。

グリッド領域を再配置およびサイズ変更する方法

グリッド領域内の要素は移動したりサイズを変更したりできます と 地域。

領域を移動するには、グリッド編集モードに入り、領域を新しい位置にドラッグします。領域のサイズを変更するには、そのコーナーをドラッグします。領域は重なり合うことができないため、領域を再びまたぐ前にサイズを変更する必要がある場合があります。

さまざまな画面サイズに合わせてグリッド領域を開発する方法

領域を修正することは、さまざまな画面サイズ向けに設計する場合に特に便利です。個々のブレークポイントで領域の位置を変更したりサイズを変更したりして、さまざまなデバイス上のレイアウトを変更できます。

グリッド領域を使用してレイアウトをリサイクルする方法

親グリッド クラスは、定義した各グリッド領域に関係します。グリッド領域のレイアウトをリサイクルするには、親グリッド クラスを別の要素 (div ブロックなど) に適用します。その後、コンテンツを新しいグリッド領域にドラッグし、新しいコンテンツで同じレイアウトを構築できます。

このアプローチは、たとえば、再利用可能なページ レイアウトを生成する場合に役立ちます。ヘッダー領域、メイン コンテンツ領域、フッター領域を区切ることができます。または、画像領域とテキスト領域を含むカード レイアウトを形成することもできます。

複数の発生にわたってグリッド領域を変更する

これらのグリッド領域レイアウトは、コンポーネントと同様に機能します。グリッド領域レイアウトのインスタンスを 1 つ変更するだけで、サイト全体のグリッド領域レイアウトのすべてのインスタンスをすぐに更新できます。グリッド領域レイアウトを変更すると、コンテンツの配置に影響する可能性があるため、注意してください。グリッド領域を 1 回だけ調整する必要がある場合は、いつでもコンボ クラスを使用できます。

グリッドのアクセシビリティを検査する方法

手動で配置されたグリッドの子と同様に、グリッド領域の子はグリッド内で明示的にアウトラインされます。これらの子がグリッド領域とともに調整されても、document 順序での位置は変更されません。サイトのアクセシビリティを確保するためにグリッド内で領域を移動する場合は、この点に注意してください。領域を移動するのは整理のためであり、読み取り順序が影響を受けないことを確認してください。

明示的なグリッドの子を並べ替える ナビゲーター ユーザーにコンテンツを読んでもらいたい順序に合わせます。このアクションは、ページ上のグリッドの子要素の配置には影響しません。

よくある質問

リージョンの名前を変更したり、リージョンを削除したりするとどうなりますか?

領域を削除すると、その領域に配置されたグリッドの子要素は、自動生成された行と列に移行します。これらの子要素を復元するには、同じ名前の領域を再挿入します。

グリッド領域に複数の要素を挿入するとどうなりますか?

要素は重なり合います。ナビゲーターでこれらの要素を並べ替えたり、Z インデックスを使用して重なり合う順序を調整したりできます。

グリッド領域の一部であるセルにグリッドの子を挿入できますか?

はい、自動配置または手動で配置されたグリッドの子は、領域の一部でもあるセルを占有できます。

たとえば、背景色付きのスパンされたグリッド領域を生成し、その後、手動で配置したヘッダー コンテンツをグリッド セルに挿入できます。

1. 最初の行の4列にまたがる「ヘッダー」グリッド領域を作成します。
2. 「ヘッダー」グリッド領域内にdivブロックを配置し、背景色を定義します。
3. ロゴを列 1 行 1 に手動で配置する
4. ナビゲーションバーを手動で配置し、行 1 の列 2 から 4 まで広げます。

コレクション リストのグリッド領域を描画できますか?

コレクション リストのグリッド領域を描画することはできませんが、コレクション リスト内のコレクション アイテムのグリッド領域を描画することはできます。