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

Zen Codingの基本的な使い方 | Zen Coding 3-1

Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」といわれる略語を入力し、「展開」
HTML+CSSコーディングが10倍速くなるZen Coding

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!
この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

Zen Codingを使ってHTML/CSSコーディングするには、Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」(Abberiviation)といわれる略語を入力し、「展開」を実行([Expand Abberiviation]メニューを選択、あるいは Ctrlカンマキーを押す)します。入力した省略形を「展開」(Expand)すると、統合開発環境のスニペット(統合開発環境から短いプログラムコードを呼び出す機能)のように、一連のコードが生成されるしくみになっています。

省略形を覚えるのはたいへんだと思うかもしれませんが、1章で述べたとおり、すべてを覚える必要はありません。自分がよく使うタグの省略形だけを覚えればじゅうぶんです。

また、Zen Codingの省略形は、HTMLの場合はHTMLタグの名前の、CSSの場合はスタイル指定のためのプロパティ名の頭文字などになっています。いつもHTML/CSSを書いているなら、覚えるのはそれほどむずかしくありません。ここで紹介したもの以外の省略形については、4章、5章を参照してください。

※ショートカットキーは環境によって異なる。秀丸エディタは本書の手順ではCtrlEキー。以降は、自分の環境に合わせて読み替えを。

Zen CodingでHTMLタグを入力する

ここでは、HTMLの見出し1のタグ「<h1></h1>」をZen Codingで入力してみます。 HTMLの見出し1のタグ「<h1></h1>」を入力するには、「h1」と入力して、Ctrlcommaキーを押します。すると、省略形が展開され、「<h1></h1>」というタグが生成されます。タグが入力できたら、ページのコンテンツ(内容)を入力します。

  1. 省略形の入力

    Zen Codingを導入したエディタで省略形「h1」を入力する。

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

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

  3. コードが展開された

    「h1」が「<h1></h1>」と展開されている。開始タグと終了タグの間に見出しの内容を入力する。

    コードが展開された

Zen CodingでCSSのスタイル指定を入力する

CSSタグを記述する場合も同じように、省略形を入力して展開していきます。

ここでは、Zen Codingを使って、CSSで色指定ののプロパティと値を入力してみます。

  1. 省略形の入力

    Zen Codingを導入したエディタで省略形「c」を入力する。

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

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

  3. コードが展開された

    「c」が「color:#000;」と展開された。 色指定の「#000」の部分は、指定したい色に書き換える。

    コードが展開された

テキストを省略形でラップしてタグを入力する

Zen Codingには、タグを入力してからコンテンツ(内容)を入力していく方法のほかに、まずコンテンツを入力しおいて、そこにあとからHTML/CSSタグを付けていく方法もあります。コンテンツを入力しておいてタグを付けていくほうが親しみやすい場合は、こちらの方法を利用しましょう。

あとからHTML/CSSタグを入力するには、Zen Codingを導入したエディタ上でテキストの範囲を選択し、その状態で省略語で「ラップ」([Wrap Abberiviation]メニュー、またはCtrlHキーを押す)します。[Enter zen coding abbreviation](省略形入力)ダイアログボックスが表示されるので、ここで省略形を入力し、[OK]をクリックします。

※秀丸エディタは本書の手順ではShiftCtrlEキーだが、環境によって異なる。

  1. 範囲選択

    Zen Codingを導入したエディタで、入力したテキストのHTMLタグを適用したい範囲を選択する。ここでは、「適用したいテキスト」を全部選択する。

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

    CtrlHキー(秀丸エディタはCtrlShiftE)を押して、省略形入力ダイアログボックスを呼び出す。

  3. 省略形の入力

    [Enter zen coding abbreviation]ダイアログボックスが表示されるので、入力欄に省略形を入力して[OK]をクリックする。ここでは、「p」と入力する。

    省略形の入力
  4. HTMLタグでラップされた

    選択した範囲のテキストを囲んでタグが入力された。

    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日間)

今日の用語

インフルエンサー
「世間に与える影響力が大きい人物」のこと。一般にはSNSの有名人、タレント、知識 ...→用語集へ

インフォメーション

RSSフィード


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