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

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

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

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

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

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

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

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

<div>
<p>本文段落1</p>
<ul>
<li>箇条書きリスト1</li>
<li>箇条書きリスト2</li>
</ul>
<p>本文段落1</p>
</div>
div要素によって「段落」「リスト」「段落」がひとつのブロックとして扱われる。
  1. 範囲の選択

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

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

    CtrlHキー(秀丸エディタの場合CtrlShiftAキー)を押して、選択範囲のラップを選択する。

  3. 省略形の入力

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

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

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

  5. コードが展開された

    「div」が「<div></div>」と展開され、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担当者に役立つ情報をサクッとゲット!

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

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


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