前提・実現したいこと
はじめまして。
先週から「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」で勉強を始めました。
OSはwin10、表示ブラウザはgoogle chrome、エディタはVSCodeです。
テキストを見ながらカフェサイトを作っているのですが、結果がお手本の通りになりません。
どなたかお力添え頂けますと幸いです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
日付と記事のタイトルが背景の画像に被ってしまいます。
お手本では白い所に日付や文章がきています。
該当のソースコード
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <title>WCB Cafe - NEWS</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <link rel="icon" type="image/png" href="images/favicon.png"> <!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,700;1,400&display=swap" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="news" class="big-bg"> <header class="page-header wrapper"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="wrapper"> <h2 class="page-title">News</h2> </div><!-- /.wrapper--> <div class="news-contents wrapper"> <article> <header class="post-info"> <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> <p class="post-date">3/30 <span>2019</span></p> <p class="post-cat">カテゴリー:お店の紹介</p> </header> </article> <aside> サイドバー部分 </aside> </div><!-- /.news-contents --> <footer> <div class="wrapper"> <p><small>© 2019 Manabox</small></p> </div> </footer> </body> </html>
CSS
/*共通部分 ---------------------------*/ html { font-size: 100%; } body{ font-family: "Yu Gothic Medium","游ゴシック Medium","游ゴシック体","ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; color: #432; } a{ text-decoration: none; } img{ max-width: 100%; } /* HEADER ---------------------------*/ .logo{ width: 210px; margin-top: 14px; } .main-nav { display: flex; font-size: 1.25rem; text-transform: uppercase; margin-top: 34px; list-style: none; } .main-nav li { margin-left: 36px; } .main-nav a { color: #432 } .main-nav a:hover { color: #0bd; } .page-header { display: flex; justify-content: space-between; } .wrapper { max-width: 1100px; margin: 0 auto; padding: 0 4%; } /* HOME ----------------------------*/ .home-content { text-align: center; margin-top: 10%; } .home-content p { font-size: 1.125rem; margin: 10px 0 42px; } /* 見出し */ .page-title { font-size: 5rem; font-family: 'Philosopher', sans-serif; text-transform: uppercase; font-weight: normal; } /* ボタン */ .button { font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .button:hover { background: #0090aa; } /* 大きな背景画像 */ .big-bg { background-size: cover; background-position: center top; background-repeat: no-repeat; } #home { background-image: url(../images/main-bg.jpg),linear-gradient(#c9ffbf, #ffafbd); background-blend-mode: luminosity; min-height: 100vh; } #home .page-title { text-transform: none; } /* NEWS ----------------------------------- */ #news { background-image: url(../images/news-bg.jpg); height: 270px; margin-bottom: 40px; } #news .page-title { text-align: center; } /* フッター ----------------------- */ footer { background: #432; text-align: center; padding: 26px; 0; } footer p { color: #fff; font-size: 0.875rem; } /* 記事部分 */ article { width: 74%; } /* サイドバー */ aside { width: 22%; } .news-contents { display: flex; justify-content: space-between; margin-bottom: 50px; } .post-info { position: relative; padding-top: 4px; margin-bottom: 40px; } .post-date { background: #0bd; border-radius: 50%; color: #fff; width: 100px; height: 100px; font-size: 1.625rem; text-align: center; position: absolute; top: 0; padding-top: 10px; } .post-date span { font-size: 1rem; border-top: 1px rgba(255,255,255,.5) solid; padding-top: 6px; display: block; width: 60%; margin: 0 auto; } .post-title { font-family: "Yu Mincho", "YuMincho", serif; font-size: 2rem; font-weight: normal; } .post-title, .post-cat { margin-left: 120px; }
試したこと
1.news-contentsとwrapperクラスの書く場所を変えた
テキストに<div id="news" class="bif-bg"> と「footer」の間に「news-contents」と「wrapper」クラスのついた<div>タグを書くとありました。
そこで、書く場所が悪かったのかなと思い、<div id="news" class="bif-bg">の下の行に書いたら画像のように文字が更に上にきてしまいました。
また、テキストに書いてある範囲内でコードを書く場所を変えてみましたが、改善しませんでした。
2.サンプルコードをコピペ
タイプミスを疑いダウンロードしたサンプルコードをコピペしてみましたが、改善しませんでした。
3.表示するブラウザを変えてみた
google chromeの他、IE、Microsoftedgeでも表示してみましたが、結果は同じでした。
全体の完成したコードがないため答え合わせもできず困っています。
お手数をおかけしますが、よろしくお願いいたします。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー