ヘッダーの中身を組む

01 / 04

ヘッダーはページの顔

どのサイトにも、いちばん上に細い帯がある。左に店の名前、右にメニュー——あの部分をヘッダーと呼ぶよ。

どのページを開いても同じものが出るので、サイトの顔になる場所だね。

02 / 04

作る順番が大事。まずどんな箱に何が入るかだけを決めて、色や配置はあとで足す。

ヘッダー全体を div の箱にして、header という class をつけよう。

<div class="header">  <h1 class="logo">つきみ堂</h1></div>

03 / 04

メニューは項目が並んだものだから、正体はリスト。ul の中に li、その中に a を入れる。

行き先がまだ決まっていないリンクは、href="#" と書いておけばいいよ。

<ul class="menu">  <li><a href="#">おしらせ</a></li>  <li><a href="#">おかし</a></li></ul>

04 / 04

書いたらプレビューを見てみよう。ロゴの下にメニューが縦に並ぶはず。

がっかりしなくて大丈夫。横に並べるのは次のレッスンの仕事で、いまは入れ子が合っていれば合格。ここから書いてみよう。

<div class="header">  <h1 class="logo">つきみ堂</h1>  <ul class="menu">    <li><a href="#">おしらせ</a></li>  </ul></div>