メニューリストを作る
今度は、別のページにリンク(移動)出来るメニューリストを作ります。グッとホームページらしくなります。
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>間を改行させると見やすいですよ。
ハイパーリンクについて
- <a href="link1.html">〜</a>の間に記述した文字をクリックするとlink1.htmlのページにリンクします。
- 同じホームページの、他のページへリンクする時はlink1.html"というようにhtmlファイル名を入れます。
- 楽しい節約生活へリンクの様に、別のホームページへのリンクはアドレスを入れます。
このままでは、見にくいので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ずつ余白を作るというスタイル変更です。