STUDIOのリストについて
同じレイアウトを繰り返す場合にリスト機能を使用すると、内容やスタイルが一括で管理でき効率的な運用が可能です。
リストはテキストや画像などのデータをプロパティとして追加・管理でき、デザインしたリストボックスにプロパティを紐付けて表示します。なお、一度リスト化すると後からリスト化の解除はできません。
リストの構成
リストは親ボックス (ul) と 子ボックス (li) から構成されています。
リストの親ボックス（ul）を選択した状態でレイヤーパネルを開くと、リスト全体のプロパティとデータが確認できます。
このリストアイテムにテキストや画像といったプロパティが追加でき、リスト上に表示したりリンク先として設定することができます。
リストの作成方法
選択したボックスをアイテム (li) とするリスト (ul) を以下いずれかの方法で作成できます。
キーボード操作で ⌘＋L (windowsでは Ctrl＋L)
右クリックメニューからリスト化を選択
ボックス設定パネル内Boxボタンをクリックし、リスト化を選択
リスト化したボックスには、以下画像のように枠が表示されます。この枠の青い部分をダブルクリックするか、Enterを押下するとデザイン編集ができる状態になります。
リストアイテムの追加
リストの子ボックス (li) は、アイテムと呼ばれます。アイテムには画像やテキストなどのプロパティが追加できます。
新たにアイテムをリストに追加するには、設定パネルで「+New」をクリックします。
アイテムの並び替え
アイテムにカーソルを乗せると表示されるアイコンをドラッグして並び替えができます。並び替えはレイヤーパネルとスクリーン上の２箇所から行えます。
レイヤーパネル：
スクリーン：
アイテムの削除
レイヤーパネルとスクリーン上の２箇所から削除できます。
レイヤーパネル：
アイテムにカーソルを乗せると表示されるゴミ箱アイコンをクリックします。
スクリーン：
アイテムにカーソルを乗せると表示される「×」をクリックします。
プロパティの追加
「テキスト」「画像」「URL」「ブール値」「カラー」のプロパティが追加できます。
プロパティは、レイヤーパネルとボックス設定パネルの２箇所から追加でき、ボックス設定パネルからは、テキストと画像プロパティのみ追加可能です。
レイヤーパネル：
リスト右上の「+」をクリックし追加します。
ボックス設定パネル：
リストの青枠をダブルクリックし、編集モードに切り替えます。テキストまたは画像ボックスをリスト内に配置します。
配置したボックスを選択した状態で、エディタ右側のパネルを開き「＋リストデータに追加」をクリックします。
自動的にリストへプロパティとして追加されます。
プロパティの編集
プロパティの内容は、スクリーン上とレイヤーパネルの２箇所から編集できます。
スクリーン：
画像とテキストは通常の画像・テキストボックスと同じようにスクリーン上で編集します。
※スクリーン上で直接内容変更ができないケースが以下の3通りあります。この場合はレイヤーパネルから変更してください。
カルーセル（リスト）の場合
文字列フィルターを設定している場合
テキスト欄に直接文字列の入力がある場合
レイヤーパネル：
親ボックス（ul）を選択した状態でレイヤーパネルから編集します。
また、編集モードで子ボックス（li）を選択した状態でも編集可能です。
プロパティ名の編集
レイヤーパネル上で、プロパティ名をクリックして編集します。キーボードでリターンキーまたはエンターキーを押すと変更が保存されます。
プロパティの紐付け
リストへプロパティを追加した後は、ボックスやスタイルに紐付けを行います。
紐付けは２箇所から行え、ボックス設定パネルでは、テキスト、画像、URLプロパティのみ操作可能です。
レイヤーパネル：
リストの青枠をダブルクリックし編集モードに切り替え、レイヤーパネルを開きます。
データの右横にある青い丸をドラッグしてボックスに紐付けます。
プロパティによっては、塗りや横幅などのスタイルに紐づけることができます。詳しくは、以下記事をご覧ください。 ※以下記事で紹介されるテキストプロパティの「改行あり・なし」と「参照プロパティ」はリスト側では提供していない機能です。
ボックス設定パネル：
ボックスを選択し、設定パネルを開きます。テキスト、画像、またはリンク欄をクリックすると、プロパティの選択肢が表示されるので任意のプロパティを選択してくだい。
なお、テキストプロパティには文字列フィルターが設定できます。詳しくは、プロパティの文字列フィルタ｜STUDIO Uをご覧ください。
