01 ホームページ中級講座ナビゲーションの作成(HTML)

2020年4月6日2025年4月13日

URLをコピーしました！

今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。

下記の文章から、HTMLをマークアップしてみましょう

エコロジーと環境問題
ECOLOGY【エコロジー】
Home
Service
Map
エコロジーへの取り組み
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
商品のラインナップ
紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
Copyright (C) Computer Technology Groups. All rights reserved.

できあがったら下記でチェック

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>エコロジーと環境問題</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="contents">
        <header>
            <h1>ECOLOGY【エコロジー】</h1>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#service">Service</a></li>
                    <li><a href="#map">Map</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <section id="service">
                <h2>エコロジーへの取り組み</h2>
                <p>Computer Technology
                    Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
                </p>
                <p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
                </p>
            </section>

            <section id="products">
                <h2>商品のラインナップ</h2>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
                </p>
            </section>
        </main>

        <footer>
            <p>Copyright &copy; Computer Technology Groups. All rights reserved.</p>
        </footer>
    </div>
</body>

</html>

グローバルナビゲーション

グローバルナビゲーション（Global Navigation）は、ウェブサイト全体の主要なページやセクションへのリンクをまとめたものです。通常、サイトのヘッダー部分に配置され、ユーザーがどのページにいても簡単に他のページに移動できるようにします。

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#service">Service</a></li>
        <li><a href="#map">Map</a></li>
    </ul>
</nav>

<nav>
- ナビゲーションメニューを意味するセマンティックなHTML5要素。
- サイト内でナビゲーション部分を明確に分けることで、アクセシビリティや検索エンジンの理解を助けます。
<ul>
- リンクリスト（箇条書き）を作成します。
- 複数のリンクをリスト形式で整理し、読みやすく表示。
<li>
- リスト内の個々の項目を定義。
- 各リンクをリストアイテムとして構造化することで視覚的・機能的な整理。
<a>
- 他のページやセクションへのリンクを作成。
- href="#home": ページ内の特定の位置（id="home"）にリンクします。
- ユーザーが指定されたページまたはセクションにすぐ移動できる。

`<ul>`を使わない場合のコード

下記のような記述も可能です。不要なリスト構造を省き、HTMLが短くなるため、読みやすく管理しやすいのですが、ナビゲーションのリンクがリストとして構造化されないため、スクリーンリーダーや検索エンジンがナビゲーション部分を正しく認識しづらいという点や、アクセシビリティが低下すると言われています。ただ小規模な簡易的なナビゲーションには向いているようです。

<nav>
    <a href="#home">Home</a>
    <a href="#service">Service</a>
    <a href="#map">Map</a>
</nav>

グローバルナビゲーションのマジックナンバーとは？　CSSやプログラミングで明確な根拠や説明がないまま、特定の値（数値や寸法）を設定することを指します。これにより、コードの可読性やメンテナンス性が低下することがあります。グローバルナビゲーションのデザインは、どのサイトも工夫しています。マジックナンバーも関わってきますので、グローバルナビゲーションの個数に興味がある方は下記サイトをご参照ください。

ナイルのSEO相談室

グローバルナビゲーションとは？役割とポイントについて解説グローバルナビゲーションとは、Webサイトの全ページ共通に設置される案内リンクです。グローバルメニューの役割と、人間の記憶・認識の概念「マジックナンバー 7」につい…

ナビゲーション内のリンク

ナビゲーションリンクが特定の<section>とリンクする仕組みは、HTMLのid属性を利用しています。これは、ページ内リンクと呼ばれ、#とid属性を使うことで、ページ内のどの部分でもリンク可能となります。特に長いページや1ページ内に複数セクションがある場合に便利です。

<nav>
    <a href="#service">Service</a>
</nav>

<section id="service">
    <h2>エコロジーへの取り組み</h2>
    <p>このセクションではサービスに関する情報を記載しています。</p>
</section>

リンク部分（`<a>`タグ）

<a href="#service">Service</a>

href="#service"

hrefの値である#serviceは、ページ内の特定の位置を指定しています。
#は「このページ内のどこかを指定する」という意味を持ち、serviceは対応する要素のid属性を指します。

リンク先（`id`属性）

<section id="service">

id="service"

このid属性が、リンク先として指定されています。
ページ内でユニーク（他の要素と重複しない）である必要があります。

ユーザーが「Service」をクリックすると、ブラウザはid="service"が付けられた<section>までスクロールします。

次はナビゲーションのCSSを作成しましょう

よかったらシェアしてね！

URLをコピーしました！

01 ホームページ中級講座 ナビゲーションの作成(HTML)