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

(P161)横並びにできない

書籍Q&ACategory: スラスラわかるHTML&CSSのきほん(P161)横並びにできない
asked 8か月 ago

横並びが反映されず困っています。
せっかくなので完成までさせてみたいです。
どこが悪いか、教えてい頂ければたすかります。
よろしくお願いいたします。

——————-CSS——————————————–

@charset “UTF-8″;

/* すべてのWebページに適用される */
body {
background-color: #f5f3eb;
}
h2 {
color: #4422200;
font-size: 18px
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #4422200;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 10px;
padding-right:10px;
padding-bottom: 10px;
padding-left: 10px;
}
p {
line-height: 160%;
}
a:link {
color: #6aa4d6;
}
a:visited {
color: #6aa4d6;
}
a:hover {
color: #4f7697;
}
a:active {
color: #aed3f2;
}
h1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center;
}

/* すべてのページに適用 – navまわり – */
#nav i {
display: inline;
list-style-type: none;
padding-right: 30px;
}

———HTML———————-
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafeへようこそ</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<body>
<div class=”wrapper”>
<!–ヘッダー–>
<h1><a href=”index.html”><img src=”images/logo.png” width=”217″ height=”89″ alt=”KUJIRA cafe”></a></h1>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<!–ヘッダーここまで–>
<!–メイン–>
<div>
<img src=”images/keyvisual.jpg” width=”900″ height=”362″ alt=””>
</div>
<h2 id=”news”>News</h2>
<p>5月30日、『<a href=”http://www.sbcr.jp”target=&#8221;\_blank”>ここでしか飲めない!おいしいうれしい満喫カフェ</a>』に掲載されました。</p>
<p>4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
<!–メインここまで–>
<!–フッター–>
<div>
<p>©Copyright KUJIRA cafe. ALL rights reserved.</p>
</div>
<!–フッターここまで–>
</div>
</body>
</html>

4 Answers
狩野 祐東 Staff answered 8か月 ago

> /* すべてのページに適用 – navまわり – */
> #nav i {

ソースを見る限りでは、横並びにする部分のCSSセレクタが「#nav i」になっています。
答えそのものは書きませんので、どうすれば直るか、考えて解決してみてください。

answered 7か月 ago

アドバイスありがとうございます。

> /* すべてのページに適用 – navまわり – */
> #nav i {
ではなく
> /* すべてのページに適用 – navまわり – */
> #nav li {

でしたね。

申し訳ございませんでした。

ただ、直したのですが、相変わらず横並びになりませんでした。

狩野 祐東 Staff answered 7か月 ago

ナビゲーションの<ul>タグに、id属性を追加していないのが原因のようです。
書籍p.80の②の作業で<ul>タグにid属性を追加しています。
それ以外にも、タグのclass属性やid属性を追加し忘れているかもしれませんので、一度p.79あたりの作業ができているか、確認してみてください。
それ以外のHTML、CSSは問題ないみたいです(一点、CSSのh2に適用されるスタイルで、font-sizeの行の最後のセミコロンが抜けているみたいです。これは動作上は問題ありませんし、ナビゲーションのところにスタイルが効かないこととも関係ありませんが、直しておくことをおすすめします)。

answered 7か月 ago

ご指摘していただきました、テキストの箇所を調べまして、無事直りました!
本当にありがとうございます!