HPで使えるボタン(1)


今回はスタイルシートの話をちょっと離れて(一部関係ありますが)ホームページで使えるボタンについて考えてみます。

Windows 95 などのGUI環境に於ては、アイコンやウィンドウと並んでボタン、テキストボックス、リストボックス、ポップアップメニュー、バーなどのコントロールが重要な役割を演じています。 その中でもボタンは、あるコマンドを実行したりメニューを選んだりするときに使われる最も汎用性のあるコントロールです。

インターネットの Web ページには、文字列をクリックすると他のページにジャンプするというハイパーリンクの機能がありますが、最近は画像をクリックしてリンクページに飛ぶパターンが多くなりました。 画像自体に特別な意味がある場合は別として、単に「進む」「戻る」「GO」「BACK」といった文字を使っただけの画像なら、むしろボタンらしいボタンを作った方が面白いと言えるでしょう。

HPで使えるボタンには、大きく分けて「画像を使わないボタン」、「画像を使ったボタン」、「ボタンコントロール」の3つがあります。今回は「画像を使わないボタン」について考えてみます。

画像を使わないボタン

一般には TABLE タグを使った枠で文字列を囲みます。

<TABLE border=2 bordercolor="red" cellspacing=0>
<TR><TD bgcolor="yellow"><A href="index.html" style="text-decoration:none">ホーム</A></TD></TR>
</TABLE>

ホーム

枠の中の文字は LINK、VLINK、ALINK で指定された色になりますから、枠内の色はそれらを目立たせる色にすることが肝心です。なお、マイナーなブラウザでは枠の中に色が表示されないこともあります(枠自体は表示されます)。
bordercolor による枠の色は Internet Explorer 3.0 以上、Netscape Navigator 4.0 以上でなければ表示されません。枠の太さは border の値で調整します。Aタグに style="text-decoration:none" を加えることによってリンク文字の下のアンダーラインを消していますが、これも IE 4.0 以上、Netscape 4.0 以上です。

TABLE タグを重ねて使うと、もっと立体的でボリュームのあるボタンが出来ます。

<TABLE border=1 cellspacing=0><TR><TD bgcolor="lime">
<TABLE border=6 cellspacing=0><TR><TD bgcolor="yellow">
<A href="Tips.htm" style="text-decoration:none">HTML Tips</A>
</TD></TR></TABLE></TD></TR></TABLE>
HTML Tips
<TABLE border=5 cellspacing=0 cellpadding=3><TR><TD bgcolor="fuchsia">
<TABLE border=6 cellspacing=0><TR><TD bgcolor="aqua">
<A href="Tips.htm" style="text-decoration:none;
font-family:Times New Roman,Times Roman">
HTML Tips</A></TD></TR></TABLE></TD></TR></TABLE>
HTML Tips
<TABLE border=6 cellspacing=0 cellpadding=0><TR><TD>
<TABLE border=6 cellspacing=0 cellpadding=0><TR><TD>
<TABLE border=6 cellspacing=0 cellpadding=0><TR><TD bgcolor="white">
<A href="Tips.htm" style="text-decoration:none;font-family:Lucida Blackletter">Html Tips</A></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>
Html Tips
<TABLE border=5 bordercolor="red" cellspacing=0 cellpadding=3><TR><TD>
<TABLE border=5 bordercolor="yellow" cellspacing=0 cellpadding=0><TR><TD>
<TABLE border=5 bordercolor="lime" cellspacing=0 cellpadding=0>
<TR><TD bgcolor="white">
<A href="Exercise.htm" style="text-decoration:none;
font-family:MS 明朝,平成明朝">
頭の体操</A></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>
頭の体操

TABLE border= で指定した部分がスロープになリます。cellspacing= で指定した数値が踊り場のスペースになり、TD bgcolor= で色を付けます。cellspacing は常に0にします。一番最後の例のように TABLE bordercolor を指定すると Netscape 4.0 では色の付いたスロープとして表示されますが、IE ではスロープが打ち消されて立体感がなくなります。(逆に Netscape 3.0 では色のない単なるスロープとなります。)
style="font-family: でフォントの種類を指定しています。これが指定通りうまく表示されるのは、現状では Windows 版 IE 4.0x だけだと思います。リンク文字の代わりに <IMG src= で画像を指定することもできます。

スタイルシートを応用し、画像も TABLE タグも使わない超簡単なリンクボタンもあります。Internet Explorer 4.0x 専用です。あらかじめHTMLの </TITLE>〜</HEAD> 間に次のようにクラス定義します。

<STYLE TYPE="text/CSS">
<!--
SPAN.type1 {color: aqua}
.type2 {color: fuchsia}
-->
</STYLE>

そして本文に当たる部分では、

<A href="../links/index.html"><SPAN class="type1" onMouseOver="this.className='type2'" onMouseOut="this.className='type1'" onmousedown=this.className='type2'">●</SPAN</A> リンク集へ

 リンク集へ

これはあらかじめ黒丸の色に .type1 で定義した水色を入れ、これにマウスカーソルが触れたり(onMouseOver)、マウスを押したり(onmousedown)すると桃色に変わるように設定したものです。マウスカーソルを離したとき(onMouseOut)元の色に戻すことを忘れないように。
色は自由に設定できます。色彩名の代わりに #00FFFF、#FF00FF のように16進数で指定することもできます。(「色の設定」参照)。また●のほかに◆、■、▲、▼、★など好きな記号を使ってかわいいボタンを作ることが出来ます。

Internet Explorer 4.0x 以外では、これらは LINK や VLINK で指定した色で表示され、色の変化は起きません。

次回は「画像を使ったボタン」と「ボタンコントロール」の作り方を考えます。




次のトピックは「HPで使えるボタン(2)」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで