Emmet CSS 練習シート

左:Emmet コマンド 中:展開結果 右:意味

Emmet Cheat Sheet

コマンド展開結果意味
m10margin: 10px;margin を 10px に設定
p10-20padding: 10px 20px;上下 10px / 左右 20px の padding
mt5margin-top: 5px;上のマージンだけ 5px
bgc#333background-color: #333;背景色を #333 にする
c#fffcolor: #fff;文字色を白にする
w100pwidth: 100%;横幅を 100% に設定
h100height: 100px;高さを 100px に設定
bd1-s#000border: 1px solid #000;1px の黒い実線の枠
bdt2-d#f00border-top: 2px dotted #f00;上だけ 2px 赤の点線
d:ndisplay: none;非表示にする
pos:aposition: absolute;絶対配置にする
fffont-family: ;フォントファミリーを指定(空欄に入力する)
fw700font-weight: 700;太字にする(700 = bold)
lh1.5line-height: 1.5;行間を 1.5 倍にする
ta:ctext-align: center;文字を中央寄せ
@m@media screen {

}
メディアクエリの雛形
@f@font-face {

}
Webフォント定義の雛形
@k@keyframes identifier {

}
CSSアニメーション定義の雛形
d:fdisplay: flex;Flexbox レイアウト
jc:cjustify-content: center;横方向の要素を中央寄せ
ai:calign-items: center;縦方向の要素を中央寄せ
gp10gap: 10px;要素間の隙間を 10px に
ov:hoverflow: hidden;はみ出した部分を非表示にする
cur:pcursor: pointer;マウスカーソルをポインタに変更
trs.3stransition: .3s;アニメーションの時間を 0.3秒に
tt:ctext-transform: capitalize;単語の先頭を大文字にする
us:nuser-select: none;文字の選択を禁止