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

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

emmetとは
CSSの短縮記法
まとめ
この記事を読んだ人へのおすすめ記事

emmetとは

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

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

.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

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

db
→ display: block;

di
→ display: inline;

dib
→ display: inline-block;

df
→ display: flex;

dn
→ display: none;

position

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

oh
→ overflow: hidden;

width/height

w100
→ width: 100px;

w50p
→ width: 50%;

h100
→ height: 100px;

h50p
→ height: 50%;

background

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系

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関係

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を覚えることで記述量をがっつり減らして、爆速コーディングしましょう！