言語を学ぶ

HTML&CSSでつくるナビゲーションバー

HTML&CSSでつくるナビゲーションバー

チャプター:5

このブックでは、HTMLとCSSを使用してナビゲーションバーを作成します。ナビゲーションバーとは、ホームページ上でユーザを サイト内の別ページに誘導するためのリンクのリストを指します。このブックを通して実際にレイアウトを作成していく中で、実際の開発現場で利用されるナビゲーションのつくり方を学ぶことが可能です。

1.ナビゲーションバーの基となるHTMLをつくろう

このチャプターではHTMLを用いて、ナビゲーションバーの基となるHTMLの構造を作成していきます。

25P

2.ID名「nav」を持つ要素を装飾しよう

このチャプターでは前回までのチャプターで作成した要素のうち、全てのリスト項目を囲むための要素(「nav」というID名を持つ要素)に対して、実際にCSSを用いて装飾を行います。

25P

3.ID名"nav"要素の直下にあるli要素を装飾しよう

このチャプターでは前回までのチャプターで作成した要素のうち、複数のリンクを並べたリスト項目( li要素 )に対して、実際にCSSを用いて装飾を行います。

31P

4.リンク文字を調整しよう

このチャプターでは前回までのチャプターで作成した要素のうち、各リスト項目内のリンク文字( a要素 )に対して、実際にCSSを用いて装飾を行います。

24P

5.ナビゲーションバーに効果をつけよう

このチャプターでは前回までのチャプターで作成したナビゲーションバーに対して、ユーザがマウスを乗せた際の効果をつけます。このように効果をつけることで、ユーザは「ここは押す事のできる場所なんだな」と認識しやすくなります。

24P