|
 |
|
タブメニュー(フレーム版)
サンプルと機能
複数のHTMLを用いて、フォルダタブのようなメニューを作成します。
これは、現在選択しているメニューが一目で分かるため、ユーザビリティに優れています。
→ Sample 1：タブメニュー(フレーム版)
サンプルのように、色分けしてもいいですし、Windowsなどのタブメニューのように、選択している所だけ明るくするのもいいでしょう。
フレーム無し版こちら
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ フレーム定義ページ
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="50,*" frameborder="YES" border="0">
<FRAME name="topf" src="menu.html" scrolling="NO">
<FRAME name="bottomf" src="menu1.html">
</FRAMESET>
</HTML> |
→ menu.html(メニューページ)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0">
<CENTER>
<TABLE border="0" cellpadding="0" cellspacing="0" width="500" height="50">
<TR>
<TD valign="bottom">
<TABLE border="0" cellpadding="3" cellspacing="0">
<TR>
<TD bgcolor="#ffcccc" width="80" align="center">
<A href="menu1.html" target="bottomf">menu1</A></TD>
<TD bgcolor="#ccffcc" width="80" align="center">
<A href="menu2.html" target="bottomf">menu2</A></TD>
<TD bgcolor="#ccccff" width="80" align="center">
<A href="menu3.html" target="bottomf">menu3</A></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> |
→ menu1.html(赤)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#ffeeee" topmargin="0" leftmargin="0">
<CENTER>
<TABLE border="0" cellpadding="0" cellspacing="0"
width="100%" height="20">
<TR>
<TD bgcolor="#ffcccc"> </TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="15" cellspacing="0"
width="510" height="200">
<TR>
<TD valign="top">
ここに文章を書きます
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> |
→ menu2.html(緑)
→ menu3.html(青)
解説・注意点など
今回は簡単のため、HTMLのみで実現しましたが、画像などを用いると、よりきれいに作成できます。
← Webデザインテクニックに戻る
|
|
|
