ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&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件

2016年5月の人気記事ランキング