asked 5年 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=”\_blank”>ここでしか飲めない！おいしいうれしい満喫カフェ</a>』に掲載されました。</p>
<p>4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</p>
<!–メインここまで–>
<!–フッター–>
<div>
<p>©Copyright KUJIRA cafe. ALL rights reserved.</p>
</div>
<!–フッターここまで–>
</div>
</body>
</html>
狩野 祐東 Staff answered 5年 ago
> /* すべてのページに適用 – navまわり – */
> #nav i {
ソースを見る限りでは、横並びにする部分のCSSセレクタが「#nav i」になっています。
答えそのものは書きませんので、どうすれば直るか、考えて解決してみてください。
answered 5年 ago
アドバイスありがとうございます。
> /* すべてのページに適用 – navまわり – */
> #nav i {
ではなく
> /* すべてのページに適用 – navまわり – */
> #nav li {
でしたね。
申し訳ございませんでした。
ただ、直したのですが、相変わらず横並びになりませんでした。
狩野 祐東 Staff answered 5年 ago
ナビゲーションの<ul>タグに、id属性を追加していないのが原因のようです。
書籍p.80の②の作業で<ul>タグにid属性を追加しています。
それ以外にも、タグのclass属性やid属性を追加し忘れているかもしれませんので、一度p.79あたりの作業ができているか、確認してみてください。
それ以外のHTML、CSSは問題ないみたいです（一点、CSSのh2に適用されるスタイルで、font-sizeの行の最後のセミコロンが抜けているみたいです。これは動作上は問題ありませんし、ナビゲーションのところにスタイルが効かないこととも関係ありませんが、直しておくことをおすすめします）。