1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. すぐに始められる、コーディング作業効率化

Posted on Jul 5, 2016 by Naitou

すぐに始められる、コーディング作業効率化

記事カテゴリー: HTML

Dreamweaverで標準サポートされているEmmetを使うと、HTMLを簡単に記述する事が出来ます。

Emmetとは

EmmetとはHTMLやCSSを記述・編集の為のプラグインです。
長いソースを省略形で書くと、自動で変換してくれます。

自分はコーディングにはDreamweaverCCを使用していますが、DreamweaverCCではEmmetを標準サポートしています。
Dreamweaverでの動作を簡単に説明出来ればと思います。

Emmetによるhtmlの省略入力

Dreamweaver上では特に設定の追加等は必要ありません。
htmlを記述しているエリアで、決められた形式で省略形のhtmlを書いた後、tabキーを押すと変換されます。

emmet_1

タグへの属性付与

タグにidやclassの属性を付けたい場合は、「#」と「.」を使います。

div#name →tab→ <div id=”name”></div>
div.day →tab→ <div class=”day”></div>
div#name.day →tab→ <div id=”name” class=”day”></div>

タグ内へのテキストの挿入

タグ内にテキストを挿入したい場合は「{}」を使います。

emmet_7

Emmetによるhtmlの省略入力の入れ子

入れ子にする場合は「>」を使います。

emmet_2

この時、「>」の前後に半角スペースを入れてしまうと、
Emmetの変換範囲が途切れてしまい、半角スペース以降の直近の塊だけが変換されます。

emmet_3

Emmetによるhtmlの兄弟要素

兄弟要素を省略形で書く場合、タグ同士を「+」で繋ぎます。

emmet_8

Emmetによるhtmlの繰り返し

繰り返す要素に「*」を追加し、繰り返す回数を記述します。
*を付けられた要素のみを繰り返します。

emmet_4

この時、「()」を使うと繰り返す範囲が指定できます。

emmet_5

繰り返し内での要素名の連番

idやclass名の指定箇所に「$」を記述すると、変換時に連番になります。(1始まり)

emmet_9

Emmetによるhtmlの省略入力の応用

emmet_6

1行の省略形のhtmlから簡単なリスト要素を生成することも出来ます。

この記事についての補足

Emmet:Emmetチートシート

関連記事:Emmetでのcssについて書いた記事

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS