リストとリンク

このレッスンでは、リストとリンクの作り方を学び、メニューやページ間の移動を表現できるようになることを目標にします。「HTML リスト 作り方」「HTML リンク href」で調べている方向けの内容です。

<ul>(箇条書き)や<ol>(番号付き)の中に<li>で項目を並べると、メニューや手順を分かりやすく整理できます。買い物リストや目次のように、複数の項目をまとめたいときに使う基本パーツです。リンクは<a href="URL">で作ります。

サンプルコードでは、<ul>の中に3つの<li>を並べて好きな言語のリストを作り、<a href="URL">でリンクを設置しています。hrefには移動先のアドレスを指定し、タグで囲んだ文字がクリックできるリンク文字列になります。

初心者がよくつまずくのが、<ul>や<ol>の直下に<li>以外のタグを書いてしまうことです。リスト系のタグは<li>だけを直接の子要素として持つのがルールで、これを守らないと見た目が崩れることがあります。hrefを書き忘れるとリンクとして機能しない点にも注意しましょう。

ナビゲーションメニューやページ間の移動は、すべてこの仕組みで実現されています。サイト内の様々なページへの案内や、外部サイトへの参照など、リンクはWebの根幹を支える最も基本的な機能です。