トップメニューを作成する

リスト形式でトップメニューを作成する。

　　この文字をクリックするとサンプルダウンロード出来ます。

文字をデザインする　←　｜　→　メニューを横に並べる

名前はhtmlソースに書き加えます。

●　htmlソースにリストメニューを書き加えます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
　　<title>>野辺山高原の四季おりおりをお伝えします</title>
　</head>

　<body>
　<h1>野辺山高原の四季</h1>

<p>野辺山高原の四季をお伝えする観光案内です。</p>

　<ul>
　<li>トップ</li>
　<li>牛乳の工房について</li>
　<li>イベントの案内</li>
　<li>メール</li>
　<li>ブログ</li>
　</ul>

<p>野辺山高原社は、八ヶ岳の自然を生かしたイベントや季節の商品をお届けしている会社です。高原にある「牛乳の工房」では、乳製品を楽しんだり、八ヶ岳の自然を楽しむこと出来ます。野辺山にお越しの際は、ぜひお立ち寄りください。 </p>

　</body>
</html>

リスト１これを表示すると、右のようになり、単に縦に単語が並んだダケでどこにもリンク出来ません。

●　リンクタグを追加します

　<ul>
リスト2 　<li><a fref="index.html">トップ</a></li>
　<li><a fref="about.html">牛乳の工房について</a></li>
　<li><a fref="event.html">イベントの案内</a></li>
　<li><a href="mailto:yatugatake@web.mail">メール</a></li>
　<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
　</ul>
　マウスでクリックできる状態になります

●　リストタグ。

リストタグは　<li>　リスト文字　</li>　で記述します。
リスト＝一覧表の事ですので、リスト文字の頭に　・　が自動で挿入されます。

リストの一覧は　<ul>　と　</ul>　で囲みます。
上の例では、タグがきちんと入れ子になっています。

●　リンクタグ。

マウスでクリックして別ページに飛ばす為、リンクタグを設定します。

　<a href="飛び先">　リンク用コンテンツ　</a>　で記述します。

　・飛び先は自身のフォルダ内であれば、index.htmlの様に拡張子までつけたファイル名を指定。
　・自身以外のサイトへ飛ぶ場合は、urlを記述。http://www.abc.com　の様に。
　・必ず、ファイル名やurlを　”　で囲みます。

　・リンク用コンテンツは「　そこにマウスを当てるとクリックできる　」　為のコンテンツです。
　　文字でも画像でも構いません。

　・メールの場合は決まり文句なので、上の例を参考にして下さい。

　・リンクタグは単独でどこでも使えます、上の例はリストタグ内に入れ子でリンクタグを使っています。

●　タグ内のプロパティ指定

　<a href="飛び先"> の様にタグ内にプロパティ指定するものがあります。
　書き方は　＜　タグの記号　プロパティ＝”値”　プロパティ＝”値”・・＞　です。
　aタグ　や　imgタグなどはプロパティ指定は必須です。