PR

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

HTML/CSSを学ぶ

こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主に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を覚えることで記述量をがっつり減らして、爆速コーディングしましょう!

また、emmet以外にもコーディング速度を圧倒的に上げる方法を本にて紹介しています。

コーディング速度は、実は利益に直結する重要な要素です。Web制作を7年やってきた経験の全てをこの本にまとめているのでぜひご購入ください!

【脱・初心者&利益倍増】ツールを駆使して爆速コーダーになるためのガイドブック - セカヤサBooks
この本ではコーディングの速度について考えていこうと思います。 Web制作、ことHTML/CSSのコーディングを仕事にする上でそのスピードは必ず問われます。同じクオリティなら早い方がいいですからね(どんな仕事もそうですが)。 しかしコーディン...

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

コメント

タイトルとURLをコピーしました