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

Zen Codingでid属性を指定する

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

Zen Codingでid属性を指定する

HTMLコーディングでは、任意のHTMLタグに「id属性」や「class属性」を指定して、装飾やレイアウトを指定します。HTMLタグとid属性、class属性は、CSSの「セレクタ」と対応しています。

id属性は一般的に、要素の場所を特定するために用いられる属性です。たとえば、「<h1 id="sitetitle">サイトタイトル</h1>」というタグは、「sitetitleというidを持つh1要素」という意味です。

id属性は場所を特定するものなので、ひとつのHTML文書中にひとつしか認められていません。

Zen Codingで任意のタグにid属性を指定するには、「タグの省略形#id名」と入力して展開します。

  1. 省略形の入力

    Zen Codingを導入したエディタでid属性の省略形を入力する。

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

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

  3. コードが展開された

    「h2#category」が「<h2 id="category"></h2>」と展開されている。

    コードが展開された

Zen Codingでclass属性を指定する

class属性は、複数の要素に共通のスタイルを適用するための属性です。

「<p class="date">日付</p>」という記述で「dateというクラスを持つp要素」の意味になります。

class属性は、1つのHTML文書に複数設定することができます。たとえばブログのトップページのように、記事の数だけ日付のp要素がある場合、p要素に同じclass属性を付けておけば、内容が区別できるだけでなく、装飾の指定をまとめて行うことができます。

Zen Codingでclass属性を指定するには、「タグの省略形.(ドット)クラス名」と入力して展開します。

  1. 省略形の入力

    Zen Codingを導入したエディタで、class属性の省略形を入力する

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

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

  3. コードが展開された

    「p.entrydate」が「<p class="entrydate"></p>」と展開されている。

    コードが展開された
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担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]