こんばんは！
今日はEmmetのHTMLの記事に続き、CSSのEmmetを使用したコーディングを紹介します！
タイトルにある通り、環境はAWS Cloud9で特にインストールするものはありません。
基本の操作
Emmetの略語(この後紹介します)を入力後、Ctrl+Alt+Eで展開できます。といってもイメージ湧かないかもしれないので、早速紹介に入りたいと思います！
CSS略語一覧(チートシートより抜粋)
| CSS略語 | Ctrl+Alt+Eで展開後の表示 |
|---|---|
| m | margin: ; |
| m:a | margin: auto; |
| mt | margin-top: ; |
| p | padding: ; |
| pt | padding-top: ; |
| w100 | width: 100px; |
| wa | width: auto; |
| ha | height: auto; |
| maw | max-width: ; |
| miw | min-width: ; |
| fw | font-weight: ; |
| fw:b | font-weight: bold; |
| fw:n | font-weight: normal; |
| fz | font-size: ; |
| ta:c | text-align: center; |
| lh | line-height: ; |
| jc | justify-content: ; |
| jc:c | justify-content: center; |
| fx | flex: ; |
| fxw | flex-wrap: ; |
| c | color: #000; |
| op | opacity: ; |
| cur | cursor: pointer; |
| z | z-index: ; |
| pos | position: relative; |
| pos:a | position: absolute; |
| fl | float: left; |
例外ももちろんありますが、tはtop、rはright、bはbottom、aはautoなど、なんとなくパターンが決まっているので、大体頭文字を入れてみると変換できそうです。
チートシートはこちらです↓ 情報量がかなり多いので、よく使うものだけ覚えるのが効率よさそうです。
最後に
PFは決められた期間で1人で作業することになるので、いかにHTMLとCSSを早く記述できるかが大事になってくると思うので、あと半月で覚えて使えるようになりたいです