最近の私のheader内ナビゲーション構造

by itami · 公開済み 2021年2月18日 · 更新済み 2021年3月29日

私の最近のナビゲーション周り記述と言えば以下の通りである。
<nav>タグ直下に<a>を並べる方法だ。

        <header class="pageHeader">
            <div class="logo"><a href="#"><b>My Awesome Site</b></a></div>
            <nav class="globalNav">
                <a href="#">home</a>
                <a href="#">gallery</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
            </nav>
        </header>

ナビゲーションのコーディングとしては、書籍でも多くが以下の<ul>構造で紹介されていると思うが、<ul>によるナビのコーディングが流行り出した頃を知っている私としてはそろそろこの構造は必要ないと思っている。

そもそも<ul>による構造化は<nav>タグの存在しなかった頃の苦肉の策で、ナビゲーションリンクを少しでも意味のあるものにしようと考えられリストタグである<ul>に対して<ul class=”globalNav”>などと記述していた。

Contents

1 古い記述方法

古い記述方法

               <ul class="globalNav">
                  <li><a href="#">home</a></li>
                  <li><a href="#">gallery</a></li>
                  <li><a href="#">blog</a></li>
                  <li><a href="#">contact</a></li>
                </ul>

しかし<nav>タグが存在するHTML5の現在ではナビゲーションを明示的に記述可能なので、あえて<ul>を利用することはタグを複雑にして無駄が多いように感じている。

もちろん多くのページスタイルCSSが<ul><li>でスタイリングされているので不用意にまねするとマズイ。
特にサブメニューなどは<ul>がネストしてCSSでスタイリングが一般的で、WordPressのメニュー出力も<ul>出力で、<ul>は簡単に消せ先ますが<li>まで消すとなると少し面倒。

学生にWEB制作を教える身でもあるが、コードを眺めていても<ul>使用に対して合理的な理由が見つけられない今日この頃である。

最近の私のheader内ナビゲーション構造

サンコーズレないチェアマットおくだけ吸着デスク床保護マット 90×120cm クリーム

山善本棚幅30×奥行29×高さ183.5cm 棚板高さ調節可能壁にぴったり組立品ジョイブラウン CPB-183DW(JB)

リヒトラブ机上台専用 USB3.0 ハブ白 A7337-0

Hbada ハイバックオフィスチェアメッシュ - デスクチェアオットマン付き可動式アームレストランバーサポート昇降ヘッドレスト約155度リクライニング通気性強化ナイロン樹脂ベース

Bauhutte（バウヒュッテ）昇降式L字デスクタワータイプブラック幅32×奥行67㎝ BHD-670T-BK

おすすめ

Amazon 書籍『入門Blender 2.9 ~ゼロから始める3D制作~』

ポッドキャスト[ドラマ]配信中!

アーカイブ

カテゴリー