Q&A
background-color:red
これのセミコロンがありませんがそれを直してもだめですか？
前提・実現したいこと
HTMLとCSSでヘッダー部に背景色をつけたいです。
発生している問題
<header>タグを使用してヘッダー部を作成しているのですが、<header>タグへ適用したい「backgroun-color」のCSSが反映されません。 何が原因なのでしょうか。該当のソースコード
HTML
1 <header> 2 <div class='header_logo'> タイトル</div> 3 <div class= 'header_list'> 4 <ul> 5 <li>XXXX</li> 6 <li>YYYY</li> 7 <li>ZZZZ</li> 8 </ul> 9 </div> 10 </header>
CSS
1header{ 2 background-color:red 3} 4 5div.header_logo{ 6 float:left; 7 font-size:40px; 8 padding: 20px 30px; 9} 10 11dev.header_list{ 12 font-size:15px; 13} 14li { 15 list-style: none; 16 float:left; 17 padding:40px 20px; 18}
補足情報
Progateの演習課題の内容です。
初歩的なことだと思いますが、ご教授願います。
回答2件
0
ベストアンサー
Progateはいまだにfloatでレイアウトを組むように指示しているんですね。
CSS
1header{ 2 background-color:red; /* セミコロン抜け */ 3 overflow: hidden; /* 雑なfloat対策 */ 4}
【floatを解除する4つの方法（clear:both;、overflow:hidden;、clearfix、height）】
https://web-manabu.com/html-css39/
投稿2019/08/18 15:17
総合スコア69400
0
<header> の前に
```ここに言語を入力
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
```
を追加して、</header>の後ろに
```ここに言語を入力
</body>
</html>
```
をつければ表示されました。
投稿2019/08/18 15:20
退会済みユーザー
総合スコア0
ご回答ありがとうございます。
私の質問の仕方が悪かったことが原因ですが、ご指摘頂いた内容の記載はしておりました。
しかし、私の環境ですとうまく表示されません。
何か、別の原因なのでしょうか。
※別の回答者様より
overflow: hidden;をつけるというご回答を頂きまして、そちらで実行してみたところ、うまく表示されました。
私もかなりの初心者ですので、あまり深いことはわかりません。すみません。何より解決したようでよかったです。katuya07さんの質問のおかげで私も overflow: hidden; を知れたので良かったです。
ありがとうございます。
お気持ちが大変嬉しいです。
お互いにこれからも勉強がんばっていきましょう。
あなたの回答
tips
プレビュー
