「Emmet」でコーディング作業を効率化しよう。-CSS編-

前回は「Emmet」でコーディング作業を効率化しよう。-HTML編-を解説させていただきました。
今回は、CSS編のタグの紹介です。
下記にタグのリストが記載されていますので、参考にしてください。

http://docs.emmet.io/cheat-sheet/

CSSの記述基本編

「w」・・・widthの追加


　
 w980

<!-- 展開後 -->
 width: 980px;

w980

width: 980px;

「bg」・・・backgroundの追加


　
 bg#000

<!-- 展開後 -->
 background: #000;

bg#000

background: #000;

「bg+」・・・background(画像)の追加


　
 bg+

<!-- 展開後 -->
 background: #fff url() 0 0 no-repeat;

bg+

background: #fff url() 0 0 no-repeat;

「c」・・・colorの追加


　
 c#444

<!-- 展開後 -->
 color: #444;

c#444

color: #444;

「bd」・・・borderの追加


　
 bd1pxsolid#ddd

<!-- 展開後 -->
 border: 1pxsolid #ddd;

bd1pxsolid#ddd

border: 1pxsolid #ddd;

「fz」・・・font-sizeの追加


　
 fz16

<!-- 展開後 -->
 font-size: 16px;

fz16

font-size: 16px;

「mt」・・・margin-topの追加


　
 mt10

<!-- 展開後 -->
 margin-top: 10px;

mt10

margin-top: 10px;

「fl」・・・float:leftの追加


　
 fl

<!-- 展開後 -->
 float: left;

float: left;

応用編

「-(マイナス)」を入れる事で、接頭辞(ベンダープレフィックス)も簡単につけれます。これはかなり楽ですね★

「-bdrs」・・・border-radiusの追加


　
 -bdrs8

<!-- 展開後 -->
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

-bdrs8

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

下記にタグのリストが記載されていますので、是非Emmetを使用してコーディングしたいという方は参考にしてください。

http://docs.emmet.io/cheat-sheet/

15.11.08　|　WEBデザイン制作・IT関連 KEiSoN★

CSSで画像をマウスオーバーしたときに効果を与える小技①

「Emmet」でコーディング作業を効率化しよう。-HTML編-

この記事を書いた人

KEiSoN★ > facebook

スカイゴールド株式会社　代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。