左:Emmet コマンド 中:展開結果 右:意味
| コマンド | 展開結果 | 意味 |
|---|---|---|
m10 | margin: 10px; | margin を 10px に設定 |
p10-20 | padding: 10px 20px; | 上下 10px / 左右 20px の padding |
mt5 | margin-top: 5px; | 上のマージンだけ 5px |
bgc#333 | background-color: #333; | 背景色を #333 にする |
c#fff | color: #fff; | 文字色を白にする |
w100p | width: 100%; | 横幅を 100% に設定 |
h100 | height: 100px; | 高さを 100px に設定 |
bd1-s#000 | border: 1px solid #000; | 1px の黒い実線の枠 |
bdt2-d#f00 | border-top: 2px dotted #f00; | 上だけ 2px 赤の点線 |
d:n | display: none; | 非表示にする |
pos:a | position: absolute; | 絶対配置にする |
ff | font-family: ; | フォントファミリーを指定(空欄に入力する) |
fw700 | font-weight: 700; | 太字にする(700 = bold) |
lh1.5 | line-height: 1.5; | 行間を 1.5 倍にする |
ta:c | text-align: center; | 文字を中央寄せ |
@m | @media screen { | メディアクエリの雛形 |
@f | @font-face { | Webフォント定義の雛形 |
@k | @keyframes identifier { | CSSアニメーション定義の雛形 |
d:f | display: flex; | Flexbox レイアウト |
jc:c | justify-content: center; | 横方向の要素を中央寄せ |
ai:c | align-items: center; | 縦方向の要素を中央寄せ |
gp10 | gap: 10px; | 要素間の隙間を 10px に |
ov:h | overflow: hidden; | はみ出した部分を非表示にする |
cur:p | cursor: pointer; | マウスカーソルをポインタに変更 |
trs.3s | transition: .3s; | アニメーションの時間を 0.3秒に |
tt:c | text-transform: capitalize; | 単語の先頭を大文字にする |
us:n | user-select: none; | 文字の選択を禁止 |