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

Zen Codingで表を作成する

Zen Codingで表を作成する

HTMLで価格表やサイズ表のような表を作成するには、表の宣言「<table>」と表の列「<tr>」、行「<td>」などのタグを使います。

Zen Codingでは、「<table></table>」の省略形は「table」です。

表の列「<tr></tr>」の省略形は「tr」、データの「<td></td>」の省略形は「td」です。

  1. 表の省略形の入力

    Zen Codingを導入したエディタで表の省略形「table」を入力する。

    表の省略形の入力
  2. 省略形の展開

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

  3. コードが展開された

    「table」が「<table></table>」と展開されている。

    コードが展開された
  4. 列の省略形の入力

    表の列の省略形「tr」を入力する。

    列の省略形の入力
  5. コードが展開された

    「tr」が「<tr></tr>」と展開されている。

    コードが展開された
  6. データの省略形の入力

    列の開始タグと終了タグの間にキャレットを移動し、データの省略形「td」を入力する。

    データの省略形の入力
  7. 省略形の展開

    ショートカットキーで展開すると、「td」が「<td></td>」と展開されている。

    省略形の展開

Zen Codingで表と表の項目をまとめて作成する

リストと同じように、表の省略形に「+」を付けて、「table+」と入力して展開すると、表と表の列、データを1組まとめて入力することができます。

  1. 省略形の入力

    Zen Codingを導入したエディタで省略形「table+」を入力する

    省略形の入力
  2. 省略形の展開

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

  3. コードが展開された

    「table+」が表と表の項目のタグに展開されている。

    コードが展開された
  4. 表の内容を入力する

    列やデータのタグを必要な数コピーして、内容を入力する。

    <table>
     <tr>
      <td>項目1</td><td>項目2</td>
     </tr>
     <tr>
      <td>金額1</td><td>金額2</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担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

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

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

インフォメーション

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

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

サイトマップ
RSSフィード


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