cssの初期値。
聞いたことはあるけど、知ってて何かいいことある？
と思ってる人もいるはず。
本質的な話をすれば、cssの根本理解につながります。
そこでこの記事では、cssの初期値を知ってるのと知らないのでは、
何がどう違うのかを紹介します。
cssの初期値
cssの初期値とは、プロパティにはじめから与えられている値。
例えば、paddingの初期値は0。
つまり、ある要素にpaddingを指定してなくても、はじめから余白はなしになってるんです。
ほかには、
- marginが0
- background-colorがtransparent
- widthはauto
- max-widthはnone
などでしょうか。
あと、text-alignが実質的には左寄せになります。
→初期値はstartだが、日本語では左から始まるため
transparent … 日本語訳で透明。
例えば、親がグレーの背景なら子の背景は透過して、親と同じ背景色になる。
<div>
<p>無色の背景</p>
</div>div {
background-color: #f2f1f1; /* うすいグレー */
}初期値を知っていれば何がいいのか？
初期値を知っていると、指定の数を減らせます。
先ほどのpaddingの初期値が0だと知らなかったとしましょう。
そうすれば、
p {
padding: 0;
}と書くと思います。
ただし本来なら、なくてもいい指定です。
反対に、paddingの初期値を知っていれば書かなくてすみます。
つまり、cssの指定数を1つ減らせるというわけ。
しかも、padding: 0を指定しなくていい理由をあなたは分かってるんです。
これって、根本的な理解に1歩近づいたことになります。
ただね。
たった1行？って感じる人もいると思います。
そんなのたいした違いじゃないかって気持ちも分かります。
特に勉強しはじめのうちは。
ですが、じつはここにコードを書いていく面白さがあったりします。
それに1行減らせることが、理解度が高くなったなあって感覚もあるんです。
少なくとも、僕はここにちょっとした快感を覚えてました。
すみません、脱線したんで次へ行きます。
initial(初期値)
プロパティの値を指定する時に、initialっていうのがあります。
このinitialは初期値を指定することを意味します。
例えば、以下のような指定。
p {
padding: 10px;
}
@media(max-width: 450px) {
p {
padding: initial;
}
}パソコン画面では<p>のpaddingが10px。
そして、画面幅450pxまでは余白をなしにしたい時、initialを使えばpadding: 0になります。
※画面幅とは<body>の幅です。
ただ、普通にpadding: 0と書いていいですよね。
p {
padding: 10px;
}
@media(max-width: 450px) {
p {
padding: 0;
}
}これでいいわけです。
initialを使う場面
ですが例えば、背景色の初期値、transparentの単語を思い出せなかった場合。
もっと細かく言うと、背景色の初期値のイメージはあるんです。
それを使えば、親要素の背景色になると分かってる。
けれど、transparentという単語自体をど忘れした。
そんな時、
p {
background-color: #f2f1f1; /* うすいグレー */
}
@media(max-width: 450px) {
p {
background-color: initial;
}
}としたらいいわけです。
調べてもいいんですが、ちょっと労力かかりますよね。
それよりも先に進むことを優先する場合には、このinitialを使った方が手っ取り早いってわけです。
もっとも、initialが浮かばなかったら、どうしようもないんですが 笑
それともう1つ。
<div>
⌇
⌇
⌇
⌇
⌇
<p>ほぼほぼ</p>
</div>div {
background-color: #f2f1f1; /* うすいグレー */
}
⌇
⌇
⌇
⌇
⌇
⌇
⌇
⌇
p {
background-color: #ffffff; /* 白色 */
}
@media(max-width: 450px) {
p {
background-color: initial;
}
}上記のようなコードがあったとします。
450pxまでは、<p>の背景色を親の<div>と同じにしたい。
そんな時、先ほどと同様にtransparentの単語をど忘れした。
だったら、<div>の指定を遡って#f2f1f1をコピペするって方法もあると思います。
ただ、<div>の指定を見つけるのは苦労します。
さらに、コード量が多くなればなるほどに。
だったら、background-color: initialと書けば、親と同じ背景色になります。
要はそれだけなんですけどね。
僕もinitialなんて使うのかな？って実際思ってました。
だけど、ほんのたまに使うんです。
initialの方が労力なく書ける時は、こっちを選ぶ感じで。
もっとも、initialを使うって頭になるまでには、意識的に使うようにしてましたが。
感覚的な話をさせてもらうなら、100ある労力の1を減らすイメージ。
ですが、その1を10個積み上げると、90の労力で同じ仕事ができるようになります。
そして、コード自体も早く書けるようになるんです。
参考サイト
この「nth-of-type」は、CSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新バージョンです。
まとめ
今回の話はむずかしかったですよね。
初期値の話をするつもりが、半分くらいは労力を減らすような話になってしまいました。
まあ、こんな考え方もあるんだくらいに受け取ってもらえればと思います。
あっ、ついでに初期値とリセットcssの関係も知っておくと、さらに理解が深まります。
というわけで、こちらの記事をどうぞ。