Honmushi blog
Emmet 操作メモ2019/01/22

Emmet 操作メモ

HTML、CSSを省略して書くことができる「Emmet」の使い方を書こうと思います。

フロントエンドの実装などでHTMLやCSSを書く際に、Emmetを使えばかなり作業効率を上げられます。 一度使うと手放せなくなるツールです。慣れると何倍もの速さで記述ができるようになります。

省略形をなかなか覚えられないので、都度この記事に書いて覚えようと思います。 とりあえずよく使うものからメモしておいて、どんどん継ぎ足しながら整理していく方針です。

ちなみに私はvimで利用しています。他のエディタやIDEでも使えますので調べて使ってみてください。Vimでは,で展開するように設定しています。

.vimrcに以下を記述  

NeoBundle 'mattn/emmet-vim'  
let g:user_emmet_leader_key='<c-e>'

以下に公式のチートシートがあるのでこれを印刷して手元においておくのがおすすめです。
公式のチートシート

HTML

HTMLのalias

html:5  
!

階層

ul>li*3

並列

div+div+div

上の階層へ

div>p>span+em^bq

グループ化

div>(header>ul>li*2>a)+footer>p

id class

div#idname+div.classname

属性

div[data-index=index data-name=name]

連番

img[src=photo$$.jpg]*3

タグ内のテキスト

div{hello world}

CSS

概要

w100p+m10

width: 100%;
margin: 10px;

単位

p %
e em
x ex

important

m10e! margin: 10em !important;

vender prefixes

-bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;


w webkit
m moz
s ms
o o

配置

pos:a position:absolute;

d:b display:block;
d:f display:flex;
d:if display:inline-flex;
d:i display:inline;

c:ra color:rgba(0, 0, 0, .5);

マージン

m margin:;
m:a margin:auto;
mt margin-top:;

サイジング

w width:;
w:a width:auto;
h height:;
maw max-width:;
maw:n max-width:none;
mih min-height:;

border

bd border:;
bd+ border:1px solid #000;

text

va:t vertical-align:top;
ta:c text-align:center;
td:n text-decoration:none;
td:u text-decoration:underline;

おわりに

ざっくり個人的に使いそうなもの、忘れそうなものを記載しています。とても入力が簡単になるので便利です。引き続きこれは便利というものが合ったら更新・整理します。

初心者のうちは写経などでコーディングをする機会は多いと思います。早めにこのような便利なツールの使い方を覚えておきましょう。今時写経なんてしないんでしょうか。動画教材みて完了なのかもしれませんが、このようなツールに触れつつHTML/CSSを書いてみるのも理解が深まるのでおすすめです。

上にも書いてますが、チートシートを印刷して手元に置きながら使ってみるのが便利です。Vimやtmuxのショートカットなども私はそうやって覚えました。

  • このエントリーをはてなブックマークに追加