CSSでborderの指定を解除する記述方法

質問

CSSでborderの指定を解除する記述方法

たとえば、見出しなどで上下右だけ罫線がほしいとき、
h3 {border: 1px solid black; border-left: none;}
のように上下左右ボーダーを指定しておいて、左だけ指定を解除したいです。

このときの左のボーダーを「線をなしにする」という指定方法についてお聞きします。
border-left: none 0;
と、0を入れている記述を見つけたのですが、必要なのでしょうか？

自分でも調べてみましたが、「noneと記述するだけで強制的に太さはなしになるため、0は必要ない」という意見と、0を記述しているソースとあり、どちらがベターなのかわかりません。
古いブラウザとの互換で0が必要なのかな…、と調べてみましたが、はっきりわかりませんでした。

詳しい方、お教えくださると大変助かります。
どうぞよろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

＞「noneと記述するだけで強制的に太さはなしになるため、0は必要ない」という意見と、0を記述しているソースとあり、

？？仕様書確認しましたか？
ネットで聞いたって、その多くは伝聞や孫引きで、確実なものを探すのは「藁のなかの針を探す」ようなものです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
none ボーダーを無しにする。 この値を指定すると'border-width'の算出値は強制的に'0'になる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［8.5.3 ボーダーの種類（Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#border-style-properties )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
'border'は簡略化プロパティで、ボックス四辺のボーダーを同じ幅、色、種類に設定する。 'margin'や'padding'とは異なり、'border'プロパティは四辺のボーダーに別々の値を設定できない。 そうしたい場合は、ボーダーに関する他のプロパティを用いる必要が。

・・・【中略】・・・

ボーダーのプロパティは機能が重複しているので、規則を指定する順序が重要になる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［8.5.4 ボーダーの簡略化プロパティ（Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#border-shorthand-properties )］より

よって
h3 {
　border: 1px solid black;
　border-left: none;
}
でも
h3{
　border-color: black;
　border-style:solid;
　border-width: 1px 0px 1px 1px;
}
でも、
h3 {
　border: 1px solid black;
　border-left-width: 0px;
}
でも
h3 {
　border: 1px solid black;
　border-left-style: none;
}
でも良い。

大きなCSSになるとデザインと色を分けることもしばしばなので
design.css
h2,h3,h4{
　border-style:solid;
　border-width: 1px 0px 1px 1px;
}

color.css
h2{
　border-color:red;
}
h3{
　border-color: blue;
}
と分けて、可能な限り重複したプロパティの記述を減らすことが多いですね。

【参考サイト】
REC-CSS2 邦訳
　 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

お礼

ご回答ありがとうございます。
お恥ずかしい、仕様書を当たるべきだったんですね。
基本的なことだったとは思いますが、わたしにはとても勉強になりました。

事例も大変丁寧に書いてくださり、本当に勉強になりました。
ありがとうございました。