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

Webサイト制作,ホームページ中級講座,動画

11回目と次の12回目で、下記のようなナビゲーションといわれる「目次」部分が挿入されたコード模写を行なっていきましょう。

まずは、HTMLのマークアップから行いますので、下記のテキストファイルをコピーして、htmlファイルとして保存しておきましょう。

エコロジーと環境問題

ECOLOGY【エコロジー】

Home
Service
Map

エコロジーへの取り組み

Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。

地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。


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

Copyright (C) Computer Technology Groups. All rights reserved.

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

ホームページにあるグローバルナビゲーションは、nav要素 で囲んでの、ul要素の中に、li要素の中に、a要素を書いていまきます。

このあとは動画を見ながらテキストにHTMLのマークアップを行いましょう。

HTMLマークアップされたコード

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

</body>
</html>