【HTML】nav要素・タグの意味や書き方まとめ|サンプルデザイン有り
  • facebookページ
  • twitterページ
  • 2020.03.30

    【HTML】nav要素・タグの意味や書き方まとめ|サンプルデザイン有り

    navタグ・要素とは?(意味)

    navタグ・要素とは、ナビゲーションのセクションを表すタグ・要素のことです。

    navタグを指定することで、ページ内の指定の部分や他のページへのリンクを設定できます。

    ポテパンスタイルでいうと、スマホ表示した際の画像の部分がnav要素になります。

    navタグ・要素とは?(意味)

    nav要素の設定は必要?

    nav要素は、利用者がページ内の主要コンテンツを閲覧する際に、コンテンツをいちいち探す手間を省いてくれるといった利点があります。

    また、視覚が不自由な方向けに使用される「スクリーンリーダー」が、nav要素からサイトメニューを見つけてページ移動を助ける役割を果たします。

    これらの理由から、nav要素は設定しておいて損はありません。

    HTML5以前は、divタグのIDやクラスに「nav」「menu」といった名前をつけて区別していました。

    HTML5になると、ナビゲーション専用のタグ「navタグ(nav)」が用意されたため、現在ではnavタグが使用されます。

    ■HTML5以前

    navの使い方・書き方(ul・li)

    navタグの使い方・書き方は、ナビゲーションにしたい範囲をタグで囲みます。

    navタグはサイトやWebページのメインのナビゲーションのみを囲み、すべての要素は囲みません。

    そのため、利用規約やトップページへのリンクといったナビゲーションには、navタグは使わなくてOKです。

    サンプルコードで確認してみましょう。

    ■表示結果

    navの使い方・書き方(ul・li)

    見た目にはわかりませんが、タイトルも含めた範囲がnav要素になっています。

    navをcssでアレンジ【サンプル】

    ナビゲーションを使用するのであれば「横並びにしたい」「オシャレな感じにしたい」と思うこともあるでしょう。

    ここでは、コピペでナビゲーションが使えるようサンプルを5個紹介します。

    1. シンプルな横並び
    2. 斜線区切り
    3. hover時に下線表示
    4. hover時に背景色を変更
    5. 背景色を変更+hover時に薄くなる

    HTMLは次のコードを使用します。

    1.シンプルな横並び

    ■表示

    シンプルな横並び

    画像のようなシンプルに横並びのメニューを作るには、次のCSSを指定しましょう。

    ■CSS

    2.斜線区切り

    ■表示

    2.斜線区切り

    項目ごとに斜線で区切り線を入れたメニューです。

    ここでは、li要素に擬似要素(::after)で区切り線を入れる方法で作成しています。

    区切り線をスラッシュではなく「|」にしてもよいですね。

    ■CSS

    3.hover時に下線表示

    ■表示

    3.hover時に下線表示

    マウスでメニューの項目を選ぶ際に、下線が表示されるメニューです。

    ■CSS

    4.hover時に背景色を変更

    ■表示

    4.hover時に背景色を変更

    下線表示と似たアレンジで背景色を変更してみました。

    ■CSS

    5.背景色を変更+hover時に薄くなる

    ■表示

    5.背景色を変更+hover時に薄くなる

    メニューに背景色をつけて、項目選択中に少し薄くなるようなデザインです。

    ■CSS

    navタグは2つ使ってもよい?

    navタグは2つなど複数使ってもよいのでしょうか?

    ナビゲーション要素に使うのであれば、何個使っても問題はありません。

    navを使う数に制限はありませんが、ユーザからすると1ページに何個もナビゲーションがあるのは逆に使いづらくなってしまいます。

    必要な分だけ設定することをオススメします。

    まとめ

    HTMLのnavタグ・要素について解説しました。

    サイトが大きくなるほど、主要ページへの遷移を促すナビゲーションは重要な役割を果たします。

    アレンジ方法も含め、ぜひこの記事でnavタグを使いこなせるようになってください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE