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>」と展開されている。