前提
プログラミング初心者です。Bracketsを使用して、本で学んだ通りにコードを書いてみましたが、連携していないようです...
過去の質問も参考に、問題解決に努めましたが、解決する事ができませんでした。どんな些細な事でも構いませんので、ご意見お聞かせ頂けますと幸いです。
実現したいこと
HTMLとCSSを連携させたい。
発生している問題・エラーメッセージ
CSSの色や、フォントを変更しても変化がないため、連動していないものと思います。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<tiltle>サンプルページ</tiltle> 6<link href="css/style.css" rel="stylesheet"> 7</head> 8<body> 9 10 <!-- header始まり--> 11 <header> 12 <div class="logo"> 13 <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a> 14 </div> 15 <nav> 16 <ul class="global-nav"> 17 <li><a href="portfolio.html">Portfolio</a></li> 18 <li><a href="about.html">About</a></li> 19 <li><a href="contact.html">Contact</a></li> 20 </ul> 21 </nav> 22 </header> 23 <!-- header終わり--> 24 25 <!-- wrap始まり--> 26 <div id="wrap"> 27 <div class="content"></div> 28 </div> 29 <!-- wrap終わり--> 30 31 <!-- footer始まり--> 32 <footer> 33 <small>(c)2017 Hattori-studio.</small> 34 </footer> 35 <!-- footer終わり--> 36 37</body> 38 39 40</html>
該当のソースコード
CSS
1@charset "utf-8;" 2 3 body{ 4 margin:0; 5 padding:0; 6 background-color: #cccccc; 7 color:#333333; 8 font-size:15px; 9 line-height:2; 10} 11 12p,h1,h2,h3,h4,h5,h6 { 13 margin-top:0; 14} 15 16img{ 17 vertical-align:bottom; 18} 19 20ul{ 21 margin:0; 22 padding:0; 23} 24 25a{ 26 color:#3583aa; 27} 28 29a:visited{ 30 color:#788d98; 31} 32
試したこと
フォルダの階層に間違いがあるのかを確認しました。
ご指摘頂いた通り、cssのフォルダが、大文字でCSSとなっていたため、小文字に直し、再度試してみました。
補足情報(FW/ツールのバージョンなど)
本の見本と見比べてみましたが、違いが分かりませんでした。
以下が開発者ツールのスクリーンショットです。
見本のソースコード(私のコードはまだ途中ですので見本は、少し先の内容も含んだものです)
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>サンプルページ</title> 6<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> 7<link href="css/style.css" rel="stylesheet"> 8</head> 9<body> 10 11 <!-- header始まり --> 12 <header> 13 <div class="logo"> 14 <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a> 15 </div> 16 <nav> 17 <ul class="global-nav"> 18 <li><a href="portfolio.html">Portfolio</a></li> 19 <li><a href="about.html">About</a></li> 20 <li><a href="contact.html">Contact</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- header終わり --> 25 26 <!-- wrap始まり --> 27 <div id="wrap"> 28 <div class="content"> 29 </div> 30 </div> 31 <!-- wrap終わり --> 32 33 <!-- footer始まり --> 34 <footer> 35 <small>(C)2017 Hattori-studio.</small> 36 </footer> 37 <!-- footer終わり --> 38 39</body> 40</html>
見本のソースコード(見本は、少し先の内容も含んだものです)
CSS
1@charset "utf-8"; 2 3body { 4 margin: 0; 5 padding: 0; 6 background-color: #cccccc; 7 color: #333333; 8 font-size: 15px; 9 line-height: 2; 10} 11 12p,h1,h2,h3,h4,h5,h6 { 13 margin-top: 0; 14} 15 16img { 17 vertical-align:bottom; 18} 19 20ul { 21 margin: 0; 22 padding: 0; 23} 24 25a { 26 color: #3583aa; 27 text-decoration: none; 28} 29 30a:visited { 31 color: #788d98; 32} 33 34a:hover { 35 text-decoration: underline; 36} 37 38header { 39 width: 960px; 40 height: 100px; 41 margin: 0 auto; 42} 43 44.logo { 45 float: left; 46 margin-top: 50px; 47} 48 49.global-nav { 50 float: right; 51 margin-top: 60px; 52} 53 54.global-nav li { 55 float: left; 56 margin: 0 20px; 57 font-size: 20px; 58 list-style: none; 59 font-family: 'Bitter', serif; 60} 61 62.global-nav li a { 63 color: #ffffff; 64} 65 66.global-nav li a:hover { 67 border-bottom: 2px solid #ffffff; 68 padding-bottom: 3px; 69 text-decoration: none; 70} 71 72#wrap { 73 clear: both; 74} 75 76.content { 77 width: 960px; 78 margin: 0 auto; 79} 80 81footer { 82 text-align: center; 83 color: #ffffff; 84 padding: 20px 0; 85} 86 87footer small { 88 font-size: 12px; 89}
回答1件
あなたの回答
tips
プレビュー