DOSEIの日記

技術メモ+日常ログ

スタイルを書くとき、気をつける、定石みたいなことがある。

たとえば、色。colorプロパティとbackground-colorプロパティ(他にもあるけど)を、片方決めたら、もう片方も指定すべきだ。なぜなら、無指定では継承された色が使われて、その色が何色かわからないからだ。極端な話、ブラウザの背景色を黒で使ってる人が、colorが黒に近い色だと読めなくなる可能性があるからだ。

CSSの基本的な思想として、指定しないところは、何になっても別にかまいませんよ♪って気持ちで使えってことだ。

で、俺が気になるのはこれだ。通常borderをつかって下線をつけるスタイルがよく使われる。

border-bottom: 2px solid;

しかし、たとえばユーザスタイルで

border: 2px dashed;

となっていた場合、実際のレンダリングは、下部だけ線種が異なるボーダになる。これは意図したものではないだろう。この場合ほしいスタイルは、下線だけ引かれたボーダのはずだ。ならば、下部以外はnoneを明示的に指定しないといけないのではないか。要するに、「下部以外のボーダはなんでもかまわないよ♪」じゃないでしょってこと。
例:

border: none; /* 一度すべて消す */
border-bottom: 2px solid;

または、

border-style: none none solid none; /* 下部のみ */
border-bottom-width: 2px; /* 下部のみ指定。他は暗黙的に 0 */