グリッドの追加と設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポーネントを作成すると、デフォルトで12列5行のグリッドを含む単一のセクションになります。
コンポーネントに追加セクションを追加する
デフォルトではコンポーネントは1つのセクションを持ちますが、さらにセクションを追加でき、それぞれのセクションごとにグリッドを独立して設定できます。
コンポーネントに追加セクションを追加するには:
-
Component builderで、コンポーネントキャンバスの外側、すでに要素があればクリックしてください。
-
SectionコンテキストツールバーでAdd element > Sectionをクリックします。
-
現在のセクションの上または下に新しいセクションを追加するには、カーソルを現在のセクションの上部か下部に移動させ、グリッドカーソルがハイライトされているのが見えるまで
からクリックします。
追加のセクションは 
クリックで削除できます。最後のセクションを削除すると、以前に追加された要素がグリッドから消えます。
セクションのグリッドを設定する
デフォルトではセクションのグリッドは12列5行で構成されていますが、列の削除や行の追加・削除を設定することも可能です。
グリッド内の列の数はレスポンシブデザインによく使われます。例えば、大型デバイス用12列、中型機器用8列、小型機器用4列のグリッドを使って異なるバージョンのコンポーネントを構築できます。
行数は単純に部品の設計によって決まります。高い部品ほど行数が増えます。行数が正しく調整されていないと、コンポーネント内に空きスペースができたり、逆にユーザーはスクロールしてコンポーネントの下部を見る必要があります。
セクションを設定するには:
-
右側のパネルのSection configurationオプションを使って列数と行数を変更してください。
-
段数はセクションの下にあるダブルアローを上下にドラッグして変更します。
行を拡張可能にする
デフォルトのグリッドに描画された要素は絶対サイズを持ち、その要素に多線の内容がその要素のサイズを超える場合は切り取られることがあります。このため、要素にマッピングされたコンテンツが含まれている場合、グリッド内に1つ以上の拡張可能な行を定義し、その拡張可能な行の上に構築されたコンテナが自動的にコンテンツを受け付けるように成長することを推奨します。
行を拡張可能にするには:
-
Component builderで、コンポーネントキャンバスの外側、すでに要素があればクリックしてください。
-
左側のペイン、Layout & alignmentで、Grid sizingをクリックします。
-
Expandable rowsセクションでMake a row expandableをクリックします。
-
ドロップダウンメニューで、拡張したい行を選択します。行はグリッド上の位置(最初、中央、最後)や行番号(例えば3行目)に基づいて指定できます。
拡張可能な列は薄いグレーのハイライトがあることで認識できます。