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

HTML/CSSを学ぶ

2019.03.292024.06.25

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

もっとコーディングを爆速にして時給を上げたい方はこちらの本がおすすめ！emmet以外にもコーディングを爆速にするための10以上のテクニックを詰め込んでます！

【脱・初心者&利益倍増】ツールを駆使して爆速コーダーになるためのパーフェクトガイドブック - セカヤサBooks

この本ではコーディングの速度について考えていこうと思います。 Web制作、ことHTML/CSSのコーディングを仕事にする上でそのスピードは必ず問われます。同じクオリティなら早い方がいいですからね（どんな仕事もそうですが）。しかしコーディン...

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

emmetとは

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

最近はVSCodeなどではデフォルトで利用可能になっているくらいメジャーになりました。

導入すると、エディタ上で短縮記法を入力し、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;

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