書いたコードと回答が違い表示結果が違ったのですが、なぜその結果の違うが生まれるのか理解できなかったため質問させていただきました。

/progate　HTML＆CSS 道場中級編の　第2セクションです。

私の書いたHTML

HTML
1<div class="header">            
2    <div class="header-wrapper">            
3    <img class="header-img" src="https://prog-8.com/images/html/advanced/main_logo.png">            
4      <div class="login-logo">            
5       <a>ログイン</a>            
6       </div>            
7                    
8                    
9      </div>            
10                    -                           
11      </div>

回答のHTML

HTML
1<header>            
2     <div class="container">            
3     　<div class="header-left">            
4                    
5     　 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">            
6                    
7                    
8     　 </div>            
9        <div class="header-right">            
10     　　　<a href="#" class="login">ログイン</a>            
11      　</div>            
12                    
13      </div>            
14      </header>

ここで以下「私の書いたCSS」のようなCSSを書いていて、「position:fixed;」を選択した際に表示がへんになってしまいました。

・質問内容ですが「回答HTMLに<header>要素があり、私の書いたHTMLには無い」ためそこに原因があるのだと考えました。

<div>で表すのではなく<heder>要素を用いないといけないものなのでしょうか。そこの仕組みが、調べてなお理解できてない部分がある為、ご教授頂けると幸いです。

回答のCSS

CSS
1header {            
2                    +              height: 65px;            
3                    +              width: 100%;            
4                    +              background-color: rgba(34, 49, 52, 0.9);            
5                    
6                    +              position: fixed;            
7                    +              top: 0;            
8                    +              z-index: 10;            
9                                 }            
10                    +            
11                    +            .logo {            
12                    +              width: 124px;            
13                    +              margin-top: 20px;            
14                                 }            
15                    +            
16                    +            .header-left {            
17                    +              float: left;            
18                    
19                    
20                                 }            
21                    +            
22                    +            .header-right {            
23                    +              float: right;            
24                    +              background-color: rgba(255, 255, 255, 0.3);            
25                    +              transition: all 0.5s;            
26                    +            }            
27                    +            
28                    +            .header-right:hover {            
29                    +              background-color: rgba(255, 255, 255, 0.5);            
30                    +            }            
31                    +            
32                    +            .header-right a {            
33                    +              line-height: 65px;            
34                    +              padding: 0 25px;            
35                    +              color: white;            
36                    +              display: block;            
37                    
38                    
39                    
40                    
41                                 }            
42
43

私の書いたCSS

CSS
1.header{            
2                    -              height:65px;            
3                    
4                    -              background-color:rgba(34,49,52,0.9);            
5                    -              margin:0 auto;            
6                    -              position:fixed;            
7                    -              top:0px;            
8                    -                          
9                                 }            
10                    
11                    -            .header-wrapperaa{            
12                    -              width:1170px;            
13                    -                          
14                                 }            
15                    
16                    -            .header-img{            
17                    -              float:left;            
18                    -              width:123px;            
19                    -              padding-top:20px;            
20                                 }            
21                    
22                    -            .login-logo a{            
23                    -              float:right;            
24                    
25                    
26                    
27                    
28                    
29                    
30                    
31                    
32                    
33                    
34                    
35                    
36                    -              display:block;            
37                    -              padding:20px 25px;            
38                    -              color:white;            
39                    -              background-color:rgba(255,255,255,0.3);            
40                    -                          
41                                 }
42コード

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

回答2件

こんにちは。

解決済みのようですが、m.ts10806さんのご回答が上手く伝わっていないようなので、補足回答します。

直接的な原因は float: right と width: 100%

表示結果が違ったのですが、なぜその結果の違うが生まれるのか理解できなかった

この直接的な原因は、float: right width: 100%です。

CSS
1            .login-logo a{            
2              float:right;

CSS
1            .header-right {            
2              float: right;

Cocochanさんのコードは、「ログイン」に直接つけていますが、正解はその親要素につけています。

CSS
1header {            
2                height: 65px;            
3                width: 100%;            
4                background-color: rgba(34, 49, 52, 0.9);            
5
6                position: fixed;            
7                top: 0;            
8                z-index: 10;            
9               }

css
1.header{            
2              height:65px;            
3
4              background-color:rgba(34,49,52,0.9);            
5              margin:0 auto;            
6              position:fixed;            
7              top:0px;            
8                          
9               }

Cocochanさんのコードには、width: 100%がありません。

セマンティクスは見た目とは別の話

m.ts10806さんのご回答はセマンティクスのお話です。
Semantics (セマンティクス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

読者やブラウザなどに、そのテキストがどのような役割を持つか（タイトルなのか本文なのか注釈なのか、など）を伝えることを目的としたものです。

一般にセマンティクスは、「どう見えるか」というような視覚情報には影響を与えません（スクリーンリーダーなどの支援技術には影響を与えます）。つまり、divでタグ付けをしようとheaderでタグ付けをしようと、見た目は変わりません。
つまり、m.ts10806さんのご回答は、「表示結果が違ったのですが、なぜその結果の違うが生まれるのか理解できなかった」に対する回答ではありません。「<div>で表すのではなく<heder>要素を用いないといけないものなのでしょうか」に対する、「用いないといけない、というわけじゃないが、使い分けした方がいいね」という回答です。

デフォルトスタイルシートに気を付ける

ただ、気を付けなくてはいけないのは、デフォルトスタイルシートです。
各ブラウザは、HTML文書を読みやすくするために、あらかじめ作られた初期のスタイルシートを適用します。
これが表示に影響を与える場合があります。

しかし、div headerはともにdisplay: blockが与えられているだけなので、そういった意味でも表示の際についての回答ではありません。
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge | コリス

最後にアドバイス

開発者ツールを使えるようになりましょう。

投稿2021/02/09 05:35

編集2021/02/09 05:36

Lhankor_Mhy

総合スコア36960

Cocochan

2021/02/09 06:49

ご回答ありがとうございます！表示の違いの原因についてですが、現段階では「float」「margin」「padding」の使い方。どの要素につけなくてはいけないかを十分に理解できていない部分に問題があると考えています。またブロック分けの部分の理解も不十分だと思っているのでもう一度学習しなおそうと思います。

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

ベストアンサー

できないわけではない、
単にProgateの設計思想に一致していないだけ

と言えます。
（確か完全一致してないとクリアできないとかルールがあったはず）

ただ、過去質問にてそれなりに議論されてきたことではありますが、タグにはそれぞれ意味があり、役割もあります。
「マークアップ」としては、何でもdivというのは好ましくはありません。
やろうと思えば、CSSを駆使すれば１つのタグだけでほぼ全て対応可能です。
でもそれをやらないのは役割分担や「文書としての意味」を反映させ、メンテナンス性や可読性を担保するためだと私は思います。

プログラムは半永久的に残り続けるので、ずっと一人がメンテナンスするわけではなく、例え作った人でも長期間見なければ忘れます（３日見ざれば他人のコード、という表現を見たことがある）

そのため、なるべくコードを見るだけで意図や意味を理解できるようにしてあげるのも、エンジニアとしての配慮のうちのなります。
もちろん、プロジェクトには品質を保つためのルールがあるので、ルールがあれば基本的にはルールに従うこと。

投稿2021/02/09 03:54

m.ts10806

総合スコア80875

Cocochan

2021/02/09 04:02

ご回答ありがとうございます。「文章としての意味」という説明はとても分かりやすい説明でした。表示結果が異なるということは構成に問題があるといことですね。まだ書くことに必死になっている部分があったので、正確に書くだけではなく見やすさも意識しながら練習していきたいと思います。丁寧なご説明ありがとうございます。