CSSで0に関する省略【簡潔なコードに】

「CSSのコードを見るとたまに「0」が省略されてるんだけど、省略してもいいの？どうして省略できるの？」

私はホームページを9年作成している「0」省略派です。

CSSで0に関する省略について解説します。

長さが「0」なら単位省略可能

paddingやmarginのようにCSSで長さを指定するとき、その値が「0」なら単位の省略が可能です。

.example{
    padding: 5px 0px 5px 30px;
}
.example{
    padding: 5px 0 5px 30px;
}

上記では2番目の値が0です。この場合同じ結果になります。

ではなぜ単位の省略が可能なのでしょうか。

答え

0の場合どの単位がついても長さは同じ「0」だからです。

1未満の小数の「0」省略可能

opacityやtransitionでは「0.1」や「0.5」のように少数を使います。この「0」が省略可能です。

.example{
    transition: 0.3s;
}
.example{
    transition: .3s;
}

上記のように「0.3s」は「.3s」と0を省略することができます。

でもこれだと「.」を見逃して「3s」だと勘違いしそうですよね？

とはいえ、opacityやtransitionは1未満の少数を使うことが多いため、慣れてくるとあまり違和感を感じなくなります。

なお0が省略できるからと「0.01」を「.1」と省略することはできませんのでご注意を。

初期値が0なら省略

marginは初期値が「auto」です。そして上と下のautoは0です。よってわざわざ「0」を指定する必要はありません。

.example{
    margin: 0 auto
}
.example{
    margin: auto;
}

「margin: 0 auto」は「上下が0、左右がauto」という意味です。

「margin: auto」は「上右下左がauto」という意味です。

先に述べたように上と下のautoは0です。

つまり「margin: 0 auto」＝「margin: auto」なので、わざわざ「0」を書く必要はありません。

noneの代わりに0

border:noneもborder:0も線が消えます。

.example{
    border:none;
}
.example{
    border: 0;
}

「border:none」の「none」は「border-style」に対する指定です。

「border:0」の「0」は「border-width」に対する指定です。

よって「線なし」も「線の幅0」も結局同じ結果になります。

「none」と「0」では「0」のようが3文字少ないので「none」の代わりに「0」を指定するとコードを少し減らすことができます。

省略はした方がいいのか

ぶっちゃけ好みです。

「省略した方がコードを書くのが早くなる」というのは早計です。ほぼ変わりません。

「5px」→「0」に変えるとき3回Deleteキーを押さないといけませんが

「5px」→「0px」ならDeleteキーは1回で済みます。

調整のことを考えるとほぼ差はありません。

個人的には省略するとコードが簡潔になり気持ちがいいです。

しかし初心者は下手に間違うよりも省略しない形でCSSを覚え、間違えなくってきたら省略を覚えましょう。

【まとめ】CSSで0に関する省略

長さが「0」なら単位省略可能
0px=0em=0%=0vw=0

1未満の小数の「0」省略可能
0.3s = .3s

初期値が0なら省略
margin: 0 auto ＝ margin: auto

noneの代わりに0
border:none = border:0 = 線なし

省略はした方がいいのか
好みで。CSSに慣れたらしてもいい。

以上、CSSで0に関する省略でした。