質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1319閲覧

CSSが適用されないのを解決したい。。。

digitalhimiko

総合スコア142

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/10 16:51

#[質問事項]新しく追加した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&copy; 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デザインの教科書

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

digitalhimiko

2020/02/10 17:51

上記サイトの存在知りませんでした! 色々とエラー誤記あり、改善につなげたいと思います! ありがとうございました!
guest

回答1

0

自己解決

[ぽかミスでした。すみません。。。(_ _)]

<nav class="localNavi">のところが=がなぜか2回記載となっていました。汗 そこを修正すると普通に直りました。お騒がせしました。。

投稿2020/02/10 17:20

digitalhimiko

総合スコア142

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問