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

Zen CodingでよりスマートにHTMLを書く | Zen Coding 3-4

Zen CodingでHTMLをよりスマートに書くために覚えておきたい入力方法

ページ

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

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

前章までは、Zen Codingの基本である省略形を使って、ふだんよく使うHTMLのタグを書いてみました。

Zen Codingでは、コードを入力してからテキストを入力する方法と、テキストを先に入力しておいて、HTMLタグを適用する方法があります。また、同じタグをくり返すコードを一気に書くこともできるのです。

ここからは、Zen CodingでHTMLをよりスマートに書くために覚えておきたい入力方法について説明します。

この節の内容目次

同じタグをくり返し入力する

HTMLタグで属性を指定したり、同じタグを続けて入力したりを手で入力していると、HTML文書が複雑になればなるほどコードも煩雑になり、思わぬうっかりミスもふえてしまいます。

Zen Codingを使ってくり返し指定をすれば、そのようなミスを防ぐことができます。

たとえば、表のデータのくり返しをZen Codingで指定して展開すると、表組みのHTMLが作成できます。

tableタグで表を作成するのはとても煩雑ですが、Zen Codingを使えばこのように、1行記述するだけで表組に必要なコードをまとめて入力できます。

一見むずかしそうに見えますが、「*3」のようにくり返すタグを回数をしているだけです。さっそくひとつひとつ確認してみましょう。

  1. 省略形の入力

    Zen Codingを導入したエディタで、タグのくり返し指定の省略形を入力する。 ここでは「tr*3」として、表の列を3回くり返し、また「td.item+td.price」としてそれぞれの列にアイテム、価格のデータのタグも入力する。

    table#pricelist[summary]>tr*3>td.item+td.price
  2. 省略形の展開

    ショートカットキーで展開する。

  3. コードが展開された

    アイテム、価格を入れる列のコードが3回くり返して展開され、表組が作成できた。 続いて内容を入力する。

    <table id="pricelist" summary="">
    <tr>
     <td class="item"></td>
     <td class="price"></td>
    </tr>
    <tr>
     <td class="item"></td>
     <td class="price"></td>
    </tr>
    <tr>
     <td class="item"></td>
     <td class="price"></td>
    </tr>
    </table>
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日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


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