Zen Codingで複数の要素をグループ化する

Zen Codingで複数の要素をグループ化する

Webページを構成するHTMLタグは、それぞれに意味を持っています。見出し（h1）、本文（p）など、文書を構成する基本要素は、ブラウザー上でその前後が改行され、ひとかたまりとして表示されるので、「ブロックレベル要素」と呼ばれています。

しかし、ここで紹介する「<div>」は、h1やpのような情報上の意味をもたない、汎用的なブロックレベル要素です。

現在のWebページの作り方は、HTML上では色や文字サイズなど見た目については指定せず、CSS（カスケーディング・スタイルシート）で装飾やレイアウトについて指定するようになっています。あとから装飾を指定するためには、HTML文書中のあちこちにに散らばっている個々のブロックレベル要素を、ひとまとめにしておいた方が都合がよいのです。

そこでこのdivタグを使って、複数の要素をひとつのブロックとしてグループ化しておきます。

Zen Codingでは、このようなdivタグを使ったグループ化も、かんたんにできるようになっています。

<div>
<p>本文段落１</p>
<ul>
<li>箇条書きリスト1</li>
<li>箇条書きリスト2</li>
</ul>
<p>本文段落1</p>
</div>

1. 範囲の選択

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

   
2. 選択範囲のラップを選択

   ＋キー（秀丸エディタの場合＋＋キー）を押して、選択範囲のラップを選択する。

3. 省略形の入力

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

   
4. 省略形の展開

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

5. コードが展開された

   「div」が「<div></div>」と展開され、divタグでHTML要素がラップされる。