HTML・CSSはEmmetで爆速コーディングを行おう!

Webデザイナーやコーダーは1文字ずつコードを打ち込んでいる?

Web制作現場でWebデザイナーやコーダーが、どのくらいコードを打っているのか考えたことはありますか?
コーディング未経験の学生の皆さんに最初にWebサイトのHTMLのソースコードを見せると、
あまりのコードの多さに拒否反応を示してしまうことがよくあります。

確かに実際に世の中に公開されているWebサイトは、かなりの記述量で構成されていることは間違いありません。
経験がないと、どのコードがどう機能しているのか不明な上に、行数も1,000行を超えるものも少なくはないと思います。

しかしその記述の1文字1文字全てをWebデザイナーやコーダーが打ち込んでいるのか?と言えば、
その答えはほとんどの場合「No」と言えるでしょう。(※1文字1文字打ち込んでいる方もいらっしゃるけど)
なぜなら、依頼から納品まで非常に工程の多いデザイン業で、そんな非効率な作業を行うのは現実的ではないからです。

できるだけ少ない手数で打ち、最終的には多くのコードが記述されているのが効率的なコーディング作業です。
今回はその効率的なコーディング作業を実現するための機能「Emmet」の紹介を行います。

Emmet — the essential toolkit for web-developers

普通のコード記述方法

例えば次の段落テキストをWebページに表示する場合は、以下のような記述になると思います。

これは段落です。

HTML

<p>これは段落です。</p>

ではこれを「pタグをdivタグで囲ってください」という指示を出すと、以下のようなコードになると思います。

HTML

<div>
  <p>これは段落です。</p>
</div>

通常このコードを記述するには1文字ずつ打ち込むかコピペを行いますね。

Emmetによるコード記述方法

では同じものを「Emmet」を使って記述する場合、以下の記述を行なって最後に「Tab」キーを押します。

div>p{これは段落です。}

実際にCodePenで行ってみましょう。
上記のコードを記述し、最後にTabキーを押しましょう。

See the Pen [Emmet]HTML練習① 問題編 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

Emmet練習①

打ち込む手数を非常に少なくしつつ、全く同じHTMLのタグと文字列が展開されたのがわかります。
これこそがEmmet。HTMLだけでなくCSSでもEmmetで爆速コーディングを行うことが可能です。
以後、一つ一つ詳細を紹介していきましょう。