★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★

テーマ８．左側メニューを作る１

サンプルページのような左側メニューの作成方法を紹介します。
メニュー項目の数が多くなった場合には良いかもしれませんね。

＜htmlの記述例＞

<ul class="menu">
<li><a href="dokugo.html">独り言</a></li>
<li><a href="syousetu1.html">小説</a></li>
<li><a href="douwa1.html">童話</a></li>
<li><a href="sakusi1.html">作詞</a></li>
<li><a href="tannka1.html">短歌</a></li>
<li><a href="episode1.html">エピソード</a></li>
<li><a href="hp.html">ＨＰ作成</a></li>
</ul>

＜htmlの説明＞
前ページの上部ナビの場合とほぼ同じです。
ulタグのclass指定がmenuに変わっているだけです。
でもこれだけで大幅にレイアウトが違ってきます。
menuのスタイルはcssファイルに書かれています。

＜cssファイルの記述例＞

.menu {
text-align: center;
padding: 0;
margin: 0;
}
.menu li {
width: 130px;
line-height: 0px;
font-size: 90%;
list-style: none;
}
.menu li a {
line-height: 25px;
text-decoration: none;
border-bottom: 1px solid #000066;
display: block;
background-color: #66cc66;
}
.menu li a:hover {
background-color: #66ff66;
}

＜cssファイルの説明＞
li { line-height: 0px; }
　これがないと一部のブラウザでデザインが崩れるため
border-bottom: 1px solid #000066;
　各項目の枠の下に線を付ける
　それによって項目の境界が分かりやすくなる
display: block;
　項目をブロック化し、見栄えの良いデザインにする
　（これはテーマ７で出てきましたね）
　さらに、ブロック化によって項目のクリックが楽になるという利点もある

以上のような方法で、左側メニューを作成することができます。
ただし、これだけでは期待のレイアウトにはならないので、次ページに続きます。

皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。

★ジャンル別雑文集＆ホームページ作成＆JavaScriptゲーム★

★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★