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

プロは「1文字ずつ」コードを打ち込んでいると思う?

コーディング未経験の学生の皆さんにHTMLのソースコードを見せると、
あまりのコードの多さに拒否反応を示してしまうことが多々ありますが、
実務でウェブデザイナーやコーダーが、どの程度コードを打っているのか考えたことはありますか?

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

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

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

Emmet — the essential toolkit for web-developers

Emmetの使い方

通常のコード記述方法

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

これは段落です。

HTML

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

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

HTML

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

さらに、cssを使って文字列を中央揃えするための記述は以下のようになりますね。

CSS

div {
  p {
    text-align: center;
  }
}

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

Emmetによるコード記述方法(Emmet記法)

同じものを「Emmet」を使って記述する(Emmet記法)場合、以下それぞれの記述を行い最後に[Tab]キーを押します。
なお記述位置は、htmlの場合は挿入したい位置に、cssの場合はセレクタの中に記述しましょう。

htmlのEmmet記法(挿入したい位置に記述)

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

cssのEmmet記法(セレクタの中に記述)

tac[Tab]

実際にCodePenで行ってみましょう。
上記のコードをHTMLタブとCSSタブにそれぞれ記述し、最後に[Tab]キーを押しましょう。

See the Pen Emmetによるコード記述方法 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

全く同じhtmlタグと文字列が展開され、全く同じcssプロパティと値が展開されたのがわかります。
HTMLだけでなくCSSでもEmmetによって打ち込む手数を非常に少なく爆速コーディングを行うことが可能で、
実際のところ、コピペの何倍も早いのです。これこそがEmmet。
次のページからは一つ一つ詳細を紹介していきましょう。