メニューリストにリンクを設定する－初心者もできる！プログラミング基礎講座【第11回】

2021年4月26日2026年4月13日

シリーズ第11回は、ヘッダー内のメニューリストにリンクを設定する簡単な方法です。フッターメニューでも基本的にやり方は同じです。HTMLの仕様を確認しながら、分かりやすく解説していきます。

リストにa要素を記述する

上の画像のように、メニューリストにリンクを設定します。方法は、list要素（各リストアイテム）内にa要素を記述します。

<header>
　<div class="header-logo">プログラミング講座
　</div>
　<div class="header-list">
　　<ul>
　　　<li><a href="https://coeure.co.jp">プログラミングとは</a></li>
　　　<li><a href="https://coeure.co.jp">HTML</a></li>
　　　<li><a href="https://coeure.co.jp">CSS</a></li>
　　　<li><a href="https://coeure.co.jp">お問い合わせ</a></li>
　　</ul>
　</div>
</header>

上のようにHTMLを書いていきます。テキストはa要素内に入れます。href属性でリンク先のURLを指定します。対象となるページのパスです。（上のコードでは、弊社コーポレートサイトのURLになっています）

これでリンクの設定ができました。簡単ですね。実際にメニューをクリックするとページが遷移するか確認してみてください。ブラウザの同じタブでページが遷移します。

リンクによっては、同じタブではなく別の新しいタブで開いてほしいことがあると思います。どうすると良いでしょうか。target属性を使います。

target属性

新しいタブでリンク先を開いてほしい場合、a要素でtarget属性を使って設定できます。

<ul>
　<li><a href="https://coeure.co.jp" target="_blank">プログラミングとは</a></li>
　<li><a href="https://coeure.co.jp">HTML</a></li>
　<li><a href="https://coeure.co.jp">CSS</a></li>
　<li><a href="https://coeure.co.jp">お問い合わせ</a></li>

2行目のように、target属性で ”_blank” と記述します。これだけで、クリックした時に新しいタブでリンク先を開くよう設定できました。実際に確認してみてください。

リストをa要素で囲めないのか

HTMLを書いていく時に時々迷うのが、この要素にこの要素を入れて書いていいのかという点があります。例えば、今回のようにリストにリンクを設定するなら、li要素をa要素で囲めばいいのでは？と感じるかもしれません。

結論的には、それは正しい記述方法ではありません。こうした決まりを確認するのに役立つサイトがMDNリファレンスです。”HTMLの仕様書”として最も信頼できるサイトです。HTMLだけでなく、CSSやJavaScriptなどの言語の仕様もまとめらています。

MDNリファレンス

今回のようにli要素をa要素で囲めるのかを調べてみましょう。テキストエディタでVisual Studio Codeを利用しているなら、記述したHTMLの要素にマウスのカーソルを載せると（英語ですが）MDNの仕様についての説明が出ます。それと共にその要素について解説したMDNサイトのリンクも表示されます。

上の画像のように、li要素の上にマウスカーソルをホバーすると MDN Reference へのリンクが表示されていることが分かります。クリックし、移動するかどうかの確認でOpenを選択します。MDNのli要素の仕様について解説しているページへ遷移します。「li mdn」などで検索しても、該当するページを見つけることができます。

上の画像のように、該当するページではli要素の概要や付けられる属性、デモや使用例などを確認できます。下にスクロールしていくと様々な情報を得ることができます。

注目したいのは、表でまとめられた仕様の「許可されている親要素」の部分です。li要素の場合、親要素として囲めるのは３つ（ul,ol,menu）であることが分かります。

つまり、a要素を親要素としてli要素を囲むことはできないということが分かります。

HTMLを書いていて迷うことがあれば、MDNリファレンスを調べてみると良いでしょう。このサイトの情報量は膨大で、実際にはほとんど使わない要素や属性についての説明も多いです。それで、このリファレンスを読み込むというより、分からなくなったら参照するようにすればOKです。そうしているうちに、だんだん理解を深めていけると思います。