HTML/CSS 小林 秀樹

HTMLだけじゃない？emmetを使ってCSSを爆速で書く方法

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主にCSSのよく使う短縮記法をお伝えしようと思います。

emmetとは

emmetは、先に紹介したようにHTML/CSSの短縮記法を使えるようにするツールです。有名どころのテキストエディタであれば拡張機能として用意されていることがほとんどなのでぜひ入れましょう。

導入すると、エディタ上で短縮記法を入力し、tabキーでコードが展開されるようになります。HTMLの短縮記法は例えば以下のようなものがあります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.ClassName
展開されるコード：
<div class="ClassName"></div>
 
.Parent>.Child
展開されるコード：
<div class="Parent">
  <div class="Child"></div>
</div>
 
.ClassName*5
展開されるコード：
<div class="ClassName"></div>
<div class="ClassName"></div>
<div class="ClassName"></div>
<div class="ClassName"></div>
<div class="ClassName"></div>
 
 

こんな感じで、少ない文字入力で一気にコードが展開されます。

このような短縮がCSSでも行えます。CSSではほとんどのプロパティを2〜4文字で書け、非常に効果が高いのでぜひこの記事を読んで覚えて欲しいです！

CSSの短縮記法

ここからは一気に記法を紹介します。一部テキストエディタによって展開されるコードが異なる場合があるようなので、ご注意ください。

margin/padding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
m10
→ margin: 10px;
 
m:a
→ margin: auto;
 
mt8
→ margin-top: 8px;
 
mr8
→ margin-right: 8px;
 
ml4
→ margin-left: 4px;
 
mb4
→ margin-bottom: 4px;
 
p10
→ padding: 10px;
 
pt8
→ padding-top: 8px;
 
pr8
→ padding-right: 8px;
 
pl4
→ padding-left: 4px;
 
pb4
→ padding-bottom: 4px;

display

1
2
3
4
5
6
7
8
9
10
11
12
13
14
db
→ display: block;
 
di
→ display: inline;
 
dib
→ display: inline-block;
 
df
→ display: flex;
 
dn
→ display: none;

position

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
poa
→ position: absolute;
 
por（posでも良い）
→ position: relative;
 
pof
→ position: fixed;
 
poss
→ position: static;
 
t:0
→ top: 0;
 
r:10
→ right: 10px;
 
l:8
→ left: 8px;
 
b:16
→ bottom: 16px;

overflow

1
2
oh
→ overflow: hidden;

width/height

1
2
3
4
5
6
7
8
9
10
11
w100
→ width: 100px;
 
w50p
→ width: 50%;
 
h100
→ height: 100px;
 
h50p
→ height: 50%;

background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
bg
→ background: #000;
 
bg#FFFFFF
→ background: #FFFFFF;
 
bgi
→ background-image: url();
 
bgc
→ background-color: #fff;
 
bgsc
→ background-size: cover;
 
bgp
→ background-position: 0 0;
 
bgaf
→ background-attachment: fixed;

flex系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
jcc
→ justify-content: center;
 
jcs
→ justify-content: space-around;
 
jcsb
→ justify-content: space-between;
 
jcfs
→ justify-content: flex-start;
 
jcf
→ justify-content: flex-end;
 
aic
→ align-items: center;
 
aib
→ align-items: baseline;
 
aif
→ align-items: flex-end;
 
aifs
→ align-items: flex-start;
 
ais
→ align-items: stretch;
 
fdc
→ flex-direction: column;
 
fdr
→ flex-direction: row;

text関係

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
c#FFF
→ color: #FFF;
 
tac
→ text-align: center;
 
fz16
→ font-size: 16px
 
lh1.8
→ line-height: 1.8
 
lh40px
→ line-height: 40px;
 
ls1
→ letter-spacing: 1px;

随分長くなりましたが、よく使うのはこの辺りですね。

まとめ

いかがでしたでしょうか。
CSSのプロパティ名はタグ名に比べて長くなりがちですし、そもそもコード行数も基本的にはCSSの方が長いです（メディアクエリなどもあるので）。
他にも短縮記法はたくさんあるので、興味ある方はこちらを見てみてください。

CSSのemmetを覚えることで記述量をがっつり減らして、爆速コーディングしましょう！

この記事を読んだ人へのおすすめ記事

HTMLタグに必ずクラスをつけるべき理由

2019年5月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

フロントエンドエンジニア。

NEW POSTこのライターの最新記事