学生だって覚えたい!Emmet(省略記法)で鬼速コーディング

Webサイトの制作で、HTMLやCSSなどを地道に手打ちした際「果てしない作業だ…」と感じた経験はありませんか?また、同じ時間でも倍の仕事量をこなしている先輩や上司の姿に、一体どうやって?と疑問に思う方はきっと多いはず…。

実はコーディングには、グッと時短できるテクニック”省略記法”があるんです!この記事では、今まで書いていた数百数千行のコードの入力が半分で済むといっても過言ではない、テキストエディタの拡張機能『Emmet(えめっと)』と、その機能を活用した『省略記法』の紹介をします。

ショートカットキーを覚える感覚で、学生でも導入できてしまうほど簡単です。あなたの作業効率を格段にレベルアップしてみましょう!

20160804_1

Emmetとは

20160804_2

http://emmet.io

Emmet(えめっと)は、HTMLやCSSの編集を強化するプラグインのひとつです。基本的にコーディングをする際は、HTMLやCSSをすべて手打ちで作業することになりますが、このプラグインを導入するとコードを数文字打つだけで自動的に補完してくれるようになるのです。

【例】
たとえば、以下のようなリストタグは項目が増えるほど地道な作業になりがち。ですが、省略記法を用いると一行とコマンドの入力で、あっという間にコーディングが完了します。

↓ 通常の記法

 

↓ 省略記法

 

↓ 文末で【TAB】か【Control+E】を入力すると通常の記法に「展開」されます。

このようにEmmetのメリットは、省略記法ができるだけではなく、タグの閉じもれも解消しケアレスミスも予防できる一石二鳥のプラグインなのです。

まずは、インストール!

20160804_3

Emmetは拡張機能ですので、デフォルトでは使えません。こちらのEmmet公式サイト(http://emmet.io/download/)から、使用しているテキストエディタが対応しているかどうかを確認して、プラグインをインストールしましょう。

ここでは一例として、プラグインの導入が簡単な『Atom』でのインストール方法を紹介します。

【Atomの場合】
ショートカットキー『⌘+,』→[Emmetで検索]→[インストール]で完了です。

1-3

 

次のページ:省略記法の書き方の基本編 / 応用編

 

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。