logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

HTML の第一歩 — レッスン 9 — メニューの作成

04/12/2019, by Ivan

サイトの主要な要素はメニュー(ナビゲーション)です。これを通じてサイトのページ間を移動します。また、メニューは検索エンジンによるサイトのインデックス作成にとっても重要です。ページ間のつながりがなければ、検索エンジンはすべてのページを巡回できません。メニューが何で構成されているか見てみましょう。

メニューには通常、番号なしリスト(ul、li タグ)を使用します。このように、各メニュー項目はリストの要素です。

...
<ul>
  <li></li>
  <li></li>
<ul>
...

li タグの中には通常、ページへのリンクを挿入します。

...
<ul>
  <li>
    <a href="page1.html">最初のページ</a>
  </li>
  <li>
    <a href="page2.html">2 番目のページ</a>
  </li>
<ul>
...

また、メニューとその項目にクラスや id を指定することもよくあります。

...
<ul id="menu-1" class="menu">
  <li class="item-1">
    <a href="page1.html">最初のページ</a>
  </li>
  <li class="item-2">
    <a href="page2.html">2 番目のページ</a>
  </li>
<ul>
...

また、移動先のページ(page1.html、page2.html)は存在している必要があることに注意してください。そうでないと、ブラウザはどこに移動させたいのかを理解できません。