Emmetを使って爆速コーディング!【CSS編】

Emmetを使って爆速コーディング!css編
・HTML、CSSのコーディングに慣れてきたから速く打ちたい!
・効率よくスマートにコーディングをしたい!
このようなお悩みの人におすすめのEmmet【CSS】をご紹介します!
HTML編に「Emmetってなに?」の部分を詳細を書いてますので合わせて読んでもらえますと嬉しいです^^
HTML編の記事はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! 今回はHTML、CSSなどのコーディング作業を爆速になる!? 「E[…]

Emmetを使って爆速コーディング!HTML版
ゆうくん
HTMLよりCSSの方がEmmetの効果抜群かも!
スポンサーサイト

CSSでEmmetを使ってみよう!

使い方はHTML編と同じで、使用したいショートカットキーを打ってTabEnterを打つだけ!

HTML編のおさらい

p
<p></p>

pタグだと、このような感じです!
では、次はCSSのEmmetで僕がよく使うコードを書いていきます^^

css編

pos
position: relative;
poss position:static;
posa position:absolute;
posf position:fixed;

position:absolute;と打って書くと長いですが、posaTabで簡単に書くことができます!
そのほかにも、

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コードでした!

ゆうくん
ボリューム多いっ!!(汗)
今回の記事以外のコードが気になられる人は海外のチャートシートがありますので
リンクを載せておきます!

まとめ

CSSEmmetの数がけっこう多いので、よく使うコードだけを覚えるだけでも爆速に!!
気になられた人はぜひ使ってみてください^^

慣れるまでが少し大変ですが、試してみる価値は十分あります!!

ゆうくん
ぜひ覚えてみてね!
最後までお読みいただきありがとうございましたっ!!
このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^
HTML編の記事はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! 今回はHTML、CSSなどのコーディング作業を爆速になる!? 「E[…]

Emmetを使って爆速コーディング!HTML版