🌟

再入門CSS（border編-01）

2025/05/02に公開

CSS

tech

注意

私はCSSをハッキリと理解しないまま、ReactやChakraに手を出して、初歩的なことが分からず、ドン詰まりをしてしまった。この記事たちは、悪戦苦闘の記録である。決して綺麗な整理では無いことに注意してください。

問題「border-leftは指定してないのに線がある！」

<body>
    <div class="box" id="box01"></div>
</body>

        .box {
            width: 200px;
            height: 200px;
            background-color: black;
        }

        #box01 {
            border-top-width: 20px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-style: solid;
            border-color: red;
        }

上記のように書くと、
実際の表示
のように表示されてしまった。
top, right, bottomのborderは想定通りに表示されているものの、
leftに1本の赤い線が入ってしまう。
（ちなみに下にも赤い線があるように見えるのは錯覚）

原因

MDN Web Docs（Mozilla公式ドキュメント）

border-style: solid を設定すると 4 辺すべて solid になる
border-left-width を省略すると既定値 medium
- Chromium/Firefox: 3 px
- Safari: 4 px
したがって 左辺だけ 3 px solid red が描画される

対処法

1. すべてゼロを明示

#box01 {
  border: 0;                 /* 一度全て0に設定 */
  border-top: 20px solid red;
}

2. ショートハンドを使う

#box01 {
  border-top: 20px solid red;  /* 他辺には影響しない */
}

ショートハンドは未指定辺を initial (=0) 扱いにする

結語

ショートハンドを使わない方が安全かと思ったら
そうでもなかった。難しい！（続く）

私のGit Pages

私のgit pagesで実際の表示を見ることが出来ます。