この記事について
この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール 初回体験レッスンなどをお手伝いして頂いている「やのう まり絵」さんによる寄稿記事です。
やのうさんは、私が執筆した 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 と同じシリーズ本である 世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 の執筆もされています。
フリーランスの「やのう まり絵」と申します。普段、Webサイト制作を行っておりWebデザインからコーディング、WordPress構築を行っています。
共著：世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応
これから学ぶ方でも教科書通りに手を動かせばひとつのサイトが完成する流れになっています。
HTML、CSSをコーディングする上で無くてはならない存在「Emmet（エメット）」についてご紹介したいと思います。
特徴
EmmetとはHTML/CSSを省略記法で記述し展開することで、コーディングの効率を上げることができる入力補完ツールです。以前はZen-Codingと呼ばれていましたが、Emmetに名前が変わり機能拡張など開発が進められています。
コード展開はエディターによって異なりますが、デフォルトではTabもしくはCtrl（cmd）+Eが割り当てられています。
展開例
<!— 展開前 —> div <!— 展開後 —> <div></div> |
div要素が展開されました。開始タグと閉じタグを一つ一つ手入力する必要がありません。もう少し複雑なコード展開を見てみましょう。
<!— 展開前 —>
div>+p+ul>li*2
<!— 展開後 —>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div> |
このように複雑なコードでも独自の省略記法で簡単に記述することができます。これはHTMLだけでなくCSSでも同様です。
※アプリによっては p:r で position: relative; が展開できない場合があります。その場合は pos:r で展開してみてください。
/* 展開前 */ p:r /* 展開後 */ position: relative; |
一度に複数のプロパティを展開することもできます。
/* 展開前 */ w:100+mb:100 /* 展開後 */ width: 100px; margin-bottom: 100px; |
単位を何も指定しない場合はpxがつきます。
px以外を指定したい場合は省略記述の段階で付けていれば指定できます。
省略記法によるコード展開はタイプミスの軽減にもつながります。スペルの打ち間違いは自分ではなかなか気付けないものです。Emmetを活用すればそのようなミスも減るでしょう。
Emmetの導入方法
さまざまなエディターやIDEだけでなく、コードを公開するオンラインエディターなど幅広く対応しています。ご自身がお使いのものが対応しているかは Emmet Downloadページ をご確認ください。
このダウンロードページでは、Emmetを使うためのプラグイン（拡張機能）をダウンロードできます。手順は各リンク先のページにて紹介されています。
さまざまなエディターの中でも、Adobe Dreamweaverは CC 2017以降のバージョンから標準搭載されているため、Emmetの設定をすることなくすぐに利用することが可能です。
また、オンラインエディター CodePen でも導入作業をすることなく試すことができます。
本記事では、スマートフォン時代のWebコーディングスクール にて使用しているAdobe製オープンソースのコードエディター「Brackets」にEmmetをインストールする方法に触れたいと思います。
Bracketsに導入する方法
① 拡張機能マネージャーをクリック
② Emmetを検索
③ インストール
これでインストールが完了しました。
BracketsでのEmmet使用方法
BracketsにEmmetをインストールしたらメニューに「Emmet」が追加されます。
Bracketsでファイルを新規作成して index.html などの名前で保存します。
ここで、!>header#header{ヘッダー} と入力し、Tabキーを押してみましょう。
上の画像のように展開できたかと思います。
Emmetのデフォルト設定が英語のため、展開されたソースコードを見ると lang=”en” になっています。
これは lang=”ja” にすることで解決します。
初期設定を lang=”ja” に変更するには
本当は拡張フォルダーを指定してその中にsnippets.jsonファイルを入れた方が良いのですが、Windowsで動かない場合があるためEmmetのプラグインファイルを直接編集する方法で説明します。
① ヘルプ
② 拡張機能のフォルダーを開く
user / brackets-emmet / node_modules / emmet / lib / snippets.json
※編集前にファイルのバックアップを必ずとってください。
変更前 "lang": "en", "locale": "en-US”, 変更後 "lang": "ja", "locale": "ja-JP", |
保存してBracketを再起動すれば完了です。
基本の使い方（HTML編）
複数の同じ要素を展開できるのはもちろんのこと、IDの付与、ID/Classに連番を付与、要素にテキストを付与などできます。いくつかピックアップしてご紹介します。
| 記号 | 概要 |
|---|---|
| # | ID付与 |
| . | class付与 |
| * | 同じ要素の繰り返し |
| $ | 連番を付与 |
| > | 入れ子 |
| + | 同列階層 |
| () | グループ化 |
| { } | テキスト挿入 |
| ^ | 階層の繰り上げ |
ID/classを付与する
「#」を使いID名を付けることができます。
<!— 展開前 —> div#wrapper <!— 展開後 —> <div id="wrapper"></div> |
classを付与する
「.」を使いclass名を付けることができます。
<!— 展開前 —> div.wrapper <!— 展開後 —> <div class="wrapper"></div> |
同じ要素を繰り返す
「*」と「繰り返したい数値」を使い同じ要素を繰り返すことができます。
<!— 展開前 —> li*3 <!— 展開後 —> <li></li> <li></li> <li></li> |
連番を付ける
「$」を使いclass名などに連番を付けることができます。
<!— 展開前 —> li.item$*3 <!— 展開後 —> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> |
「$$」とすると「01…」と表記されます。
入れ子にする
「>」を使い要素を入れ子にできます。
<!— 展開前 —> ul>li*3 <!— 展開後 —> <ul> <li></li> <li></li> <li></li> </ul> |
同列の階層にする
「+」でつなげることで、子要素ではなく同列で展開します。
<!— 展開前 —> div+p+ul>li <!— 展開後 —> <div></div> <ul> <li></li> </ul> |
グループ化する
「()」で囲むことで、グループ化させることができます。
<!— 展開前 —> div+p+(ul>li)+p <!— 展開後 —> <div></div> <ul> <li></li> </ul> |
テキストを挿入する
<!— 展開前 —>
div>h2{見出し2}+p{テキスト}
<!— 展開後 —>
<div>
<h2>見出し2</h2>
テキスト
</div> |
階層を上げる
「^」を使うと、タグの階層が「^」の数の分だけ上がります。
<!— 展開前 —>
div>h2{見出し2}^p{テキスト}
<!— 展開後 —>
<div>
<h2>見出し2</h2>
</div>
テキスト |
基本の使い方（CSS編）
CSSの省略記法はプロパティの頭文字を記述します。
慣れるまで少し時間がかかるかもしれません。
/* 展開前 */ w /* 展開後 */ width: ; /* 展開前 */ w100p /* 展開後 */ width: 100%; |
数字に単位をつけない場合は「px」になりますが、単位を指定すればそのように展開されます。
「%」の場合は「%」か「p」を展開前に付けます。
/* 展開前 */ m /* 展開後 */ margin: ; /* 展開前 */ mt10 /* 展開後 */ margin-top: 10px; |
値を指定することもできます。
/* 展開前 */ m0-a /* 展開後 */ margin: 0 auto; |
数値の間を「-」で区切ることで複数の値を指定できます。
/* 展開前 */ b /* 展開後 */ bottom: ; /* 展開前 */ bg /* 展開後 */ background: #000; /* 展開前 */ bgc /* 展開後 */ background-color: #fff; /* 展開前 */ bd /* 展開後 */ border: ; /* 展開前 */ bd+ /* 展開後 */ border: 1px solid #000; /* 展開前 */ bd1-do#e /* 展開後 */ border: 1px dotted #eee; /* 展開前 */ ta:c /* 展開後 */ text-align: center; |
「:」が必要な場合もあります。
/* 展開前 */ pos:a+t10+l10 /* 展開後 */ position: absolute; top: 10px; left: 10px; |
このように一度に複数のプロパティを展開することもできます。
まとめ
Emmetは使いこなせるようになるまで大変かもしれませんが、一度覚えればコーディングの効率は大幅に上がりますので、ぜひ積極的に使ってみてください。
より詳しくEmmetの省略記法の書き方を知りたい方は、公式のチートシート を参考にしてください。