索引

リスト要素を使用して、コンテンツの番号付きリストまたは箇条書きリストを作成します。

インデックス コンポーネントは、列挙されたレコードや箇条書きのレコードを作成するために使用できます。

このチュートリアルの内容:

  1. カタログを含める
  2. リストのスタイルを決定する
  3. コンテンツをカタログに統合する
  4. カタログをデザインする

カタログを含める

インデックス要素のシンボル。

インデックス要素をウェブサイトに統合するには、 入れる タブ(キーボードショートカット:A)を押しながらドラッグして 索引 Webflow キャンバスに。

カタログは、プライマリ要素と 3 つのカタログ項目で構成されます。

リストのスタイルを決定する

構成に基づいて、メインカタログ要素は、 順序なし (箇条書き)カタログまたは 順序付けられました (番号付き) カタログ。デフォルトでは、カタログは最初は順序なしで作成され、各カタログ項目の左側に箇条書きが表示されます。順序付きカタログと順序なしカタログを切り替えるには、次の 2 つの方法があります。

  1. メインカタログ要素をクリックして、 入力
  2. メインカタログ要素をクリックして、 設定タブ > カタログ設定、次に タイプ
順序付けされていないタイプと順序付けされたタイプは、カタログ設定で強調表示されます。

カタログ設定で箇条書きと番号を削除するには、 弾丸なし.

カタログ設定で、箇条書きなしスタイルが強調表示されます。

カタログにコンテンツを追加する

デフォルトでは、カタログアイテムには事前に決められたコンテンツは含まれていません。これにより、カタログアイテムはタイトル、段落、画像、ビデオ、さらには他のカタログなど、さまざまなコンテンツタイプに対応できます。コンテンツをカタログに組み込むには、必要なコンテンツをカタログアイテムにドラッグするだけです。または、プレーンテキストだけが必要な場合は、カタログアイテム内をダブルクリックして入力を開始することもできます。テキスト編集モードに入る別の方法は、カタログアイテムを選択して 入場/返却.

上の画像では、順序付けられていないカタログの最初のカタログ項目に画像が追加されています。下の画像では、順序付けられていないカタログの 3 つのカタログ項目に「Amazing」、「Wonderful」、「Spectacular」という単語が追加されています。

カタログを埋め込む

カタログ内にカタログを挿入することでカタログを埋め込むことができます アイテム (カタログ 要素 ネストすることはできません。

カタログ項目内にネストされたカタログ。

カタログ項目内にカタログをネストするには:

  1. ドラッグ 索引 から 挿入タブ キャンバスに
  2. サブを埋め込む 索引 親のカタログアイテム内 索引
  3. 親のカタログ項目にテキスト要素(段落、テキストブロック、ヘッダーなど)を追加します。 索引 コンポーネント、子の上にある 索引
注意点: カタログアイテムにテキストを追加する前に、埋め込みリストのフレームワークを確立してください。親カタログアイテムが編集された後は、埋め込みリストを親カタログアイテム内に配置することはできません(ただし、 要素 親リスト項目に追加し、その後に子リストを埋め込むこともできます)。
注釈付きの箇条書きリストとテキスト セクションは、番号付きリストの最初の項目内に囲まれています。
ナビゲーターでは、リスト要素と段落要素は親リスト要素の最初のリスト項目内に配置されます。

新しいリスト要素を追加する

新しいアイテムをリストに組み込むには、既存のアイテムのコピーと貼り付けを選択します。または、リストされているアイテムを右クリックして 複製する 提供されたメニューから。

リストされた項目を右クリックした後に表示されるメニューでは、「複製」オプションが強調表示されます。

リストをデザインする

スタイル パネルを使用して、リストとその項目の両方にスタイルを設定するオプションがあります。

リスト

主要なリスト要素(順序付きリストまたは順序なしリスト)は、クラスを作成するかタグを変更することでスタイルを設定できます。 すべてのリスト タグまたは 順序なしリストすべて タグを使用すると、サイト全体でこれらの要素の標準的なスタイルを定義することになります。

  1. プライマリを選択 リスト 要素
  2. アクセス スタイルパネル > セレクターフィールド
  3. 選択する すべての注文リスト (または 順序なしリストすべて)
  4. スタイルをカスタマイズ
スタイル パネルのセレクター フィールド ドロップダウンで、順序なしのすべてのリスト タグが強調表示されます。

箇条書き(または数字)を配置するスペースを調整するには、リストを選択して 左パディング.

左の画像では、キャンバス上の 3 つのリスト項目に 52 ピクセルの左パディングが追加されています。右の画像では、スタイル パネルの Spacing category に 52 ピクセルの左パディングが表示されています。

リストポイント

リスト上のすべての項目に同じクラスを割り当てることで、統一感のある外観を実現できます。通常、 低いマージン リスト項目の間にスペースを挿入するために行われます。 左余白 テキストと箇条書きまたは数字の間に距離を作るために変更されます。

「プライマリ リスト アイテム」クラスがリスト アイテムに追加され、セレクター フィールドに表示されます。

デフォルトのスタイルは、ウェブサイト全体のすべてのリスト項目で設定できます。 すべてのリスト項目 鬼ごっこ:

  1. 選択してください リスト項目
  2. アクセス スタイルパネル > セレクターフィールド
  3. を選択 すべてのリスト項目 鬼ごっこ
  4. スタイルを挿入する
注記: 変更する すべてのリスト項目 タグは、順序付きリストまたは順序なしリスト内の配置に関係なく、すべてのリスト項目に影響します。
すべてのリスト項目タグが選択され、スタイル パネルのセレクター フィールドに表示されます。
ユアン・マック