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

Emmet 操作メモ

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

フロントエンドの実装などでHTMLやCSSを書く際に、Emmetを使うことでかなり作業効率を上げることができます。

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

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

.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;

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

初心者のうちこそ写経などでコーディングをする機会は多いと思います。早めにこのような便利なツールの使い方を覚えておくことをおすすめします。

上にも書いてますが、チートシートを印刷して手元に置きながら使ってみるのが便利です。

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