前回は「Emmet」でコーディング作業を効率化しよう。-HTML編-を解説させていただきました。
今回は、CSS編のタグの紹介です。
下記にタグのリストが記載されていますので、参考にしてください。
CSSの記述基本編
「w」・・・widthの追加
1 2 3 4 5 6 7 8 |
w980 <!-- 展開後 --> width: 980px; |
「bg」・・・backgroundの追加
1 2 3 4 5 6 7 8 |
bg#000 <!-- 展開後 --> background: #000; |
「bg+」・・・background(画像)の追加
1 2 3 4 5 6 7 8 |
bg+ <!-- 展開後 --> background: #fff url() 0 0 no-repeat; |
「c」・・・colorの追加
1 2 3 4 5 6 7 8 |
c#444 <!-- 展開後 --> color: #444; |
「bd」・・・borderの追加
1 2 3 4 5 6 7 8 |
bd1pxsolid#ddd <!-- 展開後 --> border: 1pxsolid #ddd; |
「fz」・・・font-sizeの追加
1 2 3 4 5 6 7 8 |
fz16 <!-- 展開後 --> font-size: 16px; |
「mt」・・・margin-topの追加
1 2 3 4 5 6 7 8 |
mt10 <!-- 展開後 --> margin-top: 10px; |
「fl」・・・float:leftの追加
1 2 3 4 5 6 7 8 |
fl <!-- 展開後 --> float: left; |
応用編
「-(マイナス)」を入れる事で、接頭辞(ベンダープレフィックス)も簡単につけれます。これはかなり楽ですね★
「-bdrs」・・・border-radiusの追加
1 2 3 4 5 6 7 8 9 10 |
-bdrs8 <!-- 展開後 --> -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; |
下記にタグのリストが記載されていますので、是非Emmetを使用してコーディングしたいという方は参考にしてください。
15.11.08 | WEBデザイン制作・IT関連