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

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

テーマ７．上部ナビを作る

当サイトの各ページのような上部ナビの作成方法を紹介します。
確かにこのような上部ナビ付きのレイアウトをよく見掛けますね。

＜htmlの記述例＞

<ul class="navi">
<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を指定します。
この例ではnaviというclassの指定です。
naviのスタイルはcssファイルに書かれています。
後はliに表示したい項目を入れるだけです。

＜cssファイルの記述例＞

.navi {
text-align: center;
padding: 0;
margin: 0;
overflow: hidden;
}
.navi li {
width: 107px;
font-size: 95%;
float: left;
list-style: none;
}
.navi li a {
line-height: 25px;
text-decoration: none;
border-top: 2px solid #669966;
border-right: 4px ridge #669966;
border-bottom: 4px ridge #669966;
display: block;
background-color: #66cc66;
}
.navi li a:hover {
background-color: #66ff66;
}

＜cssファイルの説明＞
padding: 0;
margin: 0;
　この二行で不要な余白を無くし、デザインの崩れを防ぐ
overflow: hidden;
　親要素に指定し、後述する子要素のfloatを解除する
float: left;
　左に配置し、後続の内容を右側に回り込ませる
　この指定によって、結果的に横一列に並ぶ
list-style: none;
　不要なリストの装飾を無くす
text-decoration: none;
　リンクのアンダーラインを無くす
border-top: 2px solid #669966;
　枠の上に線を付ける（太さ・種類・色を指定）
border-right: 4px ridge #669966;
border-bottom: 4px ridge #669966;
　枠の右と下に線を付ける（線の指定を変えると良いかも）
display: block;
　項目をブロック化し、デザインの崩れを防ぐ
a:hover { background-color: #66ff66; }
　マウスオーバー時の背景色を変える

以上のような方法で、上部ナビを作成することができます。

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

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

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