HTML+CSSコーディングが10倍速くなるZen Coding

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. 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>
    コードが展開された
HTML+CSSコーディングが10倍速くなるZen Coding
  • HTML+CSSコーディングが10倍速くなるZen Coding
  • こもり まさあき・岡部 和昌 著
  • ISBNコード
    978-4-8443-2945-9
  • インプレス

この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!

めんどうなタグ入力も、一瞬でラクラク変換! Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です!同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。 日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。

この記事が役に立ったらシェア!
よろしければこちらもご覧ください
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

SEO
検索エンジンからサイトに訪れる人を増やすことで、Webサイトの成果を向上させる施 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]