HTMLのメニューを変更する

1. メニューは各HTMLの <nav> にあります

Template 001では、ページ上部のナビゲーションを各HTMLファイルに書いています。まず index.html を開き、次のような部分を探します。

<nav class="global-nav">
  <a href="about.html">私たちについて</a>
  <a href="service.html">サービス</a>
  <a href="works.html">実績</a>
</nav>

2. 表示する名前だけを変える

リンク先を変えず、メニュー名だけ変えるなら <a> と </a> の間を書き換えます。

<a href="service.html">事業内容</a>

3. リンク先を変更する

href="..." がリンク先です。たとえば新しく price.html を作った場合は、次のように指定します。

<a href="price.html">料金案内</a>

4. 順番を入れ替える

メニューの行ごと移動すれば順番を変えられます。タグの途中だけを切り取らず、<a ...>...</a> を1セットとして移動します。

<a href="service.html">サービス</a>
<a href="about.html">私たちについて</a>
<a href="works.html">実績</a>

5. 外部サイトへリンクする

別サイトへ移動させる場合は、https:// から始まるURLを指定します。新しいタブで開くなら target="_blank" と rel="noopener" を追加します。

<a href="https://example.com/"
   target="_blank" rel="noopener">
  公式サイト
</a>

6. スマホ表示も確認する

メニュー名が長すぎたり項目数が増えすぎたりすると、スマートフォンで窮屈になることがあります。追加後はブラウザ幅を狭くして確認します。

• メニュー文字が重なっていない
• 横にはみ出していない
• 押したいリンクをタップしやすい

7. 最後の確認

• すべてのHTMLでメニュー項目が同じ
• リンク先ファイルが実際に存在する
• 現在ページへのリンクも正常
• 外部リンクのURLに間違いがない
• スマートフォン幅でも崩れていない