レスポンシブな3カラムレイアウトの作成

概要

このチュートリアルでは、次の方法を示します： Avonni 最後に、データテーブルの コンポーネント を使用して、大きな画面では横並びに表示され、小さな画面（モバイルなど）では自動的に縦に積み重なる3列レイアウトを作成する方法。

目標： デスクトップ/タブレットでは3列レイアウトにし、電話では1列レイアウトにする。

手順

ステップ1：Columnsコンポーネントを追加：

• コンポーネントライブラリから 最後に、データテーブルの コンポーネントをキャンバスにドラッグします。このコンポーネントは個々の列のコンテナとして機能します。

ステップ2：3つのカラムアイテムを追加：

• 先ほど追加した 最後に、データテーブルの コンポーネントを選択します。

• プロパティパネル（右側）内の列を管理するセクションを見つけます。

• 「＋」ボタンをクリック 3回 メインのColumnsコンポーネント内に3つの個別のカラムコンテナを作成します。

ステップ3：各カラムのレスポンシブサイズを設定：

• 概念： ほとんどのレイアウトシステムはグリッド（多くは幅12ユニット）を使用します。各カラムが異なる画面サイズで何ユニット占めるかを指定します。小さい画面で積み重なるには各カラムが全幅（12ユニット）を占める必要があります。大きな画面で横並びにするには、各カラムがそれより少ないユニット（例：3列レイアウトなら4ユニット）に設定します。

• カラム1を選択： Columnsコンポーネント内の最初のカラムアイテムをクリックします。

  • 例1：価格範囲フィルター サイズ（大きなコンテナ） （または大画面向けの類似プロパティ）を 4.

  • 例1：価格範囲フィルター サイズ（中くらいのコンテナ） （または中画面向けの類似プロパティ）を 4.

  • 例1：価格範囲フィルター サイズ（小さなコンテナ） （または小画面向けの類似プロパティ）を 12.

• カラム2を選択： 2番目のカラムアイテムをクリックします。

  • 例1：価格範囲フィルター サイズ（大きなコンテナ） 最小（Min） 4.

  • 例1：価格範囲フィルター サイズ（中くらいのコンテナ） 最小（Min） 4.

  • 例1：価格範囲フィルター サイズ（小さなコンテナ） 最小（Min） 12.

• カラム3を選択： 3番目のカラムアイテムをクリックします。

  • 例1：価格範囲フィルター サイズ（大きなコンテナ） 最小（Min） 4.

  • 例1：価格範囲フィルター サイズ（中くらいのコンテナ） 最小（Min） 4.

  • 例1：価格範囲フィルター サイズ（小さなコンテナ） 最小（Min） 12.

ステップ4：Columnsコンポーネント全体の設定を調整（オプション）：

• メインの 最後に、データテーブルの コンポーネントを再度選択します。

• 水平方向の配置： これは、カラムの グループ が利用可能なスペース内でどのように配置されるかを制御します（例： 左寄せ（Start）, 中央, 右寄せ（End））。左寄せにしたい場合は 左寄せ（Start） を選択してください。

• 垂直方向の配置： これは、カラムの高さが異なる場合にカラム内のコンテンツが垂直方向にどのように揃うかを制御します（例： カラム内で 上 上, 中央, 下）。左寄せにしたい場合は 上 折り返しを許可：

• このオプション（存在する場合）が有効になっていることを確認してください。これにより、カラムが横に収まらないときに次の行に移動できるようになります。通常はデフォルトで有効です。 ステップ5：コンテンツを追加してプレビュー：

他のAvonniコンポーネント（テキスト、画像、ボタンなど）をドラッグして、

• 作成した3つの各カラムの中に配置します。 各 3つのカラムのそれぞれにドラッグします。

• プレビュー ボタンを使用します。 ブラウザウィンドウのサイズを変更して、カラムが小さい画面で自動的に縦に積み重なり、大きい画面で横並びになる様子を確認します。