・HTML、CSSのコーディングに慣れてきたから速く打ちたい！
・効率よくスマートにコーディングをしたい！
・効率よくスマートにコーディングをしたい！
このようなお悩みの人におすすめのEmmet【CSS】をご紹介します！
HTML編に「Emmetってなに？」の部分を詳細を書いてますので合わせて読んでもらえますと嬉しいです^^
HTML編に「Emmetってなに？」の部分を詳細を書いてますので合わせて読んでもらえますと嬉しいです^^
あわせて読みたい
Emmetを使って爆速コーディング！【HTML編】
・HTML、CSSのコーディングに慣れてきたから速く打ちたい！ ・効率よくスマートにコーディングをしたい！ 今回はHTML、CSSなどのコーディング作業を爆速になる！？ 「Em...
HTMLよりCSSの方がEmmetの効果抜群かも！
目次
CSSでEmmetを使ってみよう！
使い方はHTML編と同じで、使用したいショートカットキーを打ってTabかEnterを打つだけ！
HTML編のおさらい
p
<p></p>
pタグだと、このような感じです！
では、次はCSSのEmmetで僕がよく使うコードを書いていきます^^
css編
pos
position: relative;
| poss | position:static; |
| posa | position:absolute; |
| posf | position:fixed; |
position:absolute;と打って書くと長いですが、posa＋Tabで簡単に書くことができます！
そのほかにも、
t
top: ;
| r | right: ; |
| b | bottom: ; |
| l | left: ; |
| z | z-index: ; |
fl
float:left;
| fln | float:none; |
| flr | float:right; |
| cl | clear:both; |
d
display:block;
| dn | display:none; |
| df | display:flex; |
| di | display:inline; |
| dib | display:inline-block; |
marginやpaddingは書く機会がとても多いので便利！
m
margin: ;
| mt | margin-top: ; |
| mr | margin-right: ; |
| mb | margin-bottom: ; |
| ml | margin-left: ; |
| p | padding: ; |
| pt | padding-top: ; |
| pr | padding-right: ; |
| pb | padding-bottom: ; |
| pl | padding-left: ; |
bxz
box-sizing:border-box;
w
width: ;
| h | height: ; |
| maw | max-width: ; |
| mah | max-height: ; |
| miw | min-width: ; |
| mih | min-height: ; |
fw
font-weight: ;
| fwb | font-weight:bold; |
| fwn | font-weight:normal; |
| fz | font-size: ; |
| ff | font-family: ; |
ta
text-align:left;
| tac | text-align:center; |
| tar | text-align:right; |
| taj | text-align:justify; |
| lh | line-height: ; |
| lts | letter-spacing: ; |
bg
background:#000;
| bgc | background-color:#fff; |
| bgi | background-image:url(); |
| bgr | background-repeat: ; |
| bgp | background-position:0 0; |
| bgz | background-size:contain; |
c
color:#000;
| op | opacity: ; |
bd
border: ;
| bdn | border:none; |
| bt | border-top: ; |
| br | border-right: ; |
| bb | border-bottom: ; |
| bl | border-left: ; |
| bdrs | border-radius: ; |
lis
list-style: ;
| lisn | list-style:none; |
ai
align-items: ;
| aic | align-items:center; |
| jc | justify-content: ; |
| jcc | justify-content:center; |
| jcsb | justify-content:space-between; |
| ord | order: ; |
| trf | transform: ; |
上記が僕がとくによく使うcssコードでした！
ボリューム多いっ！！（汗）
今回の記事以外のコードが気になられる人は海外のチャートシートがありますので
リンクを載せておきます！
リンクを載せておきます！
まとめ
CSSはEmmetの数がけっこう多いので、よく使うコードだけを覚えるだけでも爆速に！！
気になられた人はぜひ使ってみてください^^
慣れるまでが少し大変ですが、試してみる価値は十分あります！！
ぜひ覚えてみてね！
最後までお読みいただきありがとうございましたっ！！
このブログを読んで「いいね」「面白かった」と思っていただけたら下記バナーをポチッと宜しくお願いします！！今後の励みになりますっ^^
あわせて読みたい
Emmetを使って爆速コーディング！【HTML編】
・HTML、CSSのコーディングに慣れてきたから速く打ちたい！ ・効率よくスマートにコーディングをしたい！ 今回はHTML、CSSなどのコーディング作業を爆速になる！？ 「Em...
コメント