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です。この場合同じ結果になります。
ではなぜ単位の省略が可能なのでしょうか。
答え
0px=0em=0%=0vw=0
0の場合どの単位がついても長さは同じ「0」だからです。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。
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に関する省略でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。