ボタン
先ずは マウスの続きになりますが、
ここでは 枠のチェンジを説明して行きます。
その応用として、ボタン（もどき?）を作ってみますね♪
普通は『INPUT』というタグがあるのですが、楽天広場では使えないので｡｡｡
*-*-* マウスを重ねて枠を表示（枠のチェンジ）
*-*-*
最初から枠を表示させ、マウスを重ねると枠が変わる方法です｡｡｡
同じ様に、基本のタグ（ マウス3参照
）に『 border:▲1
』を追加します。
<a href="http://～" style=" border:▲1
;color: ■
;font-size: □
;text-decoration:none;"
onMouseOver=style.border=" △ " onMouseOut=style.border=" ▲2 " target="_blank">
ここに文字
</a>
onMouseOver=style.border=" △ " onMouseOut=style.border=" ▲2 " target="_blank">
ここに文字
</a>
| ▲1 | 始めに表示される枠の種類 |
| ■ | 文字の色 |
| □ | 文字の大きさ |
| △ | マウスを重ねた時の枠の種類 |
| ▲2 | マウスを重ねた後の枠の種類（有無） |
ここで違う所は、
『始めに表示されている枠』『マウスが重なった時の枠』『マウスを外した時の枠』
この3種の設定をする事です。
それぞれ変えてもイイですし、マウスが重なった時のみ違う枠でもＯＫ！
とりあえず見てみましょうｖ
では 文字の色（ ■ ）を『#ff69b4』・文字の大きさ（ □ ）を『15』
マウスを重ねた時の枠の種類（ △ ）を『dotted』
初期状態と重ねた後の枠の種類（ ▲1・2 ）を『solid』にして見てみましょう。
枠の種類はココを見てね♪
こんな感じです｡｡｡ (＾-＾)
*-*-*ボタン（もどき?）*-*-*
上記の応用として、枠の種類を変えてみましょう。
始めに表示させる枠（ ▲1
）と 重ねた後の枠（ ▲2
）を、同じ『outset』にし、
マウスを重ねた時（ △
）は『inset』になるようにしてみます。
では見てみましょう｡｡｡
枠の種類はココを見てね♪
ボタンのように見えてきたでしょう？！(笑)
*-*-* ボタン（もどき?）背景色付き
*-*-*
では、背景色を入れてみましょう｡｡｡
追加するのは『 background-color:★
』で、
ｓｔｙｌｅの中に入れ「セミコロン（；）」で繋ぎます。
<a href="http://～" style=" background-color:★
;border:▲1;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲2" target="_blank">
ここに文字
</a>
onMouseOver=style.border="△" onMouseOut=style.border="▲2" target="_blank">
ここに文字
</a>
背景色（ ★ ）は、IEで定義されている『#c0c0c0』にし、
文字の左右に 全角のスペースを取って見てみましょう。
枠の種類はココを見てね♪
*-*-* ボタン（もどき？）背景画像付き
*-*-*
最後に、背景画像を入れてみたいと思います。
『 background-color:★
』の代りに『 background:url( ●
)
』を追加します。
↓ここで使うタグはコレ
<a href="http://～" style=" background:url( ●
)
;border:▲1;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲2" target="_blank">
ここに文字
</a>
onMouseOver=style.border="△" onMouseOut=style.border="▲2" target="_blank">
ここに文字
</a>
● の所に、背景にする画像を指定します。
画像の倉庫から『img src="http～***"』のみをコピー＆ペーストします。
ここで気を付ける事は、 ● 以外は消さない事！
前後の（ ）を消すと、読み込みが出来ませんｘｘｘｘ
それでは見てみましょう♪
枠の種類はココを見てね♪
ここでもリンクタグ（a）で説明しましたが、リンク先がない場合、
つまり リンクを張らない時には、
『font』・『/font』もしくは『p』・『/p』に変更してもOKです。
次はボタンのアレンジとして、 『ヒストリー』
を紹介します。
© Rakuten Group, Inc.
