プロゲートのヘッダーの構造レッスンの解説とよくあるミス

2021年11月16日

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

ひつじのジョージ

このレッスンから実際に表示される部分を記述していくよ

このレッスンではヘッダーにあるロゴやメニューなどのコンテンツの枠組みを作っていきます。

ヘッダーのコンテンツはheaderクラスを付けたdivタグ内に記述していきます。

まだヘッダーコンテンツの枠組みだけなのでこのレッスンをクリアしてもヘッダーコンテンツとしてレイアウトができていませんが「ヘッダー内のコンテンツの枠組み」と「CSSでリストのマークを消す方法」をマスターしましょう。

<strong>マスターすること</strong>

ヘッダー内のコンテンツの枠組みの作り方
CSSでリストのマークを消す方法

このレッスンをクリアするとHTML & CSSのレベルが8にアップします！

プログラマー12年生がプロゲートに挑戦！

13.ヘッダーの構造をクリアしてレベルアップ！

【プログラミング学習のProgate】HTML & CSSのレベルが8にUPしました！ https://t.co/CkzP8vKhVU #Progate
— ひつじのジョージ@プログラマーライフ (@GeorgeOfSheep) November 15, 2021

1 ヘッダーの構造レッスンの答え
2 よくあるミス
- 2.1 よくあるミス1：ヘッダーコンテンツをheadタグ内に記述する
- 2.2 よくあるミス2：list-styleプロパティの値をhiddenにする
3 まとめ：ヘッダー内のコンテンツ構成を理解しよう

ヘッダーの構造レッスンの答え

このレッスンの答えは以下のとおりです。

index.htmlでheaderクラスを付けたdivタグ内にヘッダーコンテンツを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <!-- <div>要素を追加し、「header-logo」というclassをつけてください -->
      <div class="header-logo">
        Progate
      </div>
      
      <!-- <div>要素を追加し、「header-list」というclassをつけてください -->
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
      
    </div>

    <div class="main">
      
    </div>

    <div class="footer">
      
    </div>
  </body>
</html>

index.htmlで記述したリストには「・」マークが付いているので以下のようにliタグを指定して、リストの「・」を消します。

body {
  font-family: "Avenir Next";
}

/* list-styleプロパティを用いて、<li>要素の黒点を取り除いてください */
li {
  list-style: none;
}

.header {
  background-color: #f7f2b4;
  height: 90px;
}

.main {
  background-color: #bdf7f1;
  height: 600px;
}

.footer {
  background-color: #ceccf3;
  height: 270px;
}

CSSのlist-styleプロパティはリストを装飾するプロパティです。
値を「none」にすることでリストの「・」マークを非表示にすることができます。

list-styleプロパティで他にもいろいろな装飾ができるので詳しくは以下のサイトを参照してください。

https://developer.mozilla.org/ja/docs/Web/CSS/list-style

よくあるミス

このレッスンでは間違えなかったけど、自分でWEBページを作り始めたらミスすることがあります。

ヘッダーコンテンツをheadタグ内に記述したり、list-styleプロパティの値をhiddenにしたりしていまします。

よくあるミス

ヘッダーコンテンツをheadタグ内に記述する
list-styleプロパティの値をhiddenにする

こあら

どんなミスでも大目に見てもらえるのが初心者の特権!

ひつじのジョージ

たくさんミスしたほうが早く覚えられるね

よくあるミス1：ヘッダーコンテンツをheadタグ内に記述する

<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">

    <div class="header-logo">
      Progate
    </div>
  </head>
  <body>
    <div class="header">
     ...

WEBページを作り慣れた方からするとありえないミスですが、ヘッダーコンテンツをheadタグ内に記述してしまうミスがあります。

headタグとheaderでは名前がよく似ていますが役割が違うのでヘッダーコンテンツはbodyタグ内の然るべき場所に記述しましょう