CSSを書いていて、プロパティ名を一文字ずつ打つのが面倒だと感じたことはありませんか？
特に justify-content や background-color など、綴りが長いコードはタイピングミスもしやすく、意外と時間を取られてしまいます。
そんな悩みを解決してくれるのが、VS Codeに標準搭載されている「Emmet」です。
この記事では、初心者の方が今日からすぐに使えるEmmetの基本テクニックをわかりやすく解説します。
【基本】頻出プロパティの短縮形
サイズ・余白
レイアウトの基本となるサイズ指定と余白です。
【入力】
w
h
m
p【展開】
width: ;
height: ;
margin: ;
padding: ;さらに、上下左右を指定したいときは、方向の頭文字（top, right, bottom, left）を付け足すだけです。
【入力】
mt
pl【展開】
margin-top: ;
padding-left: ;色・背景・枠線
デザインの見た目に関わるプロパティです。
【入力】
c
bg
bgc
bd【展開】
color: #000;
background: #000;
background-color: #fff;
border: 1px solid #000;テキスト
文字の読みやすさを整えるプロパティです。
【入力】
fz
fwb
lh【展開】
font-size: ;
font-weight: bold;
line-height: ;表示形式
要素の表示形式を指定するプロパティです。
【入力】
db
di
dib
dn【展開】
display: block;
display: inline;
display: inline-block;
display: none;【応用】数値と単位をセットで入力
いちいちw と打ってから 100 と打つ必要はありません。
つなげて打つだけで、Emmetが判断してくれます。
数値だけ打つと「px」になる
Emmetでは、数値だけを入力すると自動的に px となります。
【入力】
w100
m30
fz16【展開】
width: 100px;
margin: 30px;
font-size: 16px;他の単位（%やrem）を指定する
px 以外の単位を使いたいときは、数値の後に「単位の頭文字」を足すだけです。
【入力】
w100p
m1e
fz2r【展開】
width: 100%;
margin: 1em;
font-size: 2rem;「ハイフン」で複数の数値を指定する
margin や padding のように、上下左右で異なる数値を指定したい場合は、 -（ハイフン） で繋ぎます。
【入力】
m10-20
p5-10-15-20【展開】
margin: 10px 20px;
padding: 5px 10px 15px 20px;レイアウトと配置の短縮形
CSSコーディングにおいて、最も効率化を実感できるのがこのレイアウト（Flexbox）と配置（Position）です。
Flexbox
レイアウト作りで欠かせないFlexboxも、頭文字を組み合わせるだけです。
【入力】
df
jcc
jcsb
aic
fxd
fxdc【展開】
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-direction: column;ポジション指定
要素を重ねたり固定したりする際に使うPositionも、頭文字を組み合わせるだけです。
【入力】
posr
posa
posf
t0
l50p
z10【展開】
position: relative;
position: absolute;
position: fixed;
top: 0;
left: 50%;
z-index: 10;テキストの配置と装飾
文字の並び替えや装飾も、頭文字を組み合わせるだけです。
【入力】
ta
tac
tar
tdn
ovh【展開】
text-align: left;
text-align: center;
text-align: right;
text-decoration: none;
overflow: hidden;まとめ
今回は、コーディングを効率化する「Emmet」の基本から応用までを解説しました。
【今回紹介したポイント】
- 基本の頭文字（w, h, m, p）
- 数値＋単位（w100p, fz1.5r）
- レイアウト（df, jcc, aic）
最初からすべてを覚える必要はありません。
まずはwhmpの4つから意識して使い始めてみてください。
一文字打つたびにVS Codeが予測候補を出してくれるので、それを確認しながら少しずつ指に覚え込ませていきましょう。
