こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主にCSSのよく使う短縮記法をお伝えしようと思います。
emmetとは
emmetは、先に紹介したようにHTML/CSSの短縮記法を使えるようにするツールです。有名どころのテキストエディタであれば拡張機能として用意されていることがほとんどなのでぜひ入れましょう。
導入すると、エディタ上で短縮記法を入力し、tabキーでコードが展開されるようになります。HTMLの短縮記法は例えば以下のようなものがあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.ClassName 展開されるコード： <div class="ClassName"></div> .Parent>.Child 展開されるコード： <div class="Parent"> <div class="Child"></div> </div> .ClassName*5 展開されるコード： <div class="ClassName"></div> <div class="ClassName"></div> <div class="ClassName"></div> <div class="ClassName"></div> <div class="ClassName"></div> |
こんな感じで、少ない文字入力で一気にコードが展開されます。
このような短縮がCSSでも行えます。CSSではほとんどのプロパティを2〜4文字で書け、非常に効果が高いのでぜひこの記事を読んで覚えて欲しいです！
CSSの短縮記法
ここからは一気に記法を紹介します。一部テキストエディタによって展開されるコードが異なる場合があるようなので、ご注意ください。
margin/padding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
m10 → margin: 10px; m:a → margin: auto; mt8 → margin-top: 8px; mr8 → margin-right: 8px; ml4 → margin-left: 4px; mb4 → margin-bottom: 4px; p10 → padding: 10px; pt8 → padding-top: 8px; pr8 → padding-right: 8px; pl4 → padding-left: 4px; pb4 → padding-bottom: 4px; |
display
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
db → display: block; di → display: inline; dib → display: inline-block; df → display: flex; dn → display: none; |
position
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
poa → position: absolute; por（posでも良い） → position: relative; pof → position: fixed; poss → position: static; t:0 → top: 0; r:10 → right: 10px; l:8 → left: 8px; b:16 → bottom: 16px; |
overflow
|
1 2 |
oh → overflow: hidden; |
width/height
|
1 2 3 4 5 6 7 8 9 10 11 |
w100 → width: 100px; w50p → width: 50%; h100 → height: 100px; h50p → height: 50%; |
background
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
bg → background: #000; bg#FFFFFF → background: #FFFFFF; bgi → background-image: url(); bgc → background-color: #fff; bgsc → background-size: cover; bgp → background-position: 0 0; bgaf → background-attachment: fixed; |
flex系
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
jcc → justify-content: center; jcs → justify-content: space-around; jcsb → justify-content: space-between; jcfs → justify-content: flex-start; jcf → justify-content: flex-end; aic → align-items: center; aib → align-items: baseline; aif → align-items: flex-end; aifs → align-items: flex-start; ais → align-items: stretch; fdc → flex-direction: column; fdr → flex-direction: row; |
text関係
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
c#FFF → color: #FFF; tac → text-align: center; fz16 → font-size: 16px lh1.8 → line-height: 1.8 lh40px → line-height: 40px; ls1 → letter-spacing: 1px; |
随分長くなりましたが、よく使うのはこの辺りですね。
まとめ
いかがでしたでしょうか。
CSSのプロパティ名はタグ名に比べて長くなりがちですし、そもそもコード行数も基本的にはCSSの方が長いです（メディアクエリなどもあるので）。
他にも短縮記法はたくさんあるので、興味ある方はこちらを見てみてください。
CSSのemmetを覚えることで記述量をがっつり減らして、爆速コーディングしましょう！
コメントを残す