質問: ### 前提・実現したいこと 現在CSSの勉強をしているのですが、borderプロパティで2つしか指定してない表記がありました。以下にコードを示しておりますが、そのような表現もあるのですか、好まれますか。 (追記) このコードで実現したいのはブロックの上下にのみ罫線を引くことです。 またここでの好まれるか、というのは保守性・可読性が高いかという趣旨でしたが、わたくしの勉強不足が招いた勝手な誤解でした。 ### 該当のソースコード ``` .navi { border: solid #CCCCCC; border-width: 1px 0; } ```
回答: > > そのような表現もあるのですか。 > > > そのような表現もあります。 質問文のコードのように指定した場合、`border-width`プロパティの値は、上下が`1px`, 左右が`0`となり、これが`border`プロパティにて適用されていた`border-width`プロパティの初期値(`medium`)を上書きします。 > > > ``` > /* 上下 | 左右 */ > border-width: 2px 1.5em; > ``` > > 参考: border-width - CSS: カスケーディングスタイルシート | MDN > > 好まれますか。 > > > もし上下、左右の`border-width`プロパティに別々の値を適用したいのであれば、好ましい値の指定だと思います。もし上下、左右の`border-width`プロパティが同じ値なのであれば、`border-width`プロパティに 1 つの値を指定するだけで構いません。