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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

HTML & CSS の<div>と<header>要素の違いについて ”progate 道場 中級編”

Cocochan
Cocochan

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

490閲覧

投稿2021/02/09 03:02

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

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

私の書いたHTML

HTML

<div class="header"> <div class="header-wrapper"> <img class="header-img" src="https://prog-8.com/images/html/advanced/main_logo.png"> <div class="login-logo"> <a>ログイン</a> </div> </div> - </div>

回答のHTML

HTML

<header> <div class="container">  <div class="header-left">   <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">   </div> <div class="header-right">    <a href="#" class="login">ログイン</a>  </div> </div> </header>

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

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

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

回答のCSS

CSS

header { + height: 65px; + width: 100%; + background-color: rgba(34, 49, 52, 0.9); + position: fixed; + top: 0; + z-index: 10; } + + .logo { + width: 124px; + margin-top: 20px; } + + .header-left { + float: left; } + + .header-right { + float: right; + background-color: rgba(255, 255, 255, 0.3); + transition: all 0.5s; + } + + .header-right:hover { + background-color: rgba(255, 255, 255, 0.5); + } + + .header-right a { + line-height: 65px; + padding: 0 25px; + color: white; + display: block; }

私の書いたCSS

CSS

.header{ - height:65px; - background-color:rgba(34,49,52,0.9); - margin:0 auto; - position:fixed; - top:0px; - } - .header-wrapperaa{ - width:1170px; - } - .header-img{ - float:left; - width:123px; - padding-top:20px; } - .login-logo a{ - float:right; - display:block; - padding:20px 25px; - color:white; - background-color:rgba(255,255,255,0.3); - } コード

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。