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

売れるホームページの作り方 ⇒ 速攻HTML ⇒ トップメニューを作成する


速攻HTML

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

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


名前は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>

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



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

 <ul>
リスト2  <li><a href="index.html">トップ</a></li>
 <li><a href="about.html">湖畔の工房について</a></li>
 <li><a href="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タグなどはプロパティ指定は必須です。