トップページに戻る

メニューリストを作る

今度は、別のページにリンク(移動)出来るメニューリストを作ります。グッとホームページらしくなります。

index.htmlへコピー→
<div id="menu">
<ol><b>MENU</b>
<li><a href="link1.html">私の節約術</a></li>
<li><a href="link2.html">私のイチ押し節約レポート</a></li>
<li><a href="http://setuyakukuma.web.fc2.com/">楽しい節約生活へリンク</a></li>
</ol>

</div>

この様に<div id="menu">とmenuのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="menu">と</div>間を改行させると見やすいですよ。

    ハイパーリンクについて
  1. <a href="link1.html">〜</a>の間に記述した文字をクリックするとlink1.htmlのページにリンクします。
  2. 同じホームページの、他のページへリンクする時はlink1.html"というようにhtmlファイル名を入れます。
  3. 楽しい節約生活へリンクの様に、別のホームページへのリンクはアドレスを入れます。

このままでは、見にくいのでindex.cssで装飾しましょう。

index.cssの#menuの{かっこ}内にコピー→
#menu{width:260px; height:380px; float:right;
background:#ffe4b5;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#menuの記述を全部消してから、このソースを丸々コピーして下さい。

背景色を肌色に、細い黒線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。


ページの最初に戻る
▼楽しい節約生活に戻る             
inserted by FC2 system