「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回ほど往復しながら活動中。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
最近は、Shopify構築にも携わっている。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。