ナビゲーションバー

初段 / 目安 15分

カードを見た陽葵さんが、次のラフを持ってきました。「メニュー・アクセス・お知らせ、上に横並びのメニューが欲しいの。あと、触ったら色が変わるやつ！あれがあるとお店っぽいでしょ」。指でトントンと画面の上のほうを叩いています。

リンク先はまだ決まっていないので、行き先は # のままで構いません。並べる順番はメニュー、アクセス、お知らせです。

完成条件

• header の中に nav を置く
• nav の中に ul と li でリンクを3つ並べる
• 3つのリンクを縦ではなく横に並べる
• リンクにマウスを乗せたら色が変わるようにし、そのとき指の形のカーソルにする

進め方

リストは何もしないと縦に積まれます。これは li が1行ずつ場所を取るためです。横に並べたいときは、並べたい要素そのものではなく親側に指示を出します。親を「中身を横に並べる箱」に変えると、中の li が1行に収まります。ついでに list-style を none にして黒丸を消し、padding を 0 に戻しておくと見た目が整います。

マウスを乗せたときの色は、もとのルールを消さずに、うしろに :hover を付けた別のルールを書き足します。乗せているあいだだけ上書きされ、外すと元に戻ります。それだけだと「押せる場所だ」と伝わりきらないので、cursor も一緒に指定して指の形にしておきます。

手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。

1. header の中に nav を置き、ul と li でリンクを3つ並べる
2. nav ul を横並びにする
3. リンクにマウスを乗せると色が変わるルールを書く
4. リンクのカーソルを指の形（cursor: pointer）にする