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

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

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

ページ

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

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!
この記事は、書籍『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
  1. ()でグループ化

    「>」で階層になるHTMLタグを「(」「)」で囲んでグループ化する。

    ()でグループ化
  2. 省略形の展開

    ショートカットキーで省略形を展開する。

  3. コードが展開された

    「ul>li」要素が指定回数くり返され、見出しと本文のタグが展開される。

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <h2></h2>
    <p></p>
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担当者に役立つ情報をサクッとゲット!

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

今日の用語

Discover
「Discover(ディスカバー)」とは、Chromeブラウザとスマートフォンの ...→用語集へ

インフォメーション

RSSフィード


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