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

このレッスンではヘッダーにあるロゴやメニューなどのコンテンツの枠組みを作っていきます。
ヘッダーのコンテンツはheaderクラスを付けたdivタグ内に記述していきます。
まだヘッダーコンテンツの枠組みだけなのでこのレッスンをクリアしてもヘッダーコンテンツとしてレイアウトができていませんが「ヘッダー内のコンテンツの枠組み」と「CSSでリストのマークを消す方法」をマスターしましょう。
- ヘッダー内のコンテンツの枠組みの作り方
- CSSでリストのマークを消す方法
このレッスンをクリアするとHTML & CSSのレベルが8にアップします!
目次
ヘッダーの構造レッスンの答え
このレッスンの答えは以下のとおりです。
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タグ内の然るべき場所に記述しましょう
li { list-style: hidden; }
CSSでは「hidden」という値で非表示にするdisplayプロパティなどがあります。
「none」と「hidden」両方とも非表示にしますが、list-styleプロパティでは「hidden」の値を持ちません。
また、正確には
- none
→指定した要素を消す - hidden
→指定した要素を隠す
となります。
list-styleプロパティでは要素を「消す」ので「none」となります。
まとめ:ヘッダー内のコンテンツ構成を理解しよう
このレッスンではヘッダーにあるロゴやメニューなどのコンテンツの枠組みを学びました。
ヘッダーコンテンツの枠組みだけなのでこのレッスンをクリアしてもヘッダーコンテンツとしてレイアウトができていませんが「ヘッダー内のコンテンツの枠組み」と「CSSでリストのマークを消す方法」をマスターしましょう。
- ヘッダー内のコンテンツの枠組みの作り方
- CSSでリストのマークを消す方法
このレッスンでは間違えなかったけど、自分でWEBページを作り始めたらミスすることがあります。
ヘッダーコンテンツをheadタグ内に記述したり、list-styleプロパティの値をhiddenにしたりしていまします。
- ヘッダーコンテンツをheadタグ内に記述する
- list-styleプロパティの値をhiddenにする
このレッスンではミスしなかったけど、今後ミスすることが多くあるのでよくあるミスを頭の片隅にでもおいておけばミスを事前に避けることができます。