HTMLタグ > フォーム：ボタン

　 HTMLタグ > フォーム：ボタン

ボタンにはいろんな働きをするものが作れますが、装飾のしかたはだいたい同じです。
ここでは、装飾をメインに紹介します。

フォームは、入力するもの、それを送信するものやクリアするものなどを1セットとして、 <form>と</form>で囲みます。
<form>の前と</form>の後ろは改行2つ分が自動で入ります。
改行しないようにする方法は、こちらへどうぞ。

基本のボタン
リンクの機能のボタンを例にします。

ボタンを装飾するには、<input～>の < > 内に、以下のタグを追加します。

ボタンの文字を変える

style="font:【サイズ】pt 【フォント】;color:【色】;"

サイズだけなら「font:○pt」で、フォントだけなら「font-family:○」でも可。
フォントは2種類以上指定する場合は「,」で区切ります。

それ以外に、太字にする「font-weight:bold」が使えますが、斜体にできそうな「font-weight:italic」は使えないようです。

ボタンの背景色を変える
指定のないときは薄いグレーになります。
色を入れず、「none」と入れると背景がなくなり、こんな感じで下の色や壁紙が透ける状態になります。

style="background:【色】;"

ボタンの枠を変える

style="border:【太さ】【色】【スタイル】;"

枠は「border」の代わりに以下のタグを使って、上辺、下辺、左辺、右辺を別々に装飾することもできます。

上辺	border-top	左辺	border-left
下辺	border-bottom	右辺	border-right

または、太さを「border-width」、色を「border-color」、スタイルを「border-style」として単独での指定もできます。
これを使うとき、半角スペースをあけて4つ並べると、「【上辺】【右辺】【下辺】【左辺】」の順に指定できます。

ボタンの背景に画像を使う

style="background-image:url(【画像】)"

ボタンのサイズを変える

style="width:【幅】; height:【高さ】";

ボタンの大きさを変える場合は、枠を装飾しないと汚くなります(´・ω・｀)

ボタンにマウスカーソルをのせると、ボタンの背景色が変わる

style="background:【マウスがのる前の色】"
onmouseover="this.style.backgroundColor='【マウスがのった後の色】'"
onmouseout="this.style.backgroundColor='【マウスが離れた後の色】'"

「backgroundColor」の「C」は大文字でないとだめのようです。

ボタンに文字を流す

普通のボタンと少し形式が違います。
マーキーを使うと「value=○」は無効になります。
文字や背景、枠を装飾する場合は、装飾のタグを<button～>の < > 内に入れます。

リンクボタン以外の場合は、<input type=button～>に入っているタグを<button～> の < > 内に入れてこの形式にすればいいのかな。
時間見付けて、追加しておきますm(_ _)m
報告下さる方いらっしゃれば感激(ノ_<。)

マーキーを使うと、幅が長めになる仕様のようです。

「HTMLタグ」のトップに戻る

　　サイト案内