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のはじめての解説書です。

この記事が役に立ったらシェア!
tweet32はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

NSFW
Not safe for workの略。直訳すると「職場向けとしては安全ではない ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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