Q&A
こんばんは。
コードを提示する際はMarkdownを使用してください。
質問は編集をする事が可能です。
cssファイルが読み込まれていない可能性が高いです。
もう一度、パスが適当であるかご確認ください。
試してみたが、ダメだった場合はどの様なファイルの配置になっているかを明示してください。
動くサンプル：
https://codepen.io/kai0310/pen/jOEdOyV
CSSがなぜが反映されないので回答いただきたいです。
検証でソースコードを見ようとしたところ、Failed to load resource: net::ERR_FILE_NOT_FOUNDと出てきてしまいました。
キャッシュの消去、ファイルを削除して作り直し、chromeの再起動、pcの再起動などやったのですが効果がありません。ファイル名も間違っていませんでした、、、。
＜HTMLのコード＞
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サンプルテンプレート</title> <meta name="description" content="サンプルテンプレート"> <meta name="keywords" content="レストラン,フレンチ,原宿"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link href="css/common.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]> <script src="js/html5shiv-printshiv.js"></script> <![endif]--> </head> <body></body> </html><header class="mainHeader"> <h1>サンプルサイト</h1> </header> <section class="mainCont"> <div> <h2>サブタイトルが入ります。</h2> <figure> <img src="img/common/luca-bravo-217276-unsplash.jpg" alt="" /> </figure> <p>テキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section class="subCont"> <div class="innerCont"> <h2>お申し込みの流れ</h2> <p>テキストテキストテキストテキストテキストテキストテキスト</p> <ol> <li>リストが入ります。リストが入ります。リストが入ります。</li> <li>リストが入ります。リストが入ります。リストが入ります。</li> <li>リストが入ります。リストが入ります。リストが入ります。</li> <li>リストが入ります。リストが入ります。リストが入ります。</li> <li>リストが入ります。リストが入ります。リストが入ります。</li> </ol> </div> </section> <footer class="mainFooter"> <p>Copyrights © workroom all rights reserved.</p> </footer>
＜CSSのコード＞
body{
margin:0px;
}
.mainHeader{
background:#eaeaea;
text-align:center;
margin:0px;
}
h1{
margin:0px;
padding-top:20px;
padding-bottom:20px;
}
.mainCont{
background:#000;
color:#fff;
text-align:center;
padding-bottom:40px;
}
h2{
margin:0px;
padding-top:40px;
padding-bottom:20px;
}
p{
margin:0px;
}
.mainFooter{
text-align:center;
padding-top:40px;
padding-bottom:40px;
background:#eeeeee;
}
.subCont .innerCont{
width:900px;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
padding:30px;
box-sizing: border-box;
margin-top:40px;
margin-bottom:40px;
}
.subCont .innerCont h2{
padding-top:0px;
}
わかる方いればよろしくお願いします。
念のためファイル構成が分かる写真をご提示ください。
[css]フォルダ内にcommon.cssが無いのではないでしょうか。
HTMLと同じフォルダにあるとか、[css]のさらに下階層があるとか…。
回答2件
0
ベストアンサー
私の環境でもソースをコピーしてやってみましたが、正常に表示されました。
考えられるのはパスの違いでしょうか・・・
添付してもらっている画像の右側にエラーが表示されていると思いますが、そのエラーの右側に
css/common.css:1 luca-bravo-217276-unsplash.jpg:1
のように表示されているところがあると思います。
そこにマウスカーソルを合わせると見に行っているパスが表示されますが、
パスやファイル名に間違いがないか一度見てみてはいかがでしょうか。
投稿2020/01/23 01:00
総合スコア378
0
エラーメッセージにファイルが存在しませんと記載されているので
ファイルが存在するか、ご確認下さい。
投稿2020/01/23 01:06
総合スコア1015
あなたの回答
tips
プレビュー
