このレッスンでは

  1. リストを追加する
  2. リストの種類を設定する
  3. リストにコンテンツを追加する
  4. リストのスタイル設定

について紹介していきます。

1. リストを追加する

The List element icon.

リスト要素をサイトに追加するには、「追加」パネル（ショートカット：A）をクリックし、リストをウェブフローのキャンバスにドラッグします。

In the left picture, the list element is highlighted in the Add panel. In the right picture, a list is shown in the canvas.

リストは、主要素と3つのリスト項目から構成されます。

A list and its three list items are shown in the Navigator.

2. リストの種類を設定する

設定により、メインのリスト要素は、非順序型（箇条書き）リストまたは順序型（番号付き）リストになります。

デフォルトでは、リストはアンオーダーに設定されており、内部の各リストアイテムの左側に箇条書きが表示されます。順序付きリストと非順序付きリストの切り替えは、2つの方法で行うことができます。

  1. メインのリスト要素を選択し、Enterキーを押す
  2. メインのリスト要素を選択し、設定パネル > リスト設定に移動して、タイプを変更します。
The unordered and ordered Types are highlighted in List settings.

また、リスト設定で箇条書きなしを選択すると、箇条書きと数字を削除することができます。

3. リストにコンテンツを追加する

The No bullets Style is highlighted in the List settings.

デザイン上、リスト項目にはデフォルトのコンテンツがありません。これは、リスト項目には、見出し、段落、画像、ビデオ、そして他のリストなど、さまざまな種類のコンテンツを入れることができるからです。

リストにコンテンツを追加するには、リストアイテムにコンテンツをドラッグするだけです。プレーンテキストであれば、リスト項目の内側をダブルクリックして入力することもできます。

テキスト編集モードに入るもう一つの方法は、リスト項目を選択してEnter/Returnキーを押すことです。

In the top picture, an image is added to the first list item of an unordered list. In the bottom picture, the words “Amazing,” “Wonderful,” and “Spectacular” are added to three list items of an unordered list.

・リストを入れ子にする

リストを入れ子にするには、リスト項目の中にリストを追加します（リストの要素を入れ子にすることはできません）。

Nested lists inside of list items.

・リストをリストアイテムの中に入れ子にする方法

  1. Addパネルからリストをキャンバスにドラッグします。　　
  2. 親リストのリストアイテム内に子リストを入れ子にする
  3. テキスト要素（段落、テキストブロック、見出しなど）を、親リスト要素のリスト項目の中で、子リストの上にネストさせます。
注：リスト項目にテキストを追加する前に、ネスト(入れ子)にされたリストの構造を作成することを確認してください。

親リスト項目を編集した後に、ネスト(入れ子)されたリストを親リスト項目の内部に配置することはできません（ただし、親リスト項目に要素を追加した後に、その内部に子リストをネストすることは可能です）。

An annotated bullet list and a text element are nested inside the first list item of a numbered list.
In the Navigator, a list element and a paragraph element are nested inside the first list item of a parent list element.

・リストの項目を作成する

新しいリスト項目を作成するには、既存のリスト項目を選択し、コピー＆ペーストします。

または、リスト項目を右クリックして、メニューから「複製」を選択することもできます。

The Duplicate option is highlighted in the menu that appears after right-clicking a list item.

4. リストのスタイルを設定する

スタイルパネルを使用して、リストとリストアイテムの両方にスタイルを設定できます。

メインのリスト要素である順序付きリストと順序なしリストは、クラスを作成するか、タグにスタイルを設定することでスタイルを設定することができます。

すべての順序付きリスト] タグまたは [すべての順序なしリスト] タグにスタイルを設定すると、サイト全体でこれらの要素のデフォルトのスタイルが定義されます。 

・リストのスタイルを設定する

  1. メインのリスト要素を選択する
  2. スタイルパネル > セレクターフィールドを開く
  3. すべての順序付きリスト]（または[すべての順序なしリスト]）を選択する。
  4. スタイルをカスタマイズする
The All unordered lists tag is highlighted in the Selector field dropdown in the Style panel.

リストを選択して左のパディングを調整することで、箇条書き（または数字）があるスペースを広げたり狭めたりすることができます。

In the left picture, 52 pixels of left padding are added to three list items on the canvas. In the right picture, 52 pixels of left padding are shown in the Spacing section of the Style panel.

・リストを一括設定する

すべてのリストアイテムに同じクラスを適用することで、見た目に一貫性を持たせることができます。

リスト項目間のスペースを作るために下マージンを変更し、テキストと箇条書きまたは番号の間にスペースを作るために左マージンを変更することが一般的です。

すべてのリスト項目のタグを編集することで、サイト全体のすべてのリスト項目にデフォルトのスタイルを設定することができます。

・リストの一括設定の方法

A "Major list item" class is added to a list item and displayed in the Selector field.
  1. スタイルパネル > セレクターフィールドを開く
  2. すべてのリスト項目]タグを選択します。
  3. スタイルを追加する
The All list items tag is selected and appears in the Style panel’s Selector field.
注：「すべてのリスト項目」タグを変更すると、順序付きリストと順序なしリストのいずれに含まれるかにかかわらず、すべてのリスト項目に影響します。