CSS borderが効かない・表示されない原因と対応方法
あれ？borderを指定したのに線が何も表示されてないぞ？border効いてないのか？
と思ってきた方へ、borderが効かない・表示されない原因と対応方法について説明します。
結論
border-style（線のデザイン）は「none」が初期値だから「solid」などを必ず指定しないといけません。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
borderの基本
borderは以下の要素で構成されています。
- border-width…線の太さ
- border-style…線のスタイル（種類）
- border-color…線の色
そしてこの3つは1行で指定できます。
border:1px solid #333
borderの基本をもっと詳しく知りたい方はこちら↓
borderが効かない･表示されない原因
以下のように指定しているとborderが効きません。
border:1px
border:1px #333
上記の場合border-styleの設定を省略しています。
設定を省略するとその初期値が適用されるのですが、border-styleの初期値は「none（なし）」です。「solid（直線）」ではありません。
つまり上記の場合、このように指定されているのです。
border:1px none #333
これじゃ表示されないわけです。
borderが効かないときの対応方法
対応方法はいたってシンプルで「solid」などnone以外のborder-styleを指定しましょう。
border:1px solid #333
その他のborderが効かない･表示されない原因
- border-widthに「0」が指定されている
- border-colorに#FFF（背景と同じ色）やtransparent（透明）が指定されている
tableのborderが効かないときはこちら↓
これを直しても効いていない場合はCSSの記述ミスや優先度で負けている、CSSセレクタの指定を間違えているなどが考えられます。
下記記事を参考に見直してみてください。
まとめ
borderが効かない･表示されない原因はborder-style（線のデザイン）を指定していないからです。border-styleの初期値は「none」ですから表示されません。
「solid」などのborder-styleを指定しましょう。
以上、CSS borderが効かない・表示されない原因と対応方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
