前提・実現したいこと
「HTML/CSS デザインの教科書」という教本に沿ってWebサイトのコーディングを初心者レベルなので、時折やっていました。
下のHTMLファイルの<div id="pageBody"> ~</div>のコードに対してCSSを記述した後、ブラウザ(OPERA)で確認したら
全く反映されていませんでした。(そのCSSのコードより前は全て反映されています)
まだ教本の練習サイトのコーディング途中で最後まで完済させたいのですが、反映させる方法は
あるでしょうか。もう2週間近く苦しんでいる状態です。
ちなみに、ネットでこんな場合の原因と対処法は殆どやってみましたが全く反応しません。
発生している問題・エラーメッセージ
下記がHTMLのファイルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="common/css/normalize.css.css" type="text/css"> <link href="common/css/style.css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle" class="pageTitle">komorikomasha</h1> <P id="catchCopy">一人じゃできないことも、力を合わせればできる。やってみたいをカタチにする、3人の楽しいものづくり。</P> <nav class="globalNavi"> <ul> <li><a href="top-index.html">ホーム</a></li> <li><a href="about/index.html">わたしたちについて</a></li> <li><a href="portfolio/index.html">つくったもの</a></li> <li><a href="contact/index.html">おといあわせ</a></li> </ul> </nav> </header> <div id="pageBody"> <section class="mainVisual"> <div class="mainVisualText"> <h1>Cafe Debut</h1> <p>baserCMS.カフェサイト用テーマ<br> baserCMS2012 テーマコンテスト 飲食店系<br>テーマ賞受賞</p> </div> <img src="images/mainVisual_img_01.jpg" width="980" height="500" alt=""> </section> </div> <!--終了 pageBody --> <p class="pagetop"><a href="#page">ページ先頭へ戻る</a></p> <footer id="pageFoot"> <p id="copyright"><small>Copyright© 2013 @komorikomasha All Rights Reserved.</small></p> </footer> </div> </body> </html>
該当のソースコード
下記がCSSファイルです。(一番下のーー/*メインビジュアル*/ーー部分です) @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Caveat'); body { color: #333333; background-image: url("../images/bgi.png"); } /* リンク */ a { color: #999966; } a:hover { color: #222999; } /* パンくずリスト */ .topicPath { font-size: 12px; } /* ページの先頭へ戻る */ .pagetop { font-size: 12px; text-align:right; margin-top: 30px; } .pagetop a { background-image: url("../images/ico_pagetop.png"); background-repeat: no-repeat; background-position: 0 50%; padding-left: 10px; } /* ページ */ #page { width: 980px; margin: 0 auto; } /* ページヘッダー*/ #pageHead #siteTitle { font-size: 70px; line-height: 1.2; margin-bottom: 0; font-family: 'Caveat', cursive; } # pageHead #catchCopy { font-size: 12px; line-height: 1.5; margin-top: 5px; } /* グローバルナビ */ #pageHead .globalNavi { border: solid #CCCCCC; border-width: 1px 0; padding: 10px 0; } #pageHead .globalNavi ul { margin: 0; padding: 0; } #pageHead .globalNavi ul:after { content: ""; clear: both; display: block; } #pageHead .globalNavi ul li { list-style: none; width: 245px; float: left; border-left: solid 1px #CCCCCC; padding: 0 10px; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 1.429; } #pageHead .globalNavi ul li:first-child { border-left: none; } #pageHead .globalNavi ul li a { color: inherit; text-decoration: none; display: block; padding: 5px; } #pageHead .globalNavi ul li a:hover, #pageHead .globalNavi ul li.current a { background-color: #F2F2E5; } /* ページフッター */ #pageFoot { border-top: solid 1px #cccccc; margin-top: 15px; } #pageFoot #copycopyright small { font-size: 12px; line-height: 1.5; } /* ページボディ */ #pageBody { margin-top: 30px; } #pageBody:after { content: ""; clear: both; display: block; } #pageBodyMain { width: 720px; float: left; } #pageBodySub { width: 220px; float: right; } /* ーーーサブカラム内の装飾ーーー */ /* 見出し */ #pageBodySub h2 { font-size: 16px; line-height: 1.375; padding: 5px; margin-top: 0; bo-der-bottom: 1px solid #CCCCCC; } /* お知らせ */ #pageBodySub .newList ul { list-style: none; padding: 0; } #pageBodySub .newList ul li { font-size: 12px; line-height: 1.5; margin: 10px 5px; } #pageBodySub .newList ul li time { font-weight: bold; display: block; } /* ローカルナビ */ #pageBodySub .localNavi ul { margin: 0 0 30px; padding-left: 0; } #pageBodySub .localNavi ul li { font-size: 14px; line-height: 1.429; margin-bottom: 12px; list-style-type: none; background-image: url("../images/ico_arrow.png"); background-repeat: no-repeat; background-position: 0.8px; padding-left: 10px; } /* ーーーメインカラム内の装飾ーーー */ #pageBodyMain p { font-size: 14px; line-height: 1.429; } /* リスト */ #pageBodyMain ul li { font-size: 14px; list-style-type:square; line-height: 1.429; } /* 表 */ #pageBodyMain table { font-size: 14px; iline-height: 1.429; border: 1px solid #cccccc; border-collapse: collapse; width: 100%; } #pageBodyMain table th, #pageBodyMain table td { border: 1px solid #cccccc; padding:5px 10px; } #pageBodyMain table th { background-color: #EEEEEE; text-align: left; } #pageBodyMain table caption { text-align: left; font-weight: bold; } /* 図版 */ figure { margin: 0; } /* 画像キャプション */ #pageBodyMain figcaption { font-size: 12px; } /*見出し*/ #pageBodyMain .pageTitle { font-size: 26px; background-color: #F2F2E5; padding: 5px 15px; line-height: 1.231; margin-top: 0; } #pageBodyMain .heading-typeA { font-size: 18px; color: #349FA6; border-bottom: solid 1px #349FA6; padding: 5px; line-hight: 1.333; } #pageBodyMain .heading-typeB { font-size:16px; border-left: solid 5px #E3E4D9; padding-left:10px; line-height: 1.375; } #pageBodyMain .heading-typeC { font-size: 14px; line-hight: 1.429; } /* 区切り線・余白 */ #pageBodyMain .articleDetailHead { border-bottom: solid 1px #cccccc; margin-bottom: 30px; pdding-bottom:15px; } #pageBodyMain .articleDetailFoot { border-top: solid 1px #cccccc; margin-top: 30px; padding-top:15px; } #pageBodyMain .articleDetailBody section { margin: 30px 0; } ?/* 撮影情報 */ #pageBodyMain .creditUnit { padding: 10px; border: solid 1px #cccccc; } #pageBodyMain .creditUnit p { font-size: 12px; line-hight: 1.5; } /* センター寄せ画像 */ #pageBodyMain .imageCenter { text-align: center; border-bottom: 1px dotted #CCCCCC; padding-bottom: 30px; margin: 30px o; } /* 「おといあわせフォーム」ボタン */ #pageBodyMain .btn { text-align: center; padding-bottom: 20px; margin: 30px 0; border-bottom: 1px dotted #CCCCCC; } #pageBodyMain .btn a { font-size: 18px; font-weight: bold; text-decoration: none; color: #FFFFFF; background-color: #058BA9; padding: 10px 20px; border-radius: 5px; background-image: -webkit-linear-gradient(top, #92CDDB, #058BA9); background-image: linear-gradient(to bottom, #92CDDB, #058BA9); border: 1px solid #058BA9; box-shadow: 1px 1px 0 #9DDDED inset; text-shadow: 0px -1px 0 #333333; display: inline-block; } #pageBodyMain .btn a:hover { opacity: 0.7; /* 「つくったもの」一覧ページ */ #pageBodyMain .articleList { border: solid 1px #CCCCCC; margin-bottom: 30px; } #pageBodyMain .articleList a { display: block; padding: 10px;ター color: inherit; text-decoration: none; } #pageBodyMain .articleList a:after { content: ""; clear: both; display: block; } #pageBodyMain .articleList a .articleListText { width: 370px; float: right; } #pageBodyMain .articleList a .articleListText h1 { font-size: 26px; line-height: 1.308; } #pageBodyMain .articleList a .articleListText p { font-size: 14px; line-height: 1.429; } #pageBodyMain .articleList a .articleListImage { width: 300px float: left; } #pageBodyMain .artcleList a .articleListImage img { vertical-align: bottom; } /*-----メインビジュアル-----*/ #pageBody .mainvisual .mainVisualText { color: #FFF; background-color: rgba(0,0,0,0.4); }
試したこと
検索をして皆さんがされている事から、ブラウザの検証(記述したCSSが見受けられませんでした)、打ち間違いやパスの確認も行い、!importantも足しましたが無反応。試してみたのは以上です。このCSSのところに全然関係ない支持を書いても反応しないです。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/29 12:18