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

HTMLを一気に書き上げよう | Zen Coding 3-5

Zen Codingの構文を組み合わせよう

こもり　まさあき・岡部和昌 2011/3/9 8:00 サイト制作／デザイン | 解説／ノウハウ

6 18 63

ネットで話題の"究極の超速コーディング"がだれでもマスターできる！
この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

Zen Codingの構文を組み合わせよう

3-3ではよく使うHTMLタグの省略形を紹介し、続いて3-4では、HTMLをより効率的に入力するために、Zen Codingの構文の書式を紹介しました。

ここまで紹介した書式を組み合わせれば、次のようなHTMLを、「Zen Codingの記述」のように記述して、展開・生成することができます。

まず短めのコードから始めて、できるだけ一気に書けるように、記述のしかたを考えてみましょう。

生成したいHTMLコード

<body>
<div id="header">
  <h1 id="site-id"></h1>
  <p class="site-copy"></p>
</div>
<ul id="nav">
  <li class="list-items"></li>
  <li class="list-items"></li>
  <li class="list-items"></li>
  <li class="list-items"></li>
</ul>
<div id="contents">
  <div id="main">
    <h2 class="content-title"></h2>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div id="sub">
    <h2 class="sub-title"></h2>
    <ul class="sub-list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<address id="footer"></address>
</body>

Zen Codingの記述

(#header>h1#site-id+p.site-copy)+(ul#nav>li.list-items*4)
+(#contents>(#main>h2.content-title+p*3)+(#sub>h2.sub-title+ul.sub-list>li*4))+address#footer

（）を使ったHTMLタグのグループ化

Zen Codingでは、「>」で親子関係を、「*」で同じタグのくり返しを指定することができることを前の章で紹介しました。

しかし、それだけではHTMLの文書構造を書き上げることはできません。Zen Codingの省略形の構文上の位置が違ったとたん、文書としての意味をなさなくなります。

たとえば、次のように、ul要素のリスト項目のあとにh2の見出しとp要素の本文が続く場合、「ul>li*4+h2+p」と入力して展開すればよいように思えます。

しかし、これを実際に展開すると、ul要素の中にh2要素とp要素が入ってしまい、正しいHTMLの記述ではなくなります。

このようにHTMLの構造上、親子のタグの下の階層に入ってしまった場合、そのまま「+」で続けることができないのです。正しい記述にするためには、ul要素の外に出なければなりません。

そこでZen Codingでは、このような階層構造を「(」と「)」でひとつのグループ（ブロック）として扱うことができるようになっています。

このリストの場合は、「(ul>li*4)+h2+p」と入力して展開します。

「(」「)」でのグループ化では、「(」「)」の位置をしっかり考えましょう。

生成したいHTMLコード

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<h2></h2>
<p></p>

×　誤った構文になる「ul>li*4+h2+p」の展開コード

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <h2></h2>
  <p></p>
</ul>

◎　正しいZen Coding構文

(ul>li*4)+h2+p

（）でグループ化
「>」で階層になるHTMLタグを「(」「)」で囲んでグループ化する。
省略形の展開
ショートカットキーで省略形を展開する。
コードが展開された
「ul>li」要素が指定回数くり返され、見出しと本文のタグが展開される。
```
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<h2></h2>
<p></p>
```

「#」「.」「*」「>」「+」「(」「)」の位置に注意！

「#」「.」「*」「>」「+」「(」「)」の位置に注意！
HTML/CSS構造から構文を考えよう

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のはじめての解説書です。