Q&A
前提・実現したいこと
CSSを使って画像（.png)を中央にしたいができないです
したい部分は下記の通りです
HTML↓
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>CSS↓
.logo {
margin: 50px 0 40px 0;
line-height: 0;
text-align: center;
}
HTML全体↓
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>KUJIRA Cafeへようこそ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <header class="header"> <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> <nav class="nav"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> </header> <!-- ヘッダー ここまで --> <!-- メイン --> <div class="keyvisual"> <img src="images/keyvisual.jpg" alt=""> </div> <main> <h2 id="news">News</h2> <p class="news-item">4月29日（土）は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p> <p class="news-item">3月20日（月・祝）は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに！</p> </main> <!-- メイン ここまで --> <!-- フッター --> <footer class="footer"> <p>©Copyright KUJIRA Cafe. All rights reserved.</p> </footer> <!-- フッター ここまで --> </div> </body>CSS全体↓
@charset "UTF-8";
/すべてのWEBページに適用される/
html {
font-family: sans-serif;
}
html * {
box-sizeing: boder-box;
}
body {
background-color: #eeece9;
}
h2 {
color:#3f5170;
font-size:22px;
border-bottom: 3px dotted #3f5170;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
p {
line-height: 1.6;
}
a:link{
color: #d25833;
}
a:visited{
color: #d25833;
}
a:hover{
color: #e3937a;
}
{
a:active{
color: #ff6a3b;
}
/* すべてのページに適用 - ヘッダー - */
.logo {
margin: 50px 0 40px 0;
line-height: 0;
text-align: center;
}
メモ帳でやっているのでエラーメッセージの出し方もよくわかっていません。
よろしくお願いいたします。
回答2件
0
ベストアンサー
余計な{があります。消してください。
diff
1 a:hover{ 2 color: #e3937a; 3 } 4- { 5 a:active{ 6 color: #ff6a3b; 7 }
投稿2021/09/08 13:11
総合スコア8402
0
cssの記述ミスです
css
1 ︙ 2 ︙ 3a:hover{ 4color: #e3937a; 5} 6{ 7a:active{ 8color: #ff6a3b; 9} 10 11 ︙ 12 ︙
を
css
1a:hover{ 2color: #e3937a; 3} 4a:active{ 5color: #ff6a3b; 6}
にすれば解決すると思います。
余談ですが何かしらの制約があってメモ帳を使っているのでなければVSCode等のコードエディタを使うと幸せになれるかもしれないです。
投稿2021/09/08 13:18
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/08 13:18