柱のサイズ変更
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
行の最大サイズは12です。同じ大きさの列が2ついて合計サイズが12で、さらに1列を追加すると最大サイズを超えたとします。その余った列は次の行に移動し、デフォルトで値12が割り当てられます。これは下の図で示されています。
同じ行に3列すべてを同じサイズで表示したい場合は、各列のサイズを手動で調整し、値4にする必要があります。
!ヒント列のサイズを変更するには、リサイズしたい列を選択してください。右側でレイアウトを展開し、サイズを選択します。
!注柱の大きさに用いられる単位は相対的で、1単位は総サイズの12分の1に相当します。総大きさが100%であるため、1サイズ単位は100/12=8.333%となります。
モバイルや大画面向けにレスポンシブカラムの設定
Column Splitterコンポーネントを使用する際は、まずモバイルデバイスを念頭に置いて列レイアウトを設定し、必要に応じて画面サイズを大きく調整してください。
グリッドレイアウトシステムはBootstrapのレスポンシブブレークポイントに基づいており、デフォルトで小さい画面サイズの設定を継承しています。つまり、ブレークポイントが明示的に設定されていない場合、最も近い小さいブレークポイントの設定を使用します。
モバイルで重ねて、大きな画面で並べて表示できるレイアウトを作成するには:
- ページビルダーで、ページに挿入された カラムスプリッター コンポーネントをクリックします。
- キャンバスコンテキストツールバーで、例えば Mobileのページビルダーで最小のビューポートに切り替えます。
- Column Splitterコンポーネントで各列を選択し、右側のConfugurationパネルの Design > Layout > Sizeで各列の Column span 値を12に設定します。これにより、モバイルデバイス上で列が縦に積み重なられます。
- キャンバスのコンテキストツールバーで、列を並べて表示したい最小のブレークポイント(例えば Desktop Small)に切り替えてください。
- 列を選択し、右側のコンフュージュレーションパネルの デザイン > レイアウト > サイズで「 継承のオーバーライド」をクリックします。
- 列 の幅 を希望の幅に設定してください。例えば2列レイアウトでは6です。
- 残りの列でも同じ構成を繰り返します。
このブレークポイントのレイアウトが継承されたモバイル設定を上書きするため、モバイルデバイスでは列が積み重ねられたまま、大きな画面では並んで表示されます。
変更を加えた後は、サポートするすべてのブレークポイントでレイアウトを見直してください。大きなブレークポイントを設定していない場合、ページビルダーは最も近い小さいブレークポイントからレイアウトを引き継ぎ、タブレットやデスクトップでは予期せぬ結果を生むことがあります。