11 ホームページ中級講座 ナビゲーションの作成(HTML)
１１回目と次の１２回目で、下記のようなナビゲーションといわれる「目次」部分が挿入されたコード模写を行なっていきましょう。
まずは、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>