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

Zen Codingでid属性とclass属性を指定する

ページ

よろしければこちらもご覧ください

Zen Codingでid属性とclass属性を指定する

では、Zen Codingでid属性とclass属性を同時に指定してみましょう。

  1. 省略形の入力

    id属性とclass属性の省略形を続けて入力する。

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

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

  3. コードが展開された

    id属性とclass属性が「<h3 id="date100605" class="entrydate"></h3>」と展開されている。

    コードが展開された

Zen Codingでid属性とclass属性を付与したdivタグで囲む

また、Zen CodingでHTMLタグの省略形を付けず、id属性とclass属性の省略形だけを入力して展開すると、id属性とclass属性をdivタグで囲むことができます。

HTMLタグをdiv要素で囲む際にも、id属性やclass属性を指定できます。

  1. 範囲の選択

    divタグでグループ化したいHTML要素の範囲を選択する。

    範囲の選択
  2. 省略形でラップを選択

    CtrlHキー(秀丸エディタの場合はCtrlShiftAキー)を押して[Wrap with Abbreviation]メニューを選択する。

  3. 省略形の入力

    [Enter zen coding abbreviation]ダイアログボックスで省略形「div」を入力し、[OK]をクリックする。

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

    id属性付きdivタグでHTML要素がラップされている。

    省略形の展開
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担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

EFO
申し込みフォームの入力完遂率を高めるために、フォームを改善する施策のこと。 ...→用語集へ

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

インフォメーション

RSSフィード


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