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

この記事が役に立ったらシェア!
tweet18はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

セッション
アクセス解析において、セッションとはWebサイトにアクセスして行う一連の行動を示 ... →用語集へ

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

インフォメーション

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

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

サイトマップ
RSSフィード


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