Frontend

Emmet: CSSコーディングを効率化し、ショートカットで簡潔なコードを実現

EmmetはCSSコーディングを効率化する強力なツール。この記事では、Emmetの実用的なテクニックを解説し、ショートカットを活用して簡潔で読みやすいCSSコードを作成する方法を探る。

モクジ

CSS Emmetの利用方法

Emmet 使用方法

actionEmmet + Tab
or
Emmet + Return / Enter

Emmetの省略記法

Emmet Table
Emmet	code	Description
cm	`/* */`	コメントコードの展開。
-bdrs3	`-webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px`	ベンダープレフィックスを展開。
@m	`@media screen { }`	メディアクエリを展開。

Emmet Table
Emmet	proprety
ai	align-items: ;
b	bottom: ;
bd	border: ;
bd+	border: 1px solid #000;
bdcl	border-collapse: ;
bdcl:c	border-collapse: collapse;
bdcl:s	border-collapse: separate;
bg	background: ;
bgc	background-color: ;
bxsh	box-shadow: inset hoff voff blur color;
bxz	box-sizing: border-box;
c	color: #000;
cp	clip: ;
cl	clear: both;
cnt	content: ;
ct	content: ;
c:r	color: rgb(0,0,0);
d	display: block;
db	display: block;
df	display: flex;
dib	display: inline-block;
dn	display: none;
f	font: ;
f+	font: 1em Arial,sans-serif;
fw	font-weight: ;
fwb	font-weight: bold;
fxw	flex-wrap: ;
fz	font-size: ;
h	height: ;
jc	justify-content: ;
l	left: ;
lh	line-height: ;
m	margin: ;
mah	max-height: ;
maw	max-width: ;
mih	min-height: ;
miw	min-width: ;
ol	outline: ;
ov	overflow: hidden;
p	padding: ;
pos	position: relative;
q	quotes: ;
r	right: ;
t	top: ;
ta	text-align: ;
v	visibility: hidden;
w	width: ;
win	windows: ;
z	z-index: ;
zm	zoom: 1;
!	!important

Emmet Table
Emmet	code
m10-20-10-30	`margin: 10px 20px 10px 30px;`
fz16	`font-size: 16px;`
bsh0-0-3-0#000	`box-shadow: 0 0 3px 0 #000000;`
w200+h100p+m10e+p10r	`width: 200px; height: 100%; margin: 10em; padding: 10rem;`

EmmetはHTMLコーディングを効率化する強力なツール。この記事では、Emmetの基本的な使い方から高度なテクニックまでを解説し、 HTML記述の短縮化と生産性向上の方法をまとめる。