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
  • 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日間)

今日の用語

行動ターゲティング
ネット広告の種類の1つ。 ユーザーごとに、そのユーザーがネット上でどんなサ ...→用語集へ

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

インフォメーション

RSSフィード


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