Zen Codingでリストを作成する

Zen Codingでリストを作成する

箇条書きや番号付きのリスト（一覧）も、よく使う要素のひとつです。

HTMLでは、箇条書きのリストは「<ul></ul>」、番号付きリストは「<ol></ol>」、それぞれのリストの項目は「<li></li>」で囲みます。定義型のリスト「<dl></dl>」では、リストの項目は「<dt>」と「<dd>」で囲みます。

Zen Codingでは、「<ul></ul>」の省略形は「ul」、「<ol></ol>」の省略形は「ol」です。リスト項目の省略形は、「li」です。リストの省略形を入力して展開し、開始タグと終了タグの間にキャレットを合わせて「li」と入力し、展開します。

1. 省略形の入力

   Zen Codingを導入したエディタで、リストの省略形「ul（またはol）」を入力する。

2. 省略形を展開

   ショートカットキーで省略形を展開する。

   
3. コードが展開された

   リストの省略形が展開され、HTMLタグ「<ul></ul>（olの場合は<ol></ol>）」が入力されている。

   
4. 省略形を入力して展開

   開始タグと終了タグの間にキャレットを合わせ、リスト項目の省略形「li」を入力して展開する。

   
5. コードが展開された

   「li」が展開され、「<li></li>」と入力されている。

   
6. リスト項目を入力する

   それぞれのリストの項目を入力する。

   <ul>（または<ol>）
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
   </ul>（または</ol>）

Zen Codingで定義付きリストを作成する

リストには、用語解説などのように、項目と説明がセットになった定義付きのリストもあります。HTMLでは、<dl></dl>で囲みます。

「<dl></dl>」の省略形は、「dl」です。省略形を入力して展開したら、開始タグと終了タグの間にキャレットを合わせ、リストの項目の省略形「dt」／「dd」を入力して展開します。

1. 省略形の入力

   Zen Codingを導入したエディタで項目付きリストの省略形「dl」を入力する。

   
2. ２）省略形の展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   「dl」が「<dl></dl>」と展開される。

   
4. 項目の省略形の入力

   開始タグと終了タグの間にキャレットを移動し、省略形「dt」を入力して展開する。

   
5. コードが展開された

   「dt」が「<dt></dt>」と展開されている。

   
6. 省略形の入力

   開始タグと終了タグの間にキャレットを移動し、リストの項目の省略形「dd」を入力して展開する。

   
7. コードが展開された

   「dd」が「<dd></dd>」と展開されている。

   

Zen Codingでリストと項目をまとめて作成する

リストの項目の省略形に「+」を付けて、「ul+」「ol+」「dl+」と入力して展開すると、リストのタグ「<li></li>」や「<dt></dt>」と、リストの項目のタグ「<dd></dd>」を1組まとめて入力することができます。

1. 省略形の入力

   Zen Codingを導入したエディタで項目付きリストの省略形「dl+」を入力する。

   
2. 省略形を展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   「dl+」が項目付きリストに展開されている。

   
4. その他の項目付きリストの作成

   同じようにして、省略形「ul+」で箇条書きのリスト、省略形「ol+」で番号付きのリストを作成する。

   <h3>箇条書きのリスト項目</h3>
   <ul>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   </ul>
   
   <h3>番号付きのリスト項目</h3>
   <ol>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   </ol>
   
   <h3>定義型のリスト項目</h3>
   <dl>
   <dt>タイトル</dt>
   <dd>内容本文</dd>
   </dl>