(補足)
いろんな、ボタンを使うタグと合わせて使ってね。(試しに8−2.ボタン(押すと…編)と合わせて使ってみてね。) onclick= の前に style= 以降を付けてね。スペースで区切るのも忘れずにね。
(もちろん、 > は、いらないよ)詳しくは、8−2.を見てね。
要は、onClick="〜〜" の部分がボタンを押した時の動作を表すタグです。
半角の ; で1項目なので、必要に応じて項目を削ったり、加えたりする事も出来ます。
ボタンの文字を改行する場合は、半角の が <br> の役目を果たして、改行タグになります。
(例)おっは〜 おやすみぃ〜(ボタンの文字の場合) = おっは〜<br>おやすみぃ〜(通常の場合)
(注1)文字の太さは、100〜900の間で、100刻みに(100・200・300・・・900)指定してくださいね。また、100が一番細く、900が一番太くなります。
(注2)これは、他のタグとボタンの組み合わせですので、詳しくは、1−2.文字や、3.文字の装飾を見てみてね。
↓枠の形をここから選んでね。
実線 :solid
二重線 :double
丸い点線 :dotted
四角い点線 :dashed
内沈み線 :inset
内浮き出し線:outset
山線 :ridge
谷線 :groove
赤い文字の部分を変更してコピー貼り付けで使ってね! | |
---|---|
普通のボタン | <input type="button" value="ボタンの文字"> |
色付きのボタン | <input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色"> |
ボタンの文字の太さを変える(注1) | <input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠の色;font-weight:文字の太さ"> |
ボタンの文字の書体を変える | <input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-family:文字の書体"> |
ボタンの大きさを変える | <input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpt;border-width:枠の太さpx"> |
ボタンの枠を変える | <input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;border-width:枠の太さpx;border-style:枠の形"> |
ラジオボタン | <input type="radio" name="ボタンの識別名"> |
チェックボタン | <input type="checkbox" name="ボタンの識別名"> |
ONマウスで背景色が変わるボタン | <input type="button" value="ボタンの文字" style="background-color:#元の背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色'"> |
離すとさらに背景色が変化 | <input type="button" value="ボタンの文字" style="background-color:#元の背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色'" onmouseout="this.style.backgroundColor='#マウスを離した時の背景色'"> |
ONマウスで文字色が変わるボタン | <input type="button" value="ボタンの文字" style="color:#元の文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.color='#ONマウスの文字色'"> |
離すとさらに文字色が変化 | <input type="button" value="ボタンの文字" style="color:#元の文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.color='#ONマウスの文字色'" onmouseout="this.style.color='#マウスを離した時の文字色'"> |
ONマウスでボタンの文字が変わる | <input type="button" value="最初のボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.value='ONマウスのボタンの文字'"> |
離すとさらに文字が変化 | <input type="button" value="最初のボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.value='ONマウスのボタンの文字'" onmouseout="this.value='マウスを離した時のボタンの文字'"> |
ONマウスでボタンの大きさが変わる | <input type="button" value="ボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.fontSize='ONマウス時の大きさpx'"> |
離すとさらに大きさが変化 | <input type="button" value="ボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.fontSize='ONマウス時の大きさpx'" onmouseout="this.style.fontSize='マウスを離した時の大きさpx'"> |
ONマウスで背景色・文字色・文字・大きさが変わるボタン | <input type="button" value="元のボタンの文字" style="background-color:#元の背景色;color:#元の文字色;border-color:#枠色;font-size:元のボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色';this.style.color='#ONマウスの文字色';this.value='ONマウスのボタンの文字';this.style.fontSize='ONマウス時の大きさpx'"> |
離すとさらに背景色・文字色・文字・大きさが変化 | <input type="button" value="元のボタンの文字" style="background-color:#元の背景色;color:#元の文字色;border-color:#枠色;font-size:元のボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色';this.style.color='#ONマウスの文字色';this.value='ONマウスのボタンの文字';this.style.fontSize='ONマウス時の大きさpx'" onmouseout="this.style.backgroundColor='#マウスを離した時の背景色';this.style.color='#マウスを離した時の文字色';this.value='マウスを離した時のボタンの文字';this.style.fontSize='マウスを離した時の大きさpx'"> |
ONマウスで消えるボタン | <input type="button" value="ボタンの文字" onmouseover="this.style.visibility='hidden'"> |
マウスを離すと消えるボタン | <input type="button" value="ボタンの文字" onmouseout="this.style.visibility='hidden'"> |
画像のボタン | <button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx"><img src="画像のURL" alt="画像が出ない時の代替の文字"><br>ボタンの文字</button> |
文字が流れるボタン(注2) | <button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx"><marquee>ボタンの文字</marquee></button> |
文字が流れるボタン(上下左右編)(注2) | <button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:文字の大きさpx;border-width:枠の大きさpx"><marquee height="ボタンの縦幅" width="ボタンの横幅" direction="up OR down" behavior="alternate" scrollamount="上下の動く速さ"><marquee direction="left OR right" behavior="alternate" scrollamount="左右の動く速さ">文字</marquee></marquee></button> |
文字が装飾されたボタン(発光)(注2) | <button type="button" style="background-color:#背景色;border-color:#枠色;border-width:枠の大きさpx;height:ボタンの縦幅;width:ボタンの横幅"><font style="filter:glow(color=#発光色);width:100%;font-size:文字の大きさ;color:#文字色" face="文字の書体"><b>文字</b></font></button> |
文字が装飾されたボタン(立体影)(注2) | <button type="button" style="background-color:#背景色;border-color:#枠色;border-width:枠の大きさpx;height:ボタンの縦幅;width:ボタンの横幅"><font style="filter:shadow(color=#影の色,direction=135);width:100%;font-size:文字の大きさ;color:#文字色" face="文字の書体"><b>文字</b></font></button> |