リストとは
リストは、同じレイアウトのボックスをまとめて管理できる機能です。
テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストに変換されます。
商品一覧やスタッフ紹介、記事一覧など、同じ形のカードを繰り返し並べたいときに活用できます。
Tips：カルーセルとコンポーネント
リストと同様に、同じレイアウト・デザインのボックスをまとめて管理できる機能として、カルーセルとコンポーネントがあります。
リストの基本構造
リストは、デザイン・レイアウトとテキストや画像、URLリンクなどのデータを別の場所で設定します。それぞれを個別に設定後、紐付け設定をすることではじめて正しく表示されます。
デザイン、レイアウト
スクリーン上で作成します。色・サイズ・子ボックスの配置や種類など、デザインやレイアウトは基本的に同一です。
コンテンツデータ
デザイン、レイアウトとは別に作成・管理し、「プロパティ」として管理します。
ボックスに反映するプロパティ（画像、テキスト、URLリンクなど）の値は、基本的にはボックスごとに異なります。
デザインとコンテンツデータの紐付け
ボックスとコンテンツデータ（プロパティ）を紐付けることで、画像、テキスト、URLリンクなどがレイアウトに反映されます。
リストの種類
通常のボックスでは、ボックス自体に直接テキスト・画像・URLなどを設定しますが、リストはデータだけを切り出して「プロパティ」として管理します。
デフォルトのリストは静的なリストとして機能し、接続するデータはデザインエディタ内の「プロパティ管理表」で作成・管理します。
リストにデザインエディタ外のデータを接続すると、動的リストとして機能します。Studio CMSや、API・RSSで取得したStudio外部のコンテンツデータの接続が可能です。
動的リストでは、通常のリストではできないフィルターやソート、表示数の設定などが可能です。詳細は、動的リストを参照してください。
Tips：対象のリストがどちらに該当するか分からない場合は、リスト／カルーセルの種類を見分ける方法を参照してください。
| 連携プロパティ | リストの挙動 | データの管理場所 |
リスト | リストプロパティ | 静的 | プロパティ管理表 |
CMSリスト | Studio CMSのプロパティ | 動的 | Studio CMSダッシュボード |
APIリスト | API・RSSで取得した外部プロパティ | 動的 | データ連携元の外部サービス |
リストのデザイン・レイアウト構成
リストのデザインは、(1)全体をまとめる親ボックス（リスト）、(2)同一レイアウトで並ぶ子ボックス群（リストアイテム）の親子関係のボックスで構成されます。
(1)リスト
リストアイテムをまとめる親ボックスがリストです。
レイヤーパネルでは、リストアイテムより上位階層のレイヤーが該当し、レイヤー名の先頭に水色のリストアイコン
が表示されます。デフォルトのhtmlタグは<ul>で、レイヤー名の右端に表示されます。
(2)リストアイテム
リスト内の同一レイアウトの子ボックス群がリストアイテムです。
リストアイテム内に配置した各種ボックスに、接続したデータのプロパティを紐付けて反映します。
レイヤーパネルでは、リストの下位レイヤーにあたり、レイヤー名の先頭に水色のリストアイテム番号
が表示されます。デフォルトのhtmlタグは<li>で、レイヤー名の右端に表示されます。
リストを作成する
リストは、あらかじめ用意されたリストパーツを使用する方法と、既存のボックスをリスト化する方法の、2種類の方法で作成します。
Point：デフォルトのリストは静的なリストとして作成されますが、動的リストとして活用する場合には、Studio CMSなどのデータソースと接続します。
詳細は、動的リスト > 動的リストを追加する > 既存のリストを動的リストに変換するを参照してください。
リストパーツを使用してリストを作成する手順
あらかじめデザインやレイアウトが組まれたリストパーツを使用する手順を紹介します。リストパーツにはあらかじめサンプルプロパティがセットされ、ボックスとも紐付けられています。
注意：ボックスやプロパティを追加した場合には、紐付け設定が必要です。
画面左のナビゲーションで[追加]を選択します。
追加パネルで[パーツ]タブを開きます。
[リスト]カテゴリの[すべて表示]をクリックし、追加したいリストパーツを選択します。
既存のボックスをリスト化する手順
一からリストを作成する場合には、既存のボックスをリスト化します。
対象のボックスを選択します。
複数ボックスで構成されている場合はあらかじめグループ化し、その親ボックスを選択します。
以下のいずれかの方法でリスト化します。
キーボード操作：⌘＋L（Windowsでは Ctrl＋L）
右クリックメニュー：[リスト化]を選択
右パネル：パネル上部のレイヤー名をクリックし、[リスト化]を選択
リスト化すると、対象ボックスと同一レイアウトのボックスが3つに複製され、それを囲む親ボックスがリストに変換されます。
Tips：リスト化したボックスがつぶれて非表示に見える場合、以下の設定が原因の可能性があります。
リスト（親ボックス）の幅・高さがautoになっている
リストアイテム（子ボックス）のサイズ単位が%などの相対値になっている
リストを解除する
リスト化されたボックスは、リストを解除すると通常のボックスに戻ります。
リストを解除しても対象ボックスのレイアウトやデザインには影響しませんが、データ連携は全て解除されます。
注意：Slugプロパティでリンク先を設定したCMSリストを解除すると、リンク設定が無効になります。
解消方法は、リンクを設定しても正しいページに遷移しない原因と対処法 > 2. リンクが正しく設定されているか確認するを参照してください。
リストを選択します。
以下いずれかの方法でリスト化を解除します。
リスト全体を編集する
リスト全体のレイアウト・外観の編集や、リストに接続するデータの編集はリスト全体を選択して行います。
リスト全体を選択する
スクリーン上、またはレイヤーパネル上で編集したいリストを選択します。
以下のように表示されていれば、リスト全体が正しく選択されています。
スクリーン：
リストの左上に、リストアイコン
とhtmlタグが表示される。リスト全体が水色にハイライトされる。
右パネル[データ]タブ：
プロパティ管理表（通常のリスト）、または接続データのデータソースとリストの表示設定欄（動的リスト）
リスト全体のレイアウト・外観を編集する
リスト全体の幅や高さ、アイテムの並び方向やアイテム間の余白の設定ができます。
参考記事：リスト内アイテムを縦並び／横並びにしたい
リストのプロパティを編集する
通常のリストは、データをプロパティ管理表で作成・管理します。
リストで使用できるプロパティの種類やプロパティ管理表の操作方法は、リストプロパティを参照してください。
リストにデータを接続する（動的リストに変換する）
Studio CMSなどのデータを接続することで、動的リストに変換できます。
手順の詳細は、動的リスト > 既存のリストを動的リストに変換するを参照してください。
リストアイテムを編集する
リストアイテムのレイアウト・外観の設定や、アイテム内の各ボックスへの設定、ボックスとプロパティの紐付け設定は、アイテムを編集可能な状態（編集モード）に切り替えてから行います。
リストアイテムを編集モードに切り替える
リスト全体を選択します。
対象のリストを選択したまま、ダブルクリックするか、Enterキーを押します。
レイヤーパネル上の変化：編集対象のリスト、または編集対象のリストアイテムだけが表示されます。
スクリーン上の変化：編集対象のリストが明るくハイライトされます。
任意のアイテムを選択し、クリックします。
レイヤーパネル上の変化：対象のリストアイテム内のレイヤーのみが表示されます。
スクリーン上の変化：ボックス左上に、リストアイテム番号
とhtmlタグが表示され、アイテム内の各ボックスが選択可能になります。右パネル上の変化：[データ]タブにプロパティと青い点（コネクターの起点）が表示されます。
アイテム内の各ボックスを編集する際は、ボックスを選択してから右パネルを開いて設定をします。
Tips：レイヤーパネルでリストアイテムを選択した場合も、同様に編集ができます。
リストアイテムの編集モードを解除する
スクリーン上のリスト以外の場所をクリックします。
編集モードが解除され、レイヤーパネル上の表示がページ全体のレイヤー表示に切り替わります。
リストアイテムのレイアウト・外観を編集する
右パネルで編集箇所の対象タブを開き、編集します。パネルが閉じている場合には、右パネルを開いてください。
編集を加えると、同じリスト内の全てのアイテムに反映されます。
リスト内のボックスにプロパティを紐付ける
リストアイテム内のボックスにプロパティを紐付けることで、テキストや画像などのコンテンツが反映されます。
リストに接続するデータの種類によって操作方法が異なるため、詳細は次の記事を参照してください。
注意：リストアイテム内のプロパティが同じ内容に置き換わってしまった場合
リスト内のアイテムは、基本的にすべて同じレイアウトで構成されますが、プロパティが正しく反映されていれば、ボックス内のコンテンツ（テキスト、画像、リンクなど）は、プロパティの内容に応じてアイテムごとに異なる内容が表示されます。
意図せず、テキスト・画像・リンクなどのコンテンツがリスト内ですべて同じ内容に置き換わってしまった場合には、以下のヘルプ記事を参照してください。
リスト risuto risu ﾘｽﾄ