borderが効かない・表示されない原因と対応方法2020年10月18日あれ?borderを指定したのに線が何も表示されてないぞ?border効いてないのか?と思ってきた方へ、borderが効かない・表示されない原因と対応方法について説明します。結論borderの基本borderが効かない・表示されない原因borderが効かないときの対応方法その他のborderが効かない・表示されない原因まとめ結論border-style(線のデザイン)は「none」が初期値だから「solid」などを必ず指定しないといけません。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むborderの基本borderは以下の要素で構成されています。border-width...線の太さborder-style...線のスタイル(種類)border-color...線の色そしてこの3つは1行で指定できます。borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。以下のように指定しているとborderが効きません。#333上記の場合border-styleの設定を省略しています。設定を省略するとその初期値が適用されるのですが、border-styleの初期値は「none(なし)」です。「solid(直線)」ではありません。上記の場合、このように指定されているのです。#333これじゃ表示されないわけです。対応方法はいたってシンプルで「solid」などnone以外のborder-styleを指定しましょう。【html/CSS】tableやtrのborder(枠線)が表示されない原因6選tableの一部の線が表示されてない!?tableのborderが一部・全部表示されない原因を6つ紹介します。この記事を読むこれを直しても効いていない場合はCSSの記述ミスや優先度で負けている、CSSセレクタの指定を間違えているなどが考えられます。下記記事を参考に見直してみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読むまとめborderが効かない・表示されない原因はborder-style(線のデザイン)を指定していないからです。border-styleの初期値は「none」ですから表示されません。「solid」などのborder-styleを指定しましょう。borderが効かない・表示されない原因と対応方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。