#[質問事項]新しく追加したCSSが適用されず困っています。なぜ適用されないのか/どうすれば適用されるのかご教示お願いします。。。
まず該当しそうなHTML/CSSのコードを下記します。
HTML
1 <div id="pageBodySub"> 2 <nav class=="localNavi"> 3 <ul> 4 <li><a href="03.html">バッタになりたい魔法使い</a></li> 5 <li><a href="02.html">WordPressデザインワークブック</a></li> 6 <li><a href="01.html ">Cafe Debut</a></li> 7 </ul> 8 </nav> 9 <section class="newsList"> 10 <h2>おしらせ</h2> 11 <ul> 12 <li><time datetaime="2013-10-01">2013.10.01</time> 13 コモモとモリコで、書籍「HTML/CSSの教科書(仮題)」を執筆中です。お楽しみに</li> 14 <li><time datetime="2013-10-01">2013.10.01</time> 15 コモモ・モリコ・ひろしゃま3人のサイト「komorikomash」をオープンしました</li> 16 </ul> 17 </section> 18 </div>
CSS
1/* ローカルナビ */ 2 3#pageBodySub .localNavi ul li { 4 font-size: 14px; 5 line-height: 1.429; 6 margin-bottom: 12px; 7}
上記が適用されず困っています。念のため、HTML/CSSの全体も下記します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>KumaMotoの練習</title> <link rel="stylesheet" href="../common/css/normalize.css"> <link rel="stylesheet" href="../common/css/style.css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle">komorikomasha</h1> <p id="catchcopy">一人じゃできないことも、力を合わせればできる。やってみたいをカタチに</p> <nav class="globalNavi"> <ul> <li><a href="../index.html">ホーム</a></li> <li><a href="../about/index.html">わたしたちについて</a></li> <li><a href="index.html">つくったもの</li> <li><a href="../contact/index.html">おといわせ</a></li> </ul> </nav> </header> <div id="pageBody"> <div id="pageBodyMain"> <article> <header class="articleDetailHead"> <h1 class="pageTitle">Cafe Debut</h1> <img src="images/img_01_01.jpg" alt="" width="720px" height="390px"> <p>baser CMS カフェサイト用テーマ</p> <p>baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(<a href="http://contest.basercms.net/" target="new">受賞結果はこちら</a>) </p> </header> <section class="articleDetailBody"> <h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ!</h2> <p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p> <p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p> <p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p> <table class="table-A"> <caption>制作担当</caption> <tr> <th>コモモ</th> <td id="red_line">企画・デザイン・baserCMSテーマのベース組み込み担当</td> </tr> <tr> <th class="moriko">モリコ</th> <td>HTML/CSSコーディング担当</td> </tr> <tr> <th class="hirosyama">ひろしゃま</th> <td>プラグイン制作、テーマ実装の難しいところが担当</td> </tr> </table> <section> <h3 class="heading-typeB">プラグインでInstagramと連携</h3> <p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p> <figure> <img src="images/img_01_02.jpg" alt="" width="720px" width="390px"> <figcaption>今日のランチのローストビーフサンドを撮影♪</figcaption> </figure> </section> <section> <h3 class="heading-typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適</h3> <p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p> <figure> <img src="images/img_01_03.jpg" alt="" width="720px" width="390px"> <figcaption>左からiPhone、iPad、MacBook、Airで表示確認</figcaption> </figure> </section> <section> <h3 class="heading-typeB">Webフォントだから、飾り文字やアイコンもキレイ</h3> <p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント(Fontello)を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p> <figure> <img src="images/img_01_04.jpg" alt="" width="720px" width="390px"> <figcaption>iPhoneの画面に近づいても・・・( ゚д゚)ハッ!綺麗!</figcaption> </figure> </section> </section> <footer class="articleDetailFoot"> <section> <h2 class="heading-typeC">関連リンク</h2> <ul> <li><a href="http://basercms.net/themes/archives/14">Cafe Debutのダウンロードページ</a></li> <li><a href="http://cafedebut.cat-speak.net/">Cafe Debutのデモページ</a></li> <li><a href="http://basercms.net/">baser CMS公式サイト</a></li> <li><a href="http://instagram.com/">Instagram公式サイト</a></li> </ul> </section> <aside class="creditUnit"> <p>撮影協力</p> <h2 class="heading-typeC">kitchen nest</h2> <p>北海道札幌市中央区南3条西8丁目</p> <ul> <li>http:www.nest-kitchen.jp</li> <li>Facebookページ</li> </ul> <p>Cafe Debutテーマのイメージ撮影にご協力いただきました。とても素敵なお店です。</p> </aside> </footer> </article> </div> <div id="pageBodySub"> <nav class=="localNavi"> <ul> <li><a href="03.html">バッタになりたい魔法使い</a></li> <li><a href="02.html">WordPressデザインワークブック</a></li> <li><a href="01.html ">Cafe Debut</a></li> </ul> </nav> <section class="newsList"> <h2>おしらせ</h2> <ul> <li><time datetaime="2013-10-01">2013.10.01</time> コモモとモリコで、書籍「HTML/CSSの教科書(仮題)」を執筆中です。お楽しみに</li> <li><time datetime="2013-10-01">2013.10.01</time> コモモ・モリコ・ひろしゃま3人のサイト「komorikomash」をオープンしました</li> </ul> </section> </div> </div> <footer id="pageFoot"> <p id="copyright"><small>Copyright© 2013 @komorikomasha All Rights Reserved</small></p> </footer> </div> </body> </html>
CSS
1/*コメント*/ 2@import url('https://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700&display=swap'); 3body{ 4 color: #585555; 5} 6#page { 7 width: 980px; 8 margin: 0 auto; 9} 10 11/*ページヘッダー*/ 12#pageHead #siteTitle{ 13 font-size: 30px; 14 line-height: 1.2; 15 margin-bottom: 0; 16 font-family:'Playfair Display SC', serif; 17} 18 19#pageHead #catchcopy{ 20 font-size: 12px; 21 line-height: 1.5; 22 margin-top: 5px; 23} 24/*ページフッター*/ 25#pageFoot { 26 border-top: solid 1px #CCCCCC; 27 margin-top: 15px; 28} 29 30#copyright small{ 31 font-size: 12px; 32 line-height: 1.5; 33 margin-top: 5px; 34} 35 36/*ページボディ*/ 37#pageBody{ 38 39} 40#pageBody:after{ 41 content: ""; 42 clear: both; 43 display: block; 44} 45#pageBodyMain { 46 width: 720px; 47 float: left; 48} 49#pageBodySub { 50 width: 220px; 51 float: right; 52} 53 54 55 56/* リンク */ 57a { 58 color: #999966; 59} 60 61a:hover { 62 color: #996600; 63} 64 65/* ----- メインカラム内の装飾 ----- */ 66 67/* 見出し */ 68#pageBodyMain .pageTitle { 69 font-size: 26px; 70 background-color: #F2F2E5; 71 padding: 5px 15px; 72 line-height: 1.231; 73 margin-top: 0px; 74} 75.heading-typeA{ 76 font-size: 18px; 77 color: #349fa6; 78 border-bottom: solid 1px #349fa6; 79 padding: 5px; 80} 81.heading-typeB{ 82 font-size: 16px; 83 border-left: solid 5px #e3e4d9; 84 padding-left: 10px; 85} 86.heading-typeC{ 87 font-size: 14px; 88} 89 90/* 表 */ 91#pageBodyMain .table-A{ 92 font-size: 14px; 93 border: 0; 94 border-collapse: collapse; 95 width: 100%; 96 margin: 0px; 97} 98#pageBodyMain .table-A th, 99#pageBodyMain .table-A td{ 100 border: solid 1px ; 101 padding: 5px 10px; 102} 103#pageBodyMain .table-A th{ 104 background-color: #EEEEEE; 105 text-align: left; 106} 107#pageBodyMain .table-A caption{ 108 text-align: left; 109 font-weight: bold; 110} 111#pageBodyMain .table-A th.moriko{ 112 border-bottom: solid 1px red; 113} 114 115/* 区切り線・余白 */ 116.articleDetailHead{ 117 border-bottom: solid 1px #cccccc; 118 padding-bottom: 15px; 119 margin-bottom: 30px; 120} 121.articleDetailFoot{ 122 border-top: solid 1px #cccccc; 123 padding-top: 15px; 124 margin-top: 30px; 125} 126.articleDetailBody section{ 127 margin: 30px 0; 128} 129 130/* リスト */ 131#pageBodyMain .articleDetailFoot ul { 132 list-style-type: square; 133 font-size: 14px; 134 line-height: 1.429; 135} 136 137/* 撮影情報 */ 138#pageBodyMain .creditUnit{ 139 padding: 10px; 140 border: solid 1px #cccccc; 141} 142 143#pageBodyMain .creditUnit p{ 144 font-size: 12px; 145} 146 147/* ----- サブカラム内の装飾 ----- */ 148 149/* 見出し */ 150#pageBodySub h2 { 151 font-size: 16px; 152 line-height: 1.375; 153 padding: 5px; 154 margin-top: 0; 155 border-bottom: 1px solid #CCCCCC; 156} 157 158/* ローカルナビ */ 159 160#pageBodySub .localNavi ul li { 161 font-size: 14px; 162 line-height: 1.429; 163 margin-bottom: 12px; 164} 165 166/* おしらせ */ 167#pageBodySub .newsList ul { 168 list-style: none; 169 padding: 0; 170} 171#pageBodySub .newsList ul li { 172 font-size: 12px; 173 line-height: 1.5; 174 margin: 10px 5px; 175} 176 177#pageBodySub .newsList ul li time { 178 font-weight: bold; 179 display: block; 180} 181p{ 182 font-size: 14px; 183 line-height: 1.429;∫ 184} 185 186h1{ 187 font-size: 26px; 188} 189h2{ 190 font-size: 18px; 191} 192h3{ 193 font-size: 16px; 194} 195figure{ 196 margin: 0px; 197} 198figcaption{ 199 font-size: 12px; 200}
下記の参考文献に載っているコードを丸々コピペすると適用されるようなのですが私が一から上のように書くと適用されません。。。
何か誤記があるのか、並び順に原因があるのかわからないのですが原因/解決策を教えていただけると有り難いです。
###参考文献
作りながら学ぶHTML/CSSデザインの教科書
回答1件
あなたの回答
tips
プレビュー