前提・実現したいこと
「一冊で全て身につくHTML&CSSとWEBデザイン入門講座」という本のchapter5について
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
news.htmlのタイトルであるnewsが正しい位置に表示されない
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WCB Cafe - NEWS</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="icon" type="image/png" href="images/favicon.png"> </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> </div> <div class="news-contents wrapper"> <article> メインエリア </article> <aside> サイドバー </aside> </div> <footer> <div class="wrapper"> <p><small>© 2019 Manabox</small></p> </div> </footer> </body> </html>css
@charset "UTF-8";
/共通部分/
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium", "遊ゴシック Medium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ Pro3 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', 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);
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;
}
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー