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

HTMLでよく使うタグをZen Codingで入力する | Zen Coding 3-3

HTMLコーディングでとくによく使うHTMLタグをZen Codingで入力する方法

ページ

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

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

それでは、HTMLコーディングでとくによく使うHTMLタグを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
  • 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のはじめての解説書です。

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

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

今日の用語

metaタグ
HTML文書のhead要素に配置されるタグで、ページを記述している言語や文字エン ... →用語集へ

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

インフォメーション

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

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

サイトマップ
RSSフィード


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