Emmetを使ってHTMLコーディングを効率化しよう。Emmetを使ってHTMLコーディングを効率化しよう。更新日:2018年5月11日EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText・Dreamweaver・Bracket・Atomなど様々なエディターやIDE(統合開発環境)で利用することができます。Zen-Codingというものでしたが、その次期バージョンがEmmetです。h1と記述したものをEmmetで展開すると<h1></h1>とコードが生成されます。CodeでのEmmetの使い方を説明します。Codeへの乗り換え。これは結構オススメかも...!VSCodeは初期設定の状態でもEmmetが使えるようになっています。インストールできたら、HTMLファイルを作成し、試しにhtml:5と記述をしてTabキーを押してみましょう。lang="en">になっていていちいちlang="ja"に変更しなければならないので、少しだけ設定を追加するのがおすすめです。基本設定>設定でユーザー設定が編集できます。以下の内容をユーザー設定に記述して上書きします。"ja"},VSCodeはユーザー設定がいろいろと細かく出来る上、設定をコピペすれば他人の設定をそっくりそのまま移植できたりするのが便利です。Emmetでよく使う省略記法HTML5のひな型html:5もしくは!だけでもいけます。!と書いてTabキーを押すだけで以下のコードが展開されます。通常のHTMLタグこれが一番よく使うやつ。h1+Tabキーで<h1></h1>が展開されます。alt="">というふうに属性も一緒に展開されます。classやidを付けて展開するCSSのように.や#を付けて展開するとclassやidがついて展開されます。id="logo"></h1>と展開されます。HTMLを何も指定しないでclassかidだけを付けて展開すると自動的にdivタグになります。class="wrapper"></div>という感じです。複数のHTMLタグを入れ子で展開するheader>navのように>で複数のHTMLタグを繋ぐと入れ子になって展開されます。header>navは以下のようになります。<nav></nav></header>複数のHTMLタグを隣接で展開する入れ子ではなく、隣接する形にも出来ます。header+main+footerという風に+で繋ぐと<header></header><main></main><footer></footer>という形で展開されます。Emmet!</h1>のような形で展開されます。doloribus.が展開されます。繰り返しの展開ul>li*3のように*NでNの部分に数字を入れると、繰り返しで展開されます。<li></li></ul>連番での展開ul>li#hoge$*3のように連番させたいidやclassに$を付けると、その部分が連番になります。Abbreviationという機能があります。Abbreviationというのが出てきますので、それを選択。あとは囲いたい外側のHTMLタグを入力すると、外側にHTMLが追加されます。Abbreviationのようなコマンドパレットから操作を行うようなものをよく使う場合はキーボードショートカットに設定をしておくのがおすすめです。Command+Shift+Pでコマンドパレットを開き、「Key」を打ち込むと選択肢の中に基本設定:キーボードショートカットを開くというのが出てきます。ここでキーバインドの検索に「emmet」と打ち込むとEmmetで使えるコマンドが一覧表示されます。キーボードショートカットに設定したい項目の左側の鉛筆アイコンをクリックすると、キーボードの登録ができます。締めタグや属性の書き忘れ防止にもEmmetは締めタグや必要最低限の属性を自動的に展開してくれるので、書き忘れ防止にも繋がります。Emmetに慣れたら、slimやjadeのようなHTMLテンプレートエンジンにチャレンジしてみるのもいいかもしれません。HTMLだけではなくCSSもEmmetで書くことができます。これ以上は長くなりそうなので、またの機会に...。芳樹Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。画像(imgタグ)の下にできる隙間を無くす方法ロリポップ!で構築したWordPressサイトをHTTPS化するときにやったこと超軽量なCSSフレームワーク「Milligram」を試してみました。