タグ素材応用４(テーブルボタンカラー編)/HTMLタグ素材集

タグ素材応用４
(テーブルボタン編)

管理人お勧めのポイントを本当に現金に出来たサイト＆アプリ
モッピー	トリマ

テーブルボタンを使いたいけど色が合わないという方
今回はテーブルボタンの色を自分のホームページに
合ったカラーに変更してみましょう。

分かり易いように例として「テーブルボタン２」を使用します。

マウスをのせると色が変わるテーブルボタン２

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ff0080;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

イメージとしては文字の色を「白」背景色を「緑」マウスをのせると「青」に変わり
マウスを離すと元の背景色の「緑」に戻るという色合いにします。

まず文字の色を変えてみましょう。
カラーコードはカラーパレットの中から選べます。

文字の色はタグの<a href="ページＵＲＬ" style="color:#ff0080;"
の部分の#ff0080を白の#ffffffに変えるだけでＯＫです。

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ff0080;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
の文字の色を白くすると

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ffffff;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
白い背景に白い文字では見えないので次に背景を緑にします。

背景色を変えるには<tr><td bordercolor="#45607a" bgcolor="#ffffff"
の#ffffffを緑色の#009500に変えます。

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ffffff;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
の背景色を緑にします

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#009500" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ffffff;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
背景色が緑になりましたがマウスをのせて離すとまた白に戻ってしまうので
次はマウスをのせると青、マウスを離すと緑に戻るようにしてみます。

マウスをのせたり、離したりして色を変えるには

マウスをのせると色が変わる onmouseover="this.style.background='#ffff00'"
マウスを離すと色が変わる onmouseout="this.style.background='#ffffff'"
の2箇所のカラーコードを青の#0080ffと背景色と同じ緑の#009500に変えます。

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#009500" align=center onmouseover="this.style.background='#ffff00'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#ffffff;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
をマウスをのせて青に onmouseover="this.style.background='#0080ff'"
マウスを離して緑に onmouseover="this.style.background='#009500'"にします

テーブルボタン２

<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#009500" align=center onmouseover="this.style.background='#0080ff'" onmouseout="this.style.background='#009500'">
<a href="ページＵＲＬ" style="color:#ffffff;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ボタンの文字</div></a>
</td></tr></table>

↑
これで完成です♪

＝＝補足説明＝＝

このようなテーブルボタンの場合は
<div style="border:thick dotted ff80c0;width:30;">
のカラーコードff80c0を変えることで
点線や破線、二重線といった枠の色を変えられます。
(マウスで背景色などを変えるのは上記説明と同じです。)

テーブルボタン８

テーブルボタン７

tablebutton9

<div style="border:thick dotted #ff80c0;width:30;">
<table border="0" cellspacing="0" cellpadding="2" width="80" height="100">
<tr><td bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffffbf'" onmouseout="this.style.background='ffffff'">
<a href="ページＵＲＬ" style="color:#ff80c0;font-family:富士ポップ;text-decoration:none;font-size:15px;width:100%;">
ボタンの文字</div></a>
</td></tr></table></div>

↑
の枠の色を青(#0080ff)にします

テーブルボタン７

別カラーバージョンはこちら

<div style="border:thick dotted #0080ff;width:30;">
<table border="0" cellspacing="0" cellpadding="2" width="80" height="100">
<tr><td bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffffbf'" onmouseout="this.style.background='ffffff'">
<a href="ページＵＲＬ" style="color:#ff80c0;font-family:富士ポップ;text-decoration:none;font-size:15px;width:100%;">
ボタンの文字</div></a>
</td></tr></table></div>

ネットのお財布　イーバンク銀行