Emmet: HTMLコーディングの効率化を実現する記述短縮ツール
EmmetはHTMLコーディングを効率化する強力なツール。この記事では、Emmetの基本的な使い方から高度なテクニックまでを解説し、HTML記述の短縮化と生産性向上の方法をまとめる。モクジHTMLEmmetの利用方法Emmetで使用される記号HTMLのEmmet記号HTMLEmmetの具体的な展開例関連記事HTMLEmmetの利用方法Emmetを利用する際のアクションactionEmmet+TaborEmmet+Return/Enter要素名の<>の記述が不要。必要な閉じタグ</TAG>が補完される。Emmetで使用される記号代表的なEmmet、展開されるCodeとその説明を表にまとめる。HTMLのEmmet記号EmmetTableEmmetCodeDescription!!<!DOCTYPEhtml><htmllang="ja"><head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body></body></html>HTML5のDOCTYPE宣言を出力。デフォルトでは言語設定部分が英語を指定しているので、日本語(”ja”)への変更が必要。HTMLTag基本型要素(タグ名)a<ahref=""></a>タグ名を記述すると、<>と</>が補完される。>階層要素‹要素ul>li<ul> <li></li></ul>要素を入れ子構造で展開親要素と子要素を作る。*複製要素*数字ul>li*3<ul> <li></li> <li></li> <li></li></ul>同じ要素を複数展開。+隣接要素+要素dl>dt+dd<dl> <dt></dt> <dd></dd></dl>要素を同階層に並列展開兄弟要素を作る。.class付与要素.examplediv.box<divclass="box"></div>展開するコードにクラス名を付与divの記述省略可。#ID付与要素#examplediv#wrapper.box<divid="wrapper"class="box"></div>展開するコードにクラス名を付与させたい場合に使用。divの記述省略可。^移動div>h1+p^ul>li*3<div> <h1></h1> <p></p></div><ul> <li></li> <li></li> <li></li></ul>ひとつ上の階層に移動し、続けて入力する場合に使用。()グループ化dl>(dt+dd)*2<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd></dl>複数の要素をまとめる。$連番ul>li.legit$*5<ul> <liclass="legit1"></li> <liclass="legit2"></li> <liclass="legit3"></li> <liclass="legit4"></li> <liclass="legit5"></li></ul>複数同じ要素を使うコードで使用。$を増やすと桁数が増える。(ex:$$→『01』,$$$→『001』)@（アットマーク）で数字の開始番号を指定。[]属性img[title="sample"alt="image"]<imgsrc=""alt="image"title="sample">属性を付与。形式ほ[プロパティ=値]。複数指定する場合は半角スペースで区切る。{}テキスト挿入h2{TITLE}<h2>TITLE</h2>展開するコードにテキストを挿入させたい場合に使用。cコメントc<!---->div.box|c<divclass="box"></div><!--/.box-->ex01:コメント挿入のためのコードが展開。ex02:クラス名をコメントに付与。loremダミーテキスト!Loremipsumdolorsit,ametconsecteturadipisicingelit.Dicta,utharumasperioresfugitcumfacereundevoluptatesvitaenecessitatibustempora!Ipsumquos,nemosequiundeesseplaceatdolorquiapraesentium.展開するコードにダミーテキストを挿入。HTMLEmmetの具体的な展開例EmmetTableEmmetCodeDescriptionul>li*3>a<ul> <li><ahref=""></a></li> <li><ahref=""></a></li> <li><ahref=""></a></li></ul>展開する<li>要素にそれぞれリンクを付与。table>thead>(tr>th*2)^tbody>(tr>td*2)*2<table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody></table>基本的な表テーブルを構成するコード。ul>.test{$}*3<ul> <liclass="test">1</li> <liclass="test">2</li> <liclass="test">3</li></ul>子要素<li>の記述が省略可。$により連番を補完。table>.row_$*3>.sel_${$}*3<table> <trclass="row_1"> <tdclass="sel_1">1</td> <tdclass="sel_2">2</td> <tdclass="sel_3">3</td> </tr> <trclass="row_2"> <tdclass="sel_1">1</td> <tdclass="sel_2">2</td> <tdclass="sel_3">3</td> </tr> <trclass="row_3"> <tdclass="sel_1">1</td> <tdclass="sel_2">2</td> <tdclass="sel_3">3</td> </tr></table>$の連番機能はコメントにも使用できる。関連記事Emmet:CSSコーディングを効率化し、ショートカットで簡潔なコードを実現EmmetはCSSコーディングを効率化する強力なツール。この記事では、Emmetの実用的なテクニックを解説し、ショートカットを活用して簡潔で読みやすいCSSコードを作成する方法を探る。20XX/12/01
