記事一覧
【Emmetで爆速コーディングCSS編②】よく使うCSSプロパティの省略パターンをまとめてみました！
【Emmetで爆速コーディングCSS編②】よく使うCSSプロパティの省略パターンをまとめてみました！
この記事は2021年11月に公開しました。
展開の結果は、VS Code の版によって少し違う場合があります。
展開の結果は、VS Code の版によって少し違う場合があります。
CSS の Emmet（エメット）には、数え切れないほどの省略パターンがあります。
全てをまとめたチートシートもあります。
ただ、開いてみると分かる通り、その数はとても多いです。
この記事では、その中から、比較的覚えやすく、よく使うと思ったものを一覧にしました。
Emmet とは何か、どう使うのかは、先に次の記事を読むと分かりやすくなります。
CSS の基本的な使い方は、2本目の CSS 編①で紹介しています。
全てをまとめたチートシートもあります。
ただ、開いてみると分かる通り、その数はとても多いです。
この記事では、その中から、比較的覚えやすく、よく使うと思ったものを一覧にしました。
Emmet とは何か、どう使うのかは、先に次の記事を読むと分かりやすくなります。
CSS の基本的な使い方は、2本目の CSS 編①で紹介しています。
ボックスのサイズや装飾に関するプロパティ
CSS のプロパティの中でも、特によく使う、ボックスまわりの省略記法です。
よく使うものほど覚えやすく、慣れると速くなった効果も感じやすくなります。
よく使うものほど覚えやすく、慣れると速くなった効果も感じやすくなります。
| 省略記法 | プロパティ |
|---|---|
w |
width |
maw |
max-width |
miw |
min-width |
h |
height |
p |
padding |
m |
margin |
bgc |
background-color |
bd |
border |
bdrs |
border-radius |
組み合わせて便利なプロパティ
padding／margin／border などは、「t／l／b／r」と組み合わせると、もっと細かいプロパティを指定できます。
| 省略記法 | プロパティ |
|---|---|
pt |
padding-top |
pl |
padding-left |
pb |
padding-bottom |
pr |
padding-right |
また、width／height／padding／margin などは、「省略記法＋数値＋単位の頭文字」で書くと、さらに速く書けます。
| 省略記法 | プロパティ |
|---|---|
p10 |
padding:10px |
p10p |
padding:10% |
p10r |
padding:10rem |
p10e |
padding:10em |
フォント・テキストに関するプロパティ
フォントや文字まわりの省略記法です。
| 省略記法 | プロパティ |
|---|---|
ff |
font-family |
c |
color |
fz |
font-size |
fwb |
font-weight: bold |
tac |
text-align: center |
va |
vertical-align |
lh |
line-height |
ボックスの配置・レイアウトに関するプロパティ
ボックスの配置や、レイアウトまわりの省略記法です。
| 省略記法 | プロパティ |
|---|---|
d |
display |
pos |
position |
t |
top |
r |
right |
b |
bottom |
l |
left |
fx |
flex |
jc |
justify-content |
fxw |
flex-wrap |
ai |
align-items |
fxb |
flex-basis |
fxd |
flex-direction |
fxf |
flex-flow |
fxg |
flex-grow |
fxsh |
flex-shrink |
ord |
order |
まとめ
よく使う CSS の省略記法を、4つの一覧で紹介しました。
それぞれの代表は、次の通りです。
それぞれの代表は、次の通りです。
- ボックスのサイズや装飾
w（width）／p（padding）／m（margin）／bgc（background-color）／bd（border）など- 組み合わせて便利なプロパティ
- 「t／l／b／r」と組み合わせると、
pt（padding-top）のように指定できます。
数値と単位の頭文字を続けると、値まで書けます（p10で padding:10px）。 - フォント／テキスト
ff（font-family）／fz（font-size）／tac（text-align: center）／lh（line-height）など- ボックスの配置／レイアウト
d（display）／pos（position）／jc（justify-content）／ai（align-items）など
IMG-flowで働くという選択
この記事を書いているIMG-flowは、大阪のWeb制作会社です。
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
クリエイター採用を見る
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
この記事は参考になりましたか？
ご回答ありがとうございました
