headerにbackground-colorプロパティが適応されない

headerにbackground-colorプロパティが適応されません。
試したコードを下記に記載いたします。

下記のコードだとなぜ、background-color適応してくれないのでしょうか？

cssの挙動がなかなか理解できない、今日この頃です。。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>hoge</title>
6        <link rel="stylesheet", href="test.css">
7    </head>
8    <body>
9        <header>
10            <h2 class="header-title">
11                山田太郎
12            </h2>
13            <div class="header-list">
14                <ul>
15                    <li>お問い合わせ</li>
16                    <li>山田太郎とは</li>
17                    <li>私の明るい現在、未来</li>
18                </ul>
19            </div>
20        </header>
21    </body>

css
1@charset "UTF-8";
2
3body{
4    padding:0px;
5    margin:0px;
6}
7
8/* これが適応されません */
9header{
10    background-color:#008080;
11}
12
13.header-title{
14    float:left;
15    padding:0px 20px;
16}
17
18
19.header-list li{
20    list-style: none;
21    float:left;
22    padding:25px 15px;
23}

行動規範の内容に同意します

回答3件

ベストアンサー

floatは要素を回り込ませるときに使用しますが、注意点として要素が浮いた状態になります。
そのため、親要素の高さ(height)が0と認識されます。

今回の場合、.header-titleとliタグにfloatをしてしているので、headerタグとulタグの高さが0です。
これではheaderタグに背景色を指定しても高さがなく表示されないので、高さを認識させることが大事です。

Kent_様のコードを活かす場合、CSSに以下のコードを追加します。

CSS
1header{
2    background-color:#008080;
3    overflow: hidden; //追加コード
4}
5.header-list ul {
6  overflow: hidden; //追加コード
7  margin: 0; //追加コード
8}

親要素に高さを持たせると、ulにかかっているmarginが弊害となるため、margin: 0;でリセットします。
デモページ（codepen）

また、要素の横並びといえば以前はfloatが主流でしたが、最近ではflexboxの使用も増えてきています。
以下コードお送りしますので、お時間あればご参考くださいませ。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>Tech Academy Kitchen</title>
6        <link rel="stylesheet", href="test.css">
7    </head>
8    <body>
9        <header>
10            <h2 class="header-title">
11                山田太郎
12            </h2>
13            <div class="header-list">
14                <ul>
15                    <li>お問い合わせ</li>
16                    <li>山田太郎とは</li>
17                    <li>私の明るい現在、未来</li>
18                </ul>
19            </div>
20        </header>
21    </body>

CSS
1@charset "UTF-8";
2
3body{
4    padding:0px;
5    margin:0px;
6}
7
8header{
9    background-color:#008080;
10    display: flex;
11    align-items: center;
12}
13
14.header-title{
15    padding:0px 20px;
16}
17
18.header-list ul {
19    display: flex;
20    margin: 0;
21}
22
23.header-list li{
24    list-style: none;
25    padding-right: 20px;
26}

こちらもデモURLお送りします。
数日のあいだ保存しておきますので合わせてご確認ください。
デモページ2（codepen）

投稿2019/04/18 03:07

otamunote

総合スコア281

こんにちは　解答する前にコードを見て気づいたことを述べます

1 <html>タグについて

<html>タグを<html></html>のように閉じておきましょう。確かにエラーは出ませんが、基本的に閉じるものです 2.cssのリンク貼りについて > ```ここに言語を入力 > <link rel="stylesheet", href="test.css"> > > ```

とありますが,コンマは不要です　（エラーが出るはず）

では本題に戻って、解答したいと思います

基本的に今回のようにlistタグを横並びにしたナビゲーションにあたるものは<nav>タグで囲むのをお勧めします。<header>タグはホームページの「ロゴマーク」などナビゲーションの上に表示するものに使います。

私が書いたコードを載せておきます. 文字の高さなどをcssで調整しています.

html
1<!DOCTYPE html>
2
3<html>
4    <head>
5        <title>Tech Academy Kitchen</title>
6        <meta charset="UTF-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1.0">
8        <link href="css/test.css" rel="stylesheet">
9    </head>
10    <body>
11        <nav>
12            <ul>
13                <li><h2>山田太郎</h2></li>
14                <li class="nav_list">お問い合わせ</li>
15                <li class="nav_list">山田太郎とは</li>
16                <li class="nav_list">私の明るい現在、未来</li>
17            </ul>
18        </nav>
19    </body>
20</html>

css
1@charset "UTF-8";
2
3body{
4    padding:0;
5    margin:0;
6}
7nav{
8    width: auto;
9    background-color: #008080;
10}
11nav ul{
12    list-style: none;
13    margin: 0 0 20px 0;
14    padding-left:0;
15    overflow: hidden;
16}
17nav ul li{
18    width: 215px;
19    float: left;
20    margin-left: 5px;
21    padding-left: 15px;
22    font-size: 20px;
23    line-height: 20px;
24    font-weight: 100;
25}
26nav ul li.nav_list{
27    padding-top: 25px;
28}

###考察
今回は

css
1.header-list ul{
2  list-style: none;
3  margin-left: 0;
4  padding-left :0;
5  overflow: hidden;
6}

を書いたことで背景色が反映されました。

投稿2019/04/15 04:17

編集2019/04/15 04:18

退会済みユーザー

総合スコア0

floatのせいです。
レイアウトにはfloatを使わず、grtidやflexを使うようにすることをお勧めします。

【html floatの基本高さを認識させる - Qiita】
https://qiita.com/shizuma/items/e79702c915a557491884

【【CSS】floatした要素の親要素に高さを認識させる２つの方法 | Handy Web Design】
https://handywebdesign.net/2017/11/two-ways-to-recognize-a-height-of-floating-object/

【よこ並びのCSS。】
http://lopan.jp/layout/

投稿2019/04/14 13:45

kei344

総合スコア69407

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

headerにbackground-colorプロパティが適応されない

では本題に戻って、解答したいと思います

関連した質問