こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主にCSSのよく使う短縮記法をお伝えしようと思います。
もっとコーディングを爆速にして時給を上げたい方はこちらの本がおすすめ！emmet以外にもコーディングを爆速にするための10以上のテクニックを詰め込んでます！
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;随分長くなりましたが、よく使うのはこの辺りですね。
まとめ
いかがでしたでしょうか。
CSSのプロパティ名はタグ名に比べて長くなりがちですし、そもそもコード行数も基本的にはCSSの方が長いです（メディアクエリなどもあるので）。
他にも短縮記法はたくさんあるので、興味ある方はこちらを見てみてください。
CSSのemmetを覚えることで記述量をがっつり減らして、爆速コーディングしましょう！
また、emmet以外にもコーディング速度を圧倒的に上げる方法を本にて紹介しています。
コーディング速度は、実は利益に直結する重要な要素です。Web制作を7年やってきた経験の全てをこの本にまとめているのでぜひご購入ください！
コメント