WebDesigner's Memorandumウェブデザイナーの備忘録

効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本

効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本

HTML編に引き続き、今回はCSSでEmmetを書く時の基本についてです。

基本的な使い方

CSSの場合はHTMLよりも更に楽で、「Fuzzy Search(あいまい検索)」という機能があり、一言一句覚えなくても、それっぽい省略文字を入力してtabを押せば展開されます。

プロパティの略

まずはプロパティの略から。
ものによっては1文字入力するだけで展開してくれるので、かなり効率的にCSSが書けるようになります。

展開前展開後
ddisplay: ;
mmargin: ;
ppadding: ;
ccolor: ;
wwidth: ;
hheight: ;
fwfont-weight: ;
fzfont-size: ;
tatext-align: ;
bgbackground: ;
bdborder: ;
posposition: ;

値の指定

プロパティの略の後に「:(コロン)」を付けて、値を入力すると値が指定できます。
値もある程度省略して入力できます。

展開前展開後
d:bdisplay: block;
d:idisplay: inline;
d:ibdisplay: inline-block;
fw:bfont-weight: bold;
fw:nfont-weight: normal;
pos:rposition: relative;
pos:aposition: absolute

値に数字を入力する場合

値に数字を使用する場合は単位の指定も必要になってきます。
また、値に数字を入力するプロパティの場合は、:(コロン)は不要です。

変換前変換後説明
w100width: 100px;数字だけだとpx指定
w100pwidth: 100%「p」と入力すると%指定
w100ewidth: 100em;「e」と入力するとem指定
w0.8width: 0.8em;「1.0」等以外の少数を入力すると自動でem指定
w100rwidth: 100rem;「r」と入力するとrem指定
w100vwwidth: 100vw;「vw」と入力するとvw指定
w100vhwidth: 100vh;「vh」と入力するとvh指定

色を指定する場合

色を指定する場合は「:(コロン)」の代わりに「#(ハッシュ記号)」を使ってその後にカラーコードを入力します。
また、カラーコードも便利に省略する事ができます。

変換前変換後説明
c#0color: #000;1文字の場合はRGB同じ値のカラーコードにしてくれる
c#efcolor: #efefef2文字の場合はそれを3回繰り返してくれる
c#55aceecolor: #55acee;普通にカラーコードを入力すれば、そのまま展開してくれる
c#ccc.5color: rgba(204, 204, 204, 0.5);カラーコード + 小数点でrgba()に変換

マージンやパディングの入力

マージンやパディングを入力する場合は、いくつか指定の方法があります。

例えば、「m」の後に数字をハイフン区切りで入力していくと、通常のCSSのように上下左右それぞれの値を設定できます。

変換前変換後説明
m20margin: 20px; 
m20-amargin: 20px auto;ハイフンで繋いで値2つ
m20-30-40margin: 20px 30px 40px;ハイフンで繋いで値3つ
m20-a40margin: 20px auto 40px;autoを使った後はハイフンは使わない
(ハイフンを使った場合はネガティブマージンになる)
m20-30-40-50margin: 20px 30px 40px 50px;ハイフンで繋いで値4つ

「+」を使った展開

「+」は複数のプロパティをつなげて一気に展開する時に使いますが、特定のプロパティで「+」を入力すると、必要な値を全て展開してくれる事もあります(Emmetの設定によっては使用不可)。

展開前展開後
bg+background: #fff url() 0 0 no-repeat;
f+font: 1em Arial,sans-serif;
bd+border: 1px solid #000;

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね