連載HTML+CSSコーディングが10倍速くなるZen Coding
HTMLでよく使うタグをZen Codingで入力する | Zen Coding 3-3

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

それでは、HTMLコーディングでとくによく使うHTMLタグをZen Codingで入力する方法を、くわしく見ていきましょう。

• Zen Codingで見出しを入力する
• Zen Codingで本文を入力する
• Zen Codingで画像を挿入する
• Zen Codingで画像のサイズを自動入力する
• Zen Codingで引用を設定する
• Zen Codingでリストを作成する
• Zen Codingで定義付きリストを作成する
• Zen Codingでリストと項目をまとめて作成する
• Zen Codingで表を作成する
• Zen Codingで表と表の項目をまとめて作成する
• Zen Codingでリンクを作成する

Zen Codingで見出しを入力する

HTMLで見出しを指定するには、見出しにしたいテキストや画像を「<h1>」～「<h6>」までのHTMLタグで囲みます。

Zen Codingで見出しを指定するには、それぞれの見出しの省略形を入力して展開し、見出しの内容を入力します。

大見出しの省略形「h1」を展開すると、「<h1></h1>」となります。その他の見出しの省略形は、それぞれ「h2」「h3」「h4」「h5」「h6」です。

1. 省略形の入力

   Zen Codingを導入したエディタで見出しの省略形「h1」「h2」「h3」を入力する。

   
2. 省略形の展開

   それぞれの行末で、ショートカットキーで省略形を展開する。

3. コードが展開された

   「h1」が「<h1></h1>」、「h2」が「<h2></h2>」、「h3」が「<h3></h3>」と展開される。

   
4. 見出しの内容の入力

   見出しのテキストを入力し、その他の必要なタグを入力する。

   <h1>&lt;h1&gt;の見出しテキスト</h1>
   <h2>&lt;h2&gt;の見出しテキスト</h2>
   <h3>&lt;h3&gt;の見出しテキスト</h3>

   

Zen Codingで本文を入力する

HTMLでは、本文は「<p>～<p>」で囲みます。Zen Codingの「<p>～<p>」の省略形は「p」です。

本文中でよく使うHTMLタグには、強制的に改行を入れる「<br>」、水平線を引く「<hr>」などがあります。Zen Codingの省略形は、それぞれ「br」「hr」になります。ただし、Zen Codingで生成されるコードは、それぞれ「<br />」、「<hr />」というXHTMLの書式になっています。HTML 4.01の文書の場合は、それぞれ「<br>」と「<hr>」に修正しましょう。

改行の入力で注意する点として、省略形「br」の前にテキストがあると、展開されません。改行する場合は、いったん半角スペースなどを入力してから省略形を入力し、展開します。

1. 省略形の入力

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

   
2. 省略形の展開

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

3. コードが展開された

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

   
4. 本文と改行の省略コードの入力

   「<p>～</p>」の中に本文を入力し、最後に改行の省略形「br」を入力する。

   
5. 省略形の展開

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

6. コードが展開された

   「br」が「<br />」に展開されている。

   
7. <br>タグの修正

   HTML4.01文書の場合は、改行のタグを次のように「<br>」に修正する。

   <p>
   本文テキスト<br>
   </p>

8. 本文の入力

   続けて本文を入力する。

   

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