cssの初期値。
聞いたことはあるけど、知ってて何かいいことある？
と思ってる人もいるはず。
先に結論をお伝えすると、初期値を理解すると指定の数が減らせます。
レスポンシブのコードを書けるようになった人は、ご覧ください。
cssの初期値【前提】
初期値とはプロパティに元から与えられている値です。
例えばpaddingの初期値は0。
つまり、ある要素にpaddingを指定しない場合、余白はなしになります。
おもなプロパティと初期値はこちら。
| プロパティ | 初期値 |
|---|---|
| padding | 0 |
| margin | 0 |
| background-color | transparent |
| width | auto |
| max-width | none |
background-colorの初期値
transparent … 日本語で透明。
例えば、親の背景色がグレーの場合。
子の背景は透過して親と同じ背景色になります。
<div>
<p>無色の背景</p>
</div>div {
background-color: #f2f1f1; /* うすいグレー */
}
p {
background-color: transparent; /* 初期値 */
}初期値を理解しておくべき理由
初期値を理解しておくべきなのは、
「初期値を知っておくと、css指定の数を減らせる」
からです。
仮にpaddingの初期値が0と知らないとしましょう。
そうすれば、padding: 0と書くはずです。
p {
padding: 0;
}ただし本来なら、なくてもいい指定です。
反対にpaddingの初期値を知っていれば、書かなくてすみます。
つまりcssの指定数を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はどんな時に使うの？と思う人もいるはず。
そこで、initialを使う場面を2つ紹介します。
initialを使う場面①
例えば、
「パソコン画面では<p>の背景色をうすいグレーに。
画面幅450pxまでは、親要素と同じ背景色に」
したい。
こんな時はtransparentを使おう、となりますよね？
p {
background-color: #f2f1f1; /* うすいグレー */
}
/* スマホ画面 */
@media(max-width: 450px) {
p {
background-color: ……
}
}けれど、transparentを思い出せない。
単語自体をど忘れした場合。
調べてもいいんですが、少し労力かかりますよね。
それよりも先へ進むのを優先したい。
という時、initialが使えます。
p {
background-color: #f2f1f1; /* うすいグレー */
}
/* スマホ画面 */
@media(max-width: 450px) {
p {
background-color: initial;
}
}これがinitialを使う場面の1つです。
initialを使う場面②
もう1つ、initialを使える場面を紹介します。
次のような場合です。
「<p>の背景色は画面幅450px以上、つまりパソコン画面では白色に。
画面幅450pxまでは、親の<div>と同じうすいグレーの背景色にしたい」
そんな時、先ほどと同様にtransparentの単語をど忘れした。
<div>
⌇
⌇
⌇
⌇
⌇
<p>ほぼほぼ</p>
</div>div {
background-color: #f2f1f1; /* うすいグレー */
}
⌇
⌇
⌇
⌇
⌇
⌇
⌇
⌇
p {
background-color: #ffffff; /* 白色 */
}
/* スマホ画面 */
@media(max-width: 450px) {
p {
background-color: ……
}
}<div>の指定を遡って、#f2f1f1をコピペする方法もあります。
しかしながら、<div>の指定を見つけるのに苦労するはずです。
コード量が多くなればなるほどに。
それならbackground-color: initialと書く方がラクです。
親と同じ背景色になるので。
<div>
⌇
⌇
⌇
⌇
⌇
<p>ほぼほぼ</p>
</div>div {
background-color: #f2f1f1; /* うすいグレー */
}
⌇
⌇
⌇
⌇
⌇
⌇
⌇
⌇
p {
background-color: #ffffff; /* 白色 */
}
/* スマホ画面 */
@media(max-width: 450px) {
p {
background-color: initial;
}
}コードを書く労力を減らすためにinitialを使う
僕はinitialを「コードを書く労力を減らす」ために使っています。
100ある労力の1を減らすイメージ。
その1を10個積み上げる。
すると90の労力で同じ仕事ができるようになる、というわけ。
ちなみにはじめは僕も、「initialなんて使っていいことあるの？」と思ってました。
だけど、あるんです。
ほんのたまに使えるんです。
initialの方が労力なく書ける時は、こっちを選ぶ感じで。
例えばtransparentより単語が短いですし。
もっとも、initialがスッと思い浮かぶようになるまで、意識的に使ってましたが…
ですからinitialも使えれば、労力が減らせるよという話でした。
参考サイト
この記事は、CSS3をもとに書きました。
CSS3とはcssのルールブックみたいなもので、その最新バージョンです。
まとめ
今回の話は、むずかしかったですよね。
初期値の話をするつもりが、半分は労力を減らす話になってしまいました。
まあ、こんな考え方もあるんだくらいに受け取ってもらえればと思います。
初期値の話を聞いていて、リセットcssが頭に浮かんだ。
そんな人は、こちらの記事をどうぞ。
初期値とリセットcssの違いが分かるはずです。
