リストとは
共通した構造やレイアウトを持つボックスの集まりを「リスト」として管理し、それぞれに別々のテキストや画像、URLリンクなどを設定できる機能です。 例えばカードデザインのように、デザインは共通で内容だけが異なる要素を一覧で配置したい場合に利用します。
リストの外観は、同一レイアウトのボックス群「リストアイテム」とそれを包括する「リスト」で構成されます。
リストに適用する画像、テキスト、URLなどのコンテンツデータは、プロパティ化して表で管理をし、リストの外観と紐付けて表示をします。
Tips：類似機能として、コンポーネントがあります。ページをまたいで繰り返し利用するデザイン要素を管理する場合に使用します。
リスト外観の構成
リストの外観は、同一レイアウトのボックス群(リストアイテム)と、それらをまとめるボックス（リスト）の親子関係のボックスで構成されます。
リスト
リストアイテム（同一レイアウトのボックス群）をまとめる親ボックスがリストです。
スクリーン上での選択時：
ボックス左上に、リストアイコン
と<ul>タグが表示されます。ボックスの枠線が水色にハイライトされます。
レイヤー名：
先頭に水色のリストアイコン
が付き、右端に<ul>タグが表示されます。
右パネルの[データ]タブ内：
プロパティ管理表が表示されます。リストが包含するリストアイテムに反映するデータの管理に使用します。
リストアイテム
リストに内包される、同一レイアウトのボックス群がリストアイテムです。
スクリーン上での選択時：
ボックス左上に、リストアイテム番号
と<li>タグが表示されます。番号はプロパティ管理表の上から順に、0番から数字が割り当てられます。（スクリーン上でリストアイテムを直接選択しづらい場合は、レイヤーパネルから選択します。）
レイヤー名：
先頭に水色のリストアイテム番号
が付き、右端に<li>タグが表示されます。
右パネルの[データ]タブ内：
選択中のリストアイテムに対応するデータのみが表示されます。
注意：リストアイテムの追加・複製方法
リストアイテムは、スクリーン上やレイヤーパネルでコピー＆ペーストができません。追加する場合は、後述のリストアイテムの追加・削除・並び替えで説明する方法を使用します。
リストを作成する方法
リストの作成には、リストパーツを追加する方法と、既存のボックスをリスト化する方法があります。
プリセットされたリストパーツを使用する手順
あらかじめリストとして設計されているパーツを利用すると、すぐにリストを配置できます。
画面左の[追加]パネルを開きます。
[パーツ]タブを開きます。
リストカテゴリの[すべて表示]をクリックし、追加したいリストパーツを選択します。
既存のボックスをリスト化する手順
既存のボックスをリスト化することも可能です。
注意：一度リスト化したボックスは、リストの解除ができません。通常のボックスとして扱いたい場合は新たに作成します。
リストアイテムとして使用するボックスを選択します。複数ボックスで構成されている場合には、あらかじめグループ化し、親ボックスを選択します。
以下のいずれかの方法でリスト化します。
キーボード操作：⌘＋L（Windowsでは Ctrl＋L）
右クリックメニュー：[リスト化]を選択
右パネル：上部の[Box]ボタンをクリックし、[リスト化]を選択
リスト化が完了すると、ボックスが複製されリストアイテムとなります。
同時に、それらをまとめる親ボックス（リスト）が生成されます。
Tips：リスト化したアイテムがつぶれて見える場合、以下の可能性があります。
・リスト（親ボックス）の幅・高さがautoになっている
・アイテム（子ボックス）のサイズ単位が%などの相対値になっている
リストアイテムのデザインを編集する手順
リストのデザインを編集する際は、編集モードに切り替える必要があります。
デザインを編集したいリストを選択します。
この時、選択中のリストが水色にハイライトされます。
デザイン編集モードに切り替えます。
リストをダブルクリックするか、Enterキーを押してください。レイヤーパネル上の変化：編集対象のリスト、または編集対象のリストアイテムだけが表示されます。
スクリーン上の変化：編集対象のリストが明るくハイライトされます。
リストアイテムのデザインを編集します。
どれか一つのリストアイテムのデザインを変更すると、同じリスト内の全てのリストアイテムに反映されます。
編集モードを終えるには、スクリーン上のリスト以外の場所をクリックしてください。
リストのデザイン編集に関する参考記事
リストのプロパティ
通常のボックスでは、ボックス自体に直接テキスト、画像、URLなどのコンテンツデータを適用しますが、リストではボックスのコンテンツデータをプロパティ化して別管理します。
プロパティ管理表
リストのデータは、プロパティ管理表で管理をします。表はリスト選択中に右パネルの[データ]タブに表示されます。テキスト、画像、URL以外にも、カラーやブール値プロパティの利用が可能です。
プロパティ管理表の見方
プロパティ管理表は、リストアイテムが横軸に、プロパティが縦軸に並びます。
プロパティ管理表の横軸（アイテム）
それぞれの横一列は特定のリストアイテムのデータを表します。
並び順は、リストアイテム番号画像に対応し、上から順に0番、1番、2番…と続きます。
プロパティ管理表の縦軸（プロパティ）
それぞれの縦軸には「タイトル」「キャプション」などのプロパティごとにデータが並びます。
最上列にはプロパティ名が表示され、編集も可能です。
同一プロパティのデータは、リストの外観上でも同一要素内で表示されます。
Point：プロパティ管理表で管理する各プロパティが、スクリーン上のリストアイテム内での表示場所（ボックス）に紐付けされるまで、データはデザインに反映されません。
プロパティ管理表の操作方法
プロパティ管理表では、リストアイテムやプロパティの並び替えや編集ができます。
リストアイテムの追加・削除・並び替え
リストアイテムの追加・削除・並び替えは、プロパティ管理表で行います。以下の操作は、スクリーン上とレイヤーパネル上のリストに反映されます。
リストを選択します。
右パネルが開きます。パネルが閉じている場合は、右パネルを開いてください。
[データ]タブを開き、プロパティ管理表で以下の操作を行います。
リストアイテムの追加：プロパティ管理表の下部にある[+New]をクリックして追加します。
リストアイテムの削除：アイテムをホバーし、右列に表示されるゴミ箱アイコンをクリックします。
リストアイテムの並び替え：アイテムをホバーし、表の左端に表示されるスライドアイコンをドラッグします。レイヤーパネルでリストアイテムのレイヤーをスライドさせても並び替えができます。
注意：スクリーン上やレイヤーパネル上で、リストアイテムをコピー・ペーストしても、追加や複製はできません。
プロパティの追加・削除・並べ替え・項目名編集
スクリーン上またはレイヤーパネルでリストを選択します。
右パネルの[データ]タブにあるプロパティ管理表で以下の操作を行います。
プロパティの追加：表の右上の[+]をクリックし、プロパティの種類を選びます。
プロパティの削除：プロパティ名をクリックして[Delete]を押します。
プロパティの並べ替え：プロパティ名をクリックしたまま左右にスライドします。
プロパティの項目名編集：プロパティ名をクリックして名前を編集します。
Point：新しく追加したプロパティの内容を画面に表示するには、後述の手順でボックスに紐付ける必要があります。
プロパティの種類
プロパティの種類 | 説明 |
テキストプロパティ | テキストボックスやリッチテキストボックスに紐付けます。 |
画像プロパティ | |
URLプロパティ | プロジェクト内のページや、外部サイトへのリンクを設定できます。 |
ブール値プロパティ | オン／オフ（true / false）を表します。おすすめ商品のマーク付けや、特定データの色変更などに利用できます。 |
カラープロパティ | 色（カラーコード）を登録し、ボックスの塗りや文字色として利用できます。 |
ブール値プロパティやカラープロパティの活用例は、「リストアイテムごとにデザインを変える」を参照してください。
プロパティの内容（データ）を編集する方法
各リストアイテムに表示するデータは、右パネルまたはスクリーン上で編集します。
右パネルで編集する手順
リストを選択します。
右パネルが開きます。パネルが閉じている場合は、右パネルを開いてください。
右パネルの[データ]タブにあるプロパティ管理表で、該当セルを編集します。
Point：リストにCMS・RSS・APIデータなどのデータを紐付ける場合は、プロパティ管理表の右上に表示された[データを紐づけ]をクリックします。
詳しくは動的リストの記事を参照してください。
スクリーン上で編集する方法
テキストプロパティと画像プロパティは、スクリーン上のボックスを直接編集・差し替えできます。編集後はリスト外をクリックして確定します。
注意：以下の場合、スクリーン上では直接変更できません。右パネルの[データ]タブから編集してください。
カルーセル（リスト）の場合
文字列フィルターを設定している場合
テキスト欄に直接文字列が入力されている場合
データ（プロパティ管理表）とデザイン（ボックス）を紐付ける方法
右パネルの[データ]タブ内のプロパティ管理表で管理しているデータは、リストアイテム内のボックスに紐付けることでデザインに反映されます。
リストアイテムを選択します。リスト内のどのリストアイテムを選択しても構いません。スクリーン上でリストアイテムを直接選択しづらい場合は、レイヤーパネルから選択します。
右パネルが開きます。パネルが閉じている場合は、右パネルを開いてください。
各プロパティ左側のコネクタ（ハンドル）をドラッグし、リストアイテム内の表示させたいボックスにドロップします。
この記事で解決しない疑問やがある場合は、エディタ左下の[？]からチャットサポートへお問い合わせください。