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

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

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

インプレッション
ネット広告における、「広告が表示された回数」を意味する。 広告表示に関する ... →用語集へ

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

インフォメーション

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

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

サイトマップ
RSSフィード


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