HTMLの構成について　なぜここにヘッダーリストが来てしまうのでしょうか

ヘッダーのbackglound-colorの範囲にヘッダーリストを持っていきたいです。

アフィリエイトで収入を得るためにプロゲートで学んだことをatomでアウトプットしています

そしてプログラミング初めてまだ一週間でつまづいてしまってます。

配置方法を何度か変えてみたんですが、なかなか理想の場所にテキストが来ません。

どうすれば良いのでしょうか？

![![](

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <mata charset="utf-8">
5
6  <link rel="stylesheet" href="kokokara.css">
7  <title>ページタイトル</title>
8
9</head>
10
11<body>
12
13  <div class="header">
14    <div class="header-logo">ヘッダーロゴです</div>
15 　<div class="header-list">
16     <ul>
17      <li>ヘッダーリスト1</li>
18      <li>ヘッダーリスト2</li>
19      <li>ヘッダーリスト3</li>
20    </ul>
21
22    </div>
23
24
25
26  <div class="main">
27
28  <a href="https://ssl.jobcan.jp/m?code=254b040fbadd43176d1567b4361ae5cc"></a>
29
30  </div>
31
32  <div class="footer">
33
34    <div class>
35
36
37
38</body>
39</html>
40
41```CSS
42@charset "UTF-8";
43
44.header{
45
46  background-color: #6495ED;
47}
48
49.header-logo{
50
51  font-size: 30px;
52}
53
54.header-list li{
55
56  padding: 20px;
57  list-style:none;
58  float:right;
59
60}
61
62.main{
63
64  background-color: #AFEEEE;
65
66}
67
68.footer{
69
70  background-color: #87CEFA;
71}
72

liveasnotes

2018/08/01 13:36

HTMLを追記するか，Thimble等のオンラインエディタで作成・公開したデモサイトのURLを貼ると回答しやすいです

hideprog

2018/08/01 13:43

ありがとうございます！　HTMLを追記いたしますのでご確認お願いいたします！

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

回答4件

HTMLのソースコードを拝見しますと、タグの閉じ忘れなどの重大な構文エラーがあるようです。まずはそこを直すのが先決ですね。

他の方も回答されていますが、HTMLでは空要素以外の開始タグと閉じタグは原則一対で記述する必要があります。（中には一定の条件の元で閉じタグを省略できるものもありますが、それを考え出すと余計に混乱するので基本は閉じタグ必須と覚えましょう）

その上でひとつの要素（例えば<div>〜</div>のセット）を「箱（ボックス）」と考えて、箱の中に別の箱を入れ子にしていくように構成を考えます。
「ヘッダーの中にリストを入れたい」なら、

HTML
1<header>
2  <ul>
3    <li>リスト</li>
4    <li>リスト</li>
5  </ul>
6</header>

このように、「header」という外側の箱の中に「ul」という別の箱がすっぽり収まるように記述するのです。また「ヘッダーの中にタイトル見出しとリストを両方入れたい」のであれば、

HTML
1<header>
2  <h1>タイトル見出し</h1>
3  <ul>
4    <li>リスト</li>
5    <li>リスト</li>
6  </ul>
7</header>

このように記述します。
HTMLの世界ではこのように要素同士が入れ子になる構造をきちんと守る必要があります。これが守られていないとタグの閉じ忘れ同様、重大な構文エラーとなり、結果的に表示にも影響が出る恐れが高くなります。

まずはご自分のHTMLソースを見直して、
・閉じ忘れがないように
・要素同士の入れ子の関係が正しくなるように
という点に気をつけて書き直してみてください。

やり始めてまだ1週間。これからです( ´∀｀)
がんばってください。

投稿2018/08/01 17:28

aKusano

総合スコア3763

hideprog

2018/08/04 05:43

暖かいご回答本当にありがとうございます！

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

「閉じタグ」と「インデント」が面白いことになっています
以下に注意点を書きます

インデントに全角空白は使わない（必ず半角空白）
インデントは半角空白x2もしくはx4ずつ設定する
内包レベルが同じ要素のインデントはそろえる（閉じタグ忘れ防止）
imgなどの一部のタグを除き，閉じタグは必須
閉じタグは<div>に対し，</div>
つまり/（スラッシュ）必須
閉じタグにはattributeは付けない（</div class>はナシ）
div要素を使い過ぎ（cf. セマンティックWeb）
「リント」が付いているエディタを使おう

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <mata charset="utf-8">
5    <link rel="stylesheet" href="kokokara.css">
6    <title>ページタイトル</title>
7  </head>
8
9  <body>
10    <div class="header">
11      <div class="header-logo">ヘッダーロゴです</div>
12      <div cladd="header-list">
13        <ul>
14          <li>ヘッダーリスト1</li>
15          <li>ヘッダーリスト2</li>
16          <li>ヘッダーリスト3</li>
17        </ul>
18      </div>
19    </div><!--ここが抜けている-->
20    <div class="main">
21      <a href="https://ssl.jobcan.jp/m?code=254b040fbadd43176d1567b4361ae5cc"></a>
22    </div>
23    <div class="footer"></div>
24  </body>
25</html>

たくさん突っ込みましたが，ひとつずつやっていけば自然にできるようになります

まずはご利用のエディタに，全角半角を判別するプラグインや，分かりやすいリントなどを導入するところから始めると良いです

あと本回答で分からない言葉があれば適宜ググってください．（これ結構大事

投稿2018/08/01 14:42

liveasnotes

総合スコア1284

hideprog

2018/08/01 14:57

ご丁寧にありがとうございます！ご指摘頂いた要素が原因でヘッダーリストのいちがおかしいのでしょうか？

liveasnotes

2018/08/01 15:58

>ご指摘頂いた要素が原因でヘッダーリストのいちがおかしいのでしょうか？その可能性があります --- まずは，HTMLが「マークアップ言語」であることを理解してもらいたいので， CSSは一切書かず，HTMLだけでWebサイトを作ってみてくださいあえてCSSを書くなら， ```css *{ border: 1px solid gray; } ``` くらいにしておきましょう（内包関係を分かりやすくするため） CSSも楽しいのですが，HTMLがちゃんと書けないとCSSも上手く効きませんまだ1週間とのことなので，1歩ずつ着実にやっていきましょう HTMLがきちんと書けたら，CSSを当てていきます慣れてきたら，CSSの当て方を考えながらHTMLを組みますが，いまはそこまでしなくても大丈夫です CSSの書き方については，他の回答者様がアドヴァイスしてくださっているようなので，省略します（ググるのも大事ですしとにかく，Trial & Error です質問する側も「これが原因でしょうか？」と聞く前に自分で試してみて，「この通りやったらこうなりました」「ここを自分なりに工夫しましたがこうなりました」といったフィードバックを返し，課題解決が円滑に進むようにしましょう（自分の課題を解決するだけでなく，未来の質問者にとって有益なデータベースを構築することもまた，Teratailにおける質問者の重要なタスクの1つです）人生はCtrl+Z（やり直し）できませんが，コードの編集は，Ctrl+Zはおろか，Ctrl+C,Ctrl+V（コピペ:バックアップ）まで許されていますとにかく手を動かしましょう

hideprog

2018/08/04 05:47

ご丁寧にありがとうございます！

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

ベストアンサー

3つ方法があるのですが、1つはフレックスボックスを使った方法で、以下のように .header に display: flex を指定します。justify-content: space-between という部分で、ロゴとリストをそれぞれ両端揃えにしています。

.header {
  display: flex;
  justify-content: space-between; /* 中身の要素を両端揃え */
  background-color: #6495ED;
}

2つ目は、 .header に position: relative を指定して、中身の要素に position: absolute を指定する方法です。この場合ヘッダーに高さを指定する必要があります。

css
1.header {
2  position: relative;
3  height: 100px; /* ヘッダーの高さを指定します */
4  background-color: #6495ED;
5}
6  
7.header-logo {
8  position: absolute;
9  left: 0; /* 左からの位置 */
10  top: 20px; /* 上からの位置 */
11}
12  
13.header-list {
14  position: absolute;
15  right: 0; /* 右からの位置 */
16  top: 20px; /* 上からの位置 */
17}

3つ目は、float を使った方法で、ロゴに float: left 、リストに float: right を指定します。
この場合ヘッダーにはclearfixを指定する必要があります。

.header {
  background-color: #6495ED;
}

/* clearfix */
.header::after {
  display: block;
  clear: both; 
  content: '';
}
  
.header-logo {
  float: left;
}
  
.header-list {
  float: right;
}

投稿2018/08/01 14:45

編集2018/08/01 14:57

takopo

総合スコア484

hideprog

2018/08/01 14:58

ありがとうございます。もっと勉強します。。。

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

HTML自体は，

html
1<header>
2  <h1>ヘッダーロゴ</h1>
3  <ul>
4    <li>list_1</li>
5    <li>list_2</li>
6    <li>list_3</li>
7  </ul>
8</header>

のように，
当該要素を内包するだけで良いと思います．

トリッキーな方法では，position:absolute;を使う方法もあります
（但し，上下左右の幅の変動へ対応するための工夫が必要な場合もあります）

質問の方法について：

現物を見せてもらうのが一番良いです
例：https://teratail.com/questions/133821

デモやコードは，この手の質問には殆ど必須要素なので，きちんと準備しておきましょう
（回答のしやすさが抜群に上がります）

投稿2018/08/01 13:45

liveasnotes

総合スコア1284

hideprog

2018/08/01 14:10

質問の仕方までご丁寧にありがとうございます！要素を複雑に包容しすぎているということでしょうか？

liveasnotes

2018/08/01 14:14

ソースコードを見ない限りでは，何とも言えないですが，プログラミング経験が浅いとのことなので，単純なミスだと思われます（余談：ちなみにHTML,CSSはプログラミング言語ではないですリストの順番が逆になっているところからして，編集すべき個所を間違っていたりしないかといったことも気になります（そしてやはり現物を見ないと何とも言えないです

hideprog

2018/08/01 14:21

そうなんですね… ありがとうございます！先ほどコードの挿入ができておらずすみません。コード挿入しましたので見て頂けると幸いです。

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

あなたの回答