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担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

インプレッション
ネット広告における、「広告が表示された回数」を意味する。 広告表示に関する ...→用語集へ

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

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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