はじめに
コーディングを高速で行うことができる「Emmet」についてあまり知らなかったので学習するついてでまとめてみました。
Emmetとは
Emmet（旧：Zen Coding）は既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。 2008年にVadim Makeevが開発を始め[1]、Sergey Chikuyonokと利用者によりMIT Licenseのオープンソースとして継続して開発されている[2]。 多くの著名なエディタに実装されているが、特定のソフトウェアに特化して開発されておらず、どのテキストエディタにも偏向していない
https://ja.wikipedia.org/wiki/Emmet
コーディングを補助してくれるプラグインのことです。このEmmetをうまく利用していくことでより早くコーディングをすることができるようになります。様々なエディタに対応していて、標準でインストールされているものもあれば、プラグインをダウンロードしてインストールする必要があるものもありますので、ご自身が利用しているエディタが対応しているがご確認ください。(ちなみにVS Codeは標準でインストールされています。)
使い方
使い方は簡単で、用意されているHtmlタブやCSSプロパティの略式記法を入力してTabキーを押すだけです。
nav>ul>li*5
<!-- Tabキーを押して展開 -->
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
使えるようになれば一気にコーディングが早くなりそうですね。
略式記法
HTML編
記号一覧
| 記号 | 役割 | 例 |
|---|---|---|
| > | ネストし子要素を作ることができます | div>p |
| + | 兄弟要素を作ることができます | div+p |
| ^ | 次の要素の階層を一つあげることができます | div>p^div |
| () | 囲った要素をグループ化することができます | div>(ul+li)+p |
| *n | n回要素を複製することができます | div>p*3 |
| $n | n個連番を作ることができます | div>h$5 |
実際の使用例
子要素
<!--入力-->
nav>ul>li
<!--Tabキー入力展開後-->
<nav>
<ul>
<li></li>
</ul>
</nav>
兄弟要素
<!--入力-->
div+p+bq
<!--Tabキー入力展開後-->
<div></div>
<p></p>
<blockquote></blockquote>
階層を上げる
<!--入力-->
div+div>p>span+em^bq
<!--Tabキー入力展開後-->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
グループ化
<!--入力-->
div>(header>ul>li*2>a)+footer>p
<!--Tabキー入力展開後-->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
要素の複製
<!--入力-->
ul>li*5
<!--Tabキー入力展開後-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
連番
<!--入力-->
ul>li.item$*5
<!--Tabキー入力展開後-->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
子要素や兄弟要素の作成などはよく使うのではないでしょうか。他の記号も使えるようになっても損はないと思います。
属性の記法
ID、Classの場合
IDは付けたいID名の前に『 # 』を、classの場合は『 . 』をつけるだけです
<!--入力-->
# header
.title
p.class
<!--Tabキー入力展開後-->
<div id="header"></div>
<div class="title"></div>
<p class="class"></p>
また要素を書かなくても自動で補完してくれたりします。何も書いてなければdiv属性、ulの子要素だったらli属性などの要素を勝手に付けてくれます。
便利ですね〜！
その他属性
その他属性の場合は、属性とその値を『 [] 』で囲ってあげましょう。
<!--入力-->
p[title="Hello world"]
<!--Tabキー入力展開後-->
<p title="Hello world"></p>
HTML書き出し
Htmlの書き出しテンプレートを書くのってめんどくさいですよね。
Emmetでは 『 ! 』を入力するだけで長いテンプレートを展開してくれます。
<!--入力-->
!
<!--Tabキー入力展開後-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
一気にここまで展開してくれるのは非常に便利ですね。
ただ初期設定では
lang="en"
となっているので場合によって「 "ja" 」に書き換える必要があります。
設定を変えると、展開後一発で『 lang="ja" 』とすることができるようです。
VS Codeでの設定方法はこちらにいい記事がありました。
CSS編
HTMLだけでなく、CSSにも略式記法があります。
非常にたくさんあるのでよく使うであろうものだけピックアップしています。
Visual Formatting
position
| 略式記法 | プロパティ: 値 |
|---|---|
| pos | position:relative; |
| pos:s | position:static; |
| pos:a | position:absolute; |
| pos:r | position:relative; |
| pos:f | position:fixed |
float
| 略式記法 | プロパティ: 値 |
|---|---|
| fl | float:left; |
| fl:n | float:none; |
| fl:l | float:left; |
| fl:r | float:right; |
display
| 略式記法 | プロパティ: 値 |
|---|---|
| d | display:block; |
| d:n | display:none; |
| d:b | display:block; |
| d:f | display:flex; |
| d:if | display:inline-flex; |
| d:i | display:inline; |
| d:ib | display:inline-block; |
Spacing
margin
| 略式記法 | プロパティ: 値 |
|---|---|
| m | margin:; |
| m:a | margin:auto; |
| mt | margin-top:; |
| mt:a | margin-top:auto; |
| mr | margin-right:; |
| mr:a | margin-right:auto; |
| mb | margin-bottom:; |
| mb:a | margin-bottom:auto; |
| ml | margin-left:; |
| ml:a | margin-left:auto; |
pading
| 略式記法 | プロパティ: 値 |
|---|---|
| p | padding:; |
| pt | padding-top:; |
| pr | padding-right:; |
| pb | padding-bottom:; |
| pl | padding-left:; |
marginもpaddingも
t → top
r → right
b → bottom
l → left
の部分は共通なので覚えやすいですね！
Sizing
| 略式記法 | プロパティ: 値 |
|---|---|
| w | width:; |
| w:a | width:auto; |
| h | height:; |
| h:a | height:auto; |
| maw | max-width:; |
| maw:n | max-width:none; |
| mah | max-height:; |
| mah:n | max-height:none; |
| miw | min-width:; |
| mih | min-height:; |
Font
| 略式記法 | プロパティ: 値 |
|---|---|
| f | font:; |
| fw | font-weight:; |
| fz | font-size:; |
| ff | font-family:; |
「 "font-size" 」が「 "fz" 」であることがちょっと間違えやすいところかもしれません。
今までの流れだったら「 "fs" 」ですが、それだと「 "font-style" 」になってしまいます。
Text
text-align
| 略式記法 | プロパティ: 値 |
|---|---|
| ta | text-align:left; |
| ta:l | text-align:left; |
| ta:c | text-align:center; |
| ta:r | text-align:right; |
text-decoration
| 略式記法 | プロパティ: 値 |
|---|---|
| td | text-decoration:none; |
| td:n | text-decoration:none; |
| td:u | text-decoration:underline; |
| td:o | text-decoration:overline; |
| td:l | text-decoration:line-through; |
Background
| 略式記法 | プロパティ: 値 |
|---|---|
| bg | background:#000; |
| bgc | background-color:#fff; |
| bgi | background-image:url(); |
Color
| 略式記法 | プロパティ: 値 |
|---|---|
| c | color:#000; |
| c:r | color:rgb(0, 0, 0); |
| c:ra | color:rgba(0, 0, 0, .5); |
| op | opacity:; |
Border
| 略式記法 | プロパティ: 値 |
|---|---|
| bd | border:; |
| bdc | border-color:#000; |
| bds | border-style:; |
| bdt, bt | border-top:; |
| bdr, br | border-right:; |
| bdb, bb | border-bottom:; |
| bdl, bl | border-left:; |
Flexbox
| 略式記法 | プロパティ: 値 |
|---|---|
| ac | align-content:; |
| ai | align-item:; |
| fxd | flex-direction:; |
| fxf | flex-flow:; |
| fxw | flex-wrap:; |
| jc | justify-content:; |
さいごに
結構な量がありますが、ある程度規則性があるので意外と覚えやすいような気がします。（まだ自分は全然覚えきれていません笑）
毎日使うことで自然と手に染み付いてくるかと思うので、これからは意識的に使っていこうと思います。
また、ここに全て書いた訳ではないので公式ページやチートシートなども覗いてみてください。
参考
https://emmet.io/
https://docs.emmet.io/
https://docs.emmet.io/cheat-sheet/
https://ja.wikipedia.org/wiki/Emmet