Q&A
回答頂き、ありがとうございます。
デベロッパーツールの存在を初めて知ったので、以降使ってみようと思います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <link rel ="stylesheet" href="../common/css/style.css"> </head>
<header class="articleDetailHead"> <h1 class="pageTitle">Cafe Debut</h1> <p>baserCMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p> </header> <!--終了/articleDetailHead-->
.articleDetailHead { border-bottom: solid 1px #CCCCCC; margin-bottom: 30px; padding-bottom: 15px; }
参考書のコードなので、一部だけ抜粋しました。
CSS自体は有効になっているのですが、上記のコードの部分だけCSSが適用されません。
※線が引かれない。
header の部分をdiv に変更するとCSSが有効になります。
しかし、header や section だと有効になりません。
ここには載せていませんが、footerも同じでdivに変更した場合だけ有効になります。
模範解答のコードを部分的に入れ替えても治らず、原因が分からない状態です。
何かわかる部分があれば教えて下さい。
回答2件
0
ベストアンサー
CSSが適用されないのはborderだけではなく、
同時に設定しているmarginやpaddingも効いていないのではないですか？
で、それらすべてがdivに変更すれば正しく適用される、、という感じなのでは？
もしそうだとしたら、
・IE8以下を使っている
・IE9以上であっても「後方互換モード」で閲覧している
・IE9以上で閲覧しており、かつCSS側でHTML5の新要素にdisplay:blockを適用してない
のどれかではないかという気がします。
・IE以外のブラウザで閲覧している
・無効なのはborderだけでmarginやpaddingは有効である
といった感じでしたら、kei344さんが指摘しているように別のスタイルが影響していたりHTMLやCSSに構文エラーがあるために意図したとおりならないという可能性が高いのかな、という気がします。
投稿2018/07/25 13:44
総合スコア3763
0
別のスタイルが影響しているのでは。もしくはHTML構造が間違っている場合もCSSが意図した通りにならないことがあります。
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
投稿2018/07/25 13:35
総合スコア69625
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/25 13:56
2018/07/25 13:59