カラム
Columns コンポーネントは、Dynamic Components のレイアウトと配置を強力に制御する機能を提供します。
カラムの設定
1. 全体レイアウトの構成
カラムにコンテンツを追加する前に、Columns コンポーネントの全体的なレイアウトと構造を定義しておくと便利です。
水平方向の配置
この設定は、カラムのグリッド全体がコンテナ内で水平方向にどのように配置されるかを決定します。
左揃え：カラムをコンテナの左側に揃えます。
中央揃え：カラムをコンテナ内で中央に配置します。
右揃え：カラムをコンテナの右側に揃えます。
これは、さまざまな画面サイズでコンテンツがデザイン意図に沿ってバランスよく整列するようにするのに役立ちます。
垂直方向の配置
この設定は、コンテナ内でのカラムの垂直方向の位置決めを制御します。
上揃え：すべてのカラムをコンテナの上部に揃えます。
中央（垂直）：カラムを垂直方向に中央に配置します。
下揃え：すべてのカラムをコンテナの下部に揃えます。
この設定は、カラムの高さが異なるレイアウトで重要であり、すべてのカラムが均一に揃うようにします。
折り返しを許可
チェックすると、画面サイズやコンテナ幅がすべてのカラムを1行に収められない場合に、カラムが新しい行に折り返すことを許可します。これはレスポンシブデザインに不可欠で、異なるデバイス間でレイアウトが機能的かつ美しく保たれるようにします。
2. カラムの作成
全体のレイアウトを設定したら、コンポーネントに個々のカラムを追加できます。
カラムを追加
3. 各カラムのカスタマイズ
カラムを追加した後、各カラムを個別にカスタマイズして、目的のレイアウトや見た目を実現できます。
固定幅または柔軟幅
固定：カラムに特定の幅を設定します。ヘッダーや画面サイズに合わせてリサイズさせたくない特定のコンテンツ領域など、レイアウトを正確に制御する必要がある場合に便利です。
柔軟：カラムの幅は動的になり、コンテンツや利用可能なスペースに応じて調整されます。コンテンツサイズが変動するレスポンシブデザインに最適です。
柔軟性： 柔軟なカラムでは、「柔軟性」設定を使って動作をさらに微調整できます：
自動： カラムはコンテンツと利用可能なスペースに基づいて幅を自動的に調整します。
縮小： 1行にすべてのカラムを表示するのに十分なスペースがない場合、カラムが縮小することができます。
拡張： カラムはコンテナ内の余分なスペースを埋めるために拡張できます。
縮小不可： スペースが限られていてもカラムが縮小されるのを防ぎます。
拡張不可： 余分なスペースがあってもカラムが拡張されるのを防ぎます。
非柔軟： 柔軟性を完全に無効にし、カラムを固定幅のように振る舞わせます。
配置のバンプ
この設定では、隣接するカラムとの整列方法を制御できます。視覚的な分離やグループ化を作るために、整列を左、右、上、または下に「バンプ」できます。
パディング
カラム内のコンテンツの周りにスペースを追加するためにパディングを調整できます。左側と右側、またはすべての側面にスペースを追加するさまざまなパディングオプションから選択してください。
これらの設定を調整することで、さまざまな表示コンテキストに適応する複雑でレスポンシブなレイアウトを作成でき、異なるデバイスや画面サイズでもデザインが見栄えよく、効果的に機能することを保証します。
チュートリアル
最終更新
役に立ちましたか？