HTML：メニュー

課題の概要

「メニュー」について理解する
メニューを入れたオリジナルのウェブサイトを制作する

サンプル

トップページ（index.html）

トップページ

主なページ（「行ったことのある島」itta.html）

メインコンテンツ

解説：メニューとは?

ウェブサイトの「メニュー」とは、「一覧」のことです。たとえば、上のサンプルページの場合は、タイトル「島のページ」のすぐ下にある、各ページのタイトル名の集まりのことをさします。

メニュー

メニューを活用することで、ページ間の移動をスムーズに行うことができます。

メニューを入れたページを作ってみよう

まず、サンプルを使って手順を理解していきましょう。ウェブサイトを作るなら、情報を整理しておきましょう。次の図のように「サイトツリー」を作ると分かりやすくなります。

サイトツリーは、トップページを頂点とした、繋がりのあるページが木の枝のように結ばれた図のことです。

サイトツリー

サンプルコード

サイトツリーをもとに、次のソースコードをテキストエディタにコピー＆ペーストしてサンプルページを完成させます。

index.html
itta.html
ittenai.html
naze.html
style.css

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>島のページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main">
    <h1>島のページ</h1>
    <div id="menu">
      <a class="selected">トップページ</a> |
      <a href="naze.html">島が好きな理由</a> |
      <a href="itta.html">行ったことのある島</a> |
      <a href="ittenai.html">行きたい島</a>
    </div>
    <h2>わたしは島が好きです。</h2>
    <p>私は島が好きです。暇があるといろんな島に出かけてきました。このサイトでは、その島についてまとめてみました。</p>
    <p id="footer">&copy; 竹林 暁</p>
  </div>
</body>
</html>

itta.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>島のページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main">
    <h1>行ったことのある島</h1>
    <div id="menu">
      <a href="index.html">トップページ</a> |
      <a href="naze.html">島が好きな理由</a> |
      <a class="selected">行ったことのある島</a> |
      <a href="ittenai.html">行きたい島</a>
    </div>
    <h2>大島</h2>
    <p>大島は、伊豆諸島の中にある島です。あまり気づかれませんが実は東京都です。島を一周する道路があって、道路からは地層が見えたりします。真ん中の山にはとても見晴らしのいい温泉があってオススメです。</p>
    <h2>能古島（のこのしま）</h2>
    <p>福岡にあるとっても小さな島です。たぶん人口は1000人いません。福岡の市街に近く、とても頻繁に連絡船が行き来しています。夜になると、対岸に福岡ドームや福岡の町の灯りがとても綺麗です。</p>
    <p id="footer">&copy; 竹林 暁</p>
  </div>
</body>
</html>

ittenai.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>島のページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main">
    <h1>行きたい島</h1>
    <div id="menu">
      <a href="index.html">トップページ</a> |
      <a href="naze.html">島が好きな理由</a> |
      <a href="itta.html">行ったことのある島</a> |
      <a class="selected">行きたい島</a>
    </div>
    <h2>加計呂麻島</h2>
    <p>奄美の中の島の一つです。海岸線が入り組んでいてとても複雑な地形をしています。曲がりくねった道を運転してみたいです。</p>
    <h2>父島・母島</h2>
    <p>小笠原諸島の島です。東京都なのにもかかわらず、行くのに2,3日かかります！長い休みに行きたいです。</p>
    <h2>利尻島</h2>
    <p>北海道の島です。真ん中に利尻富士と呼ばれる大きな山があって、とても目立ちます。この風景をいちどみてみたいです。</p>
    <p id="footer">&copy; 竹林 暁</p>
  </div>
</body>
</html>

naze.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>島のページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="main">
    <h1>島が好きな理由</h1>
    <div id="menu">
      <a href="index.html">トップページ</a> |
      <a class="selected">島が好きな理由</a> |
      <a href="itta.html">行ったことのある島</a> |
      <a href="ittenai.html">行きたい島</a>
    </div>
    <h2>島が好きな理由</h2>
    <p>私が島が好きなのは、山国育ちで海に対して憧れがあったからだと思います。もうひとつは、島に行くと周りが海で外界から離れていてなんとなく安心感があるからです。</p>
    <h2>島の風景</h2>
    <p>島には、本土から連絡船が出ています。島は狭いので、連絡船に乗る人もみんな知り合いで、道中人々のうわさ話や子供の話でもちきりだったりします。その中に1人乗り込んで、みんなの会話に耳をそばだてるのが、またなんとも楽しいものです。</p>
    <p id="footer">&copy; 竹林 暁</p>
  </div>
</body>
</html>

style.css

（スタイルがなにも定義されていない、空のファイルです。ここに必要な情報を付け足して行きましょう。）

/* 全てのページのデザインを統一します */

メニューの配置について

メニューを 表示する位置はできる限り統一 させましょう。表示する位置がバラバラだと、ページ移動の度にメニューを探すことに手間取ってしまいます。

メニュー_配置.png

補足：コピーライト（著作権）表示について

コピーライト

サンプルを見ると、右下に制作者の名前が表示されています。通常、制作者には自動的に著作権が発生するので著作権の表示をしなくても著作権の権利が失われることはありません。ただ、インターネットの世界では誰が作ったか分かるように明示しておくことを推奨します。

課題

サンプルをもとに、オリジナルのサイトを作ってみましょう。

条件

全てのページの目立つ位置に必ずメニューを入れる
トップページ以外に2〜3ページ用意する
ページのどこかにコピーライトを入れる

全体の流れ

以下の手順を参考にしてください。

サイトのテーマを決めましょう。
- 例）私の好きな電車について
盛り込みたい内容を小テーマ単位に分類しましょう。
- 例）●●の歴史、なぜ●●が好きか、●●はどんな種類があるか、みんなに勧めたい●●について
サイトのデザインを決めましょう（色、レイアウトなど）
サイトに盛り込みたい画像素材などを用意しましょう
- フリー素材や自分で撮ったり作った画像が◎！
コーディングしていきましょう