BOOK Studio947
狩野祐東・狩野さやか著書

P172 ナビゲーションのリスト項目を横並びにする 

書籍Q&ACategory: スラスラわかるHTML&CSSのきほん第2版P172 ナビゲーションのリスト項目を横並びにする 
笠原慎二 asked 2年 ago

cssでnavタグを入力しても反映されません。前のページのlogoまでは問題なく、次のページの背景画像も反映されなく、navのどこかに問題があると思うのですが、どうしても解決できないので解決してほしいです。よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<title>KUJIRA Cafeへようこそ</title>
<linkrel=”stylesheet”href=”cafe/css/style.css”>
 
</head>
<body>
<divclass=”wrapper”>
<!–ヘッダー–>
<headerclass=”header”>
<h1class=”logo”><ahref><imgsrc=”cafe/images/logo.png”alt=”KUJIRA Cafe”></a></h1>
<navclasss=”nav”>
<ul>
<li><ahref=”index.html”>ホーム</a></li>
<li><ahref=”abont.html”>店舗案内</a></li>
<li><ahref=”access.html”>アクセス</a></li>
<li><ahref=”menu.html”>メニュー</a></li>
<li><ahref=”contact”>お問い合わせ</a></li>
</ul>
</nav>
</header>
<!–ヘッダーここまで–>
<!–メイン–>
<divclass=”keyvisual”>
<imgsrc=”cafe/images/keyvisual.jpg”alt=””>
</div>
<main>
<h2id=”news”>News</h2>
<pclass=”news-item”>
4月29日(土)は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。
</p>
<pclass=”news-item”>
3月20日(月・祝)は、18時からアコースティックギターデュオ
<ahref=”http://www.sbcr.jp”target=”blank”>「PICNIC」</a&gt;
のライブを開催します。投げ銭方式です。お楽しみに!
</p>
</main>
<!–メインここまで–>
<!–フッター–>
<footerclass=”footer”>
<p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
 
</footer>
<!–フッターここまで–>
</div>
 
</body>
</html>

 
 
 
 
 

@charset “UTF-8”;
html{
font-family: sans-serif;
}
html * {
box-sizing: border-box;
}
body{
background-color: #eeece9;
}
h2{
color: #3f5170;
font-size: 22px;
border-bottom: 3pxdotted#3f5170;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

line-height: 1.6;
}
a:link{
color:#d25833;
}
a:visited{
color: #d25833;
}
a:hover{
color: #e3937a;
}
a:active{
color: #ff6a3b;
}
/*全てのページに適用ーヘッダー-*/
.logo {
margin: 50px040px0;
line-height: 0;
text-align: center;
}
.nav li {
display: inline;
list-style-type: none;
padding-right: 30px;
}

1 Answers
狩野 祐東 Staff answered 2年 ago

navタグのソースコードの部分、HTMLが<navclasss=”nav”>になっているようです。navとclassのあいだに半角スペースが必要です。