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

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

HTMLコードを一気に書き上げるには、「#」「.」「*」「>」「+」「(」「)」などの位置に気をつけなければなりません。複雑なコードを書く場合は特に、その書き方次第では展開コードがまるで意図しないものになってしまうこともあるでしょう。

たとえば、次のリストのサンプルを見てみましょう。ここでは、id属性が付いたul要素の中に、class属性付きでa要素を含んだ6個のli要素が入っています。

生成したいHTMLコード

<ul id="nav">
  <li class="list-items"><a href=""></a></li>
  <li class="list-items"><a href=""></a></li>
  <li class="list-items"><a href=""></a></li>
  <li class="list-items"><a href=""></a></li>
  <li class="list-items"><a href=""></a></li>
  <li class="list-items"><a href=""></a></li>
</ul>

このように階層やclass属性が付いて、同じタグのくり返しがあるコードをZen Codingで記述するには、「>」や「.」「*」を使わなければなりません。

これを正しく記述すれば、「ul#nav>li.list-items*6>a」となります。

文章問題として表すと、「id属性navが付いたul要素の中に、class属性list-itemsを付けたli要素を6個挿入し、さらにそれぞれの中にa要素を入れなさい」となります。

ここで「*6」の位置を間違えて「ul#nav>li*6.list-items>a」と「li」のあとにすぐ「*6」を書いてしまうと、展開後のコードがまるで別のものになってしまいます。

同じタグのくり返しを記述する場合は、そのくり返しを指定する場所に注意が必要です。自分の意図したコードになるように、練習してみましょう。

◎　正しいZen Codingの構文

ul#nav>li.list-items*6>a

×　誤った構文になる「ul#nav>li*6.list-items>a」の展開コード

<ul id="nav">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <div class="list-items"><a href=""></a></div>
</ul>

HTML/CSS構造から構文を考えよう

Webページ全体のHTMLコードを一気に書くことは、決してむずかしくありません。

しかし、HTMLのコードは多くの場合、階層構造や連続する要素が複数含まれるものになります。

短めのコードから始めて、要素が複数組み合わさって連続するようなHTMLを記述する場合は、どう書くべきかを頭の中でしっかりと考えましょう。

最後に練習問題です。次のようなHTMLをZen Codginで一気書きするための記述は、どうなるでしょう？

練習問題：このHTMLをZen Codingで記述するには？

<div id="page">
  <div id="header">
    <h1></h1>
    <p class="site-copy"></p>
  </div>
  <ul id="nav">
    <li class="nav-items"><a href="" title=""></a></li>
    <li class="nav-items"><a href="" title=""></a></li>
    <li class="nav-items"><a href="" title=""></a></li>
    <li class="nav-items"><a href="" title=""></a></li>
  </ul>
  <div id="contents">
    <div id="main">
      <div class="entry">
        <h2 class="content-title"></h2>
        <p></p>
        <p></p>
      </div>
      <div class="entry">
        <h2 class="content-title"></h2>
        <p></p>
        <p></p>
      </div>
      <div class="entry">
        <h2 class="content-title"></h2>
        <p></p>
        <p></p>
      </div>
    </div>
    <div id="sub">
      <h2 class="sub-title"></h2>
      <p></p>
    </div>
  </div>
  <ul id="help">
    <li class="help-items"><a href="" title=""></a></li>
    <li class="help-items"><a href="" title=""></a></li>
    <li class="help-items"><a href="" title=""></a></li>
  </ul>
  <address id="footer"></address>
</div>

正解は、次のようになります。

正解

div#page>(div#header>h1+p.site-copy)+(ul#nav>li.nav-items*4>a[title])+(div#contents>(div#main>(div.entry*3>h2.content-title+p*2))+(div#sub>h2.sub-title+p))+(ul#help>li.help-items*3>a[title])+address#footer

このように、Zen Codingを極めれば、HTML全体を一度に書くことも夢ではないのです。

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