スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ HTML&CSS講座 ＞ ナビゲーションメニュー

ナビゲーションメニュー

投稿日：2006年10月10日　　　レベル：初級　　　　ソフトウェア：DreamWeaver


ナビゲーションメニューナビゲーションメニューの作成の方法について教えていきます。

手順を追って説明していきます。最終系は最後に示しています。2行のシンプルなテーブルから始めます。

<table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

リンクとテーブルの幅を記述します。

<table>
<tr>
<td width="250px">
<a href="http://www.google.com" target="_blank">Yahoo</a>
</td>
</tr>
<tr>
<td width="250px">
<a href="http://www.google.com" target="_blank">Google</a>
</td>
</tr>
</table>

次に、マウスを重ねたときのマウスオーバー効果、マウスを離したときのマウスアウト効果を加えます。背景色についても指定します。

完成系は

<table>
<tr>
<td width="250px" onMouseOver="this.style.backgroundColor='#BADAEA';"
onMouseOut="this. style.backgroundColor='';" bgcolor="#C0C0C0"><a href="http://www.google.com" target="_blank">Yahoo</a></td>
</tr>
<tr>
<td width="250px" onMouseOver="this.style.backgroundColor='#BADAEA';"
onMouseOut="this. style.backgroundColor='';" bgcolor="#DBDBDB"><a href="http://www.google.com" target="_blank">Google</a></td>
</tr>


引用:Web Design Library著者:Andy翻訳:atuk




スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング