装飾されたボタンの作成方法
アイコン（画像）を含められるようなボタンは、HTMLのinput要素ではなく、button要素を用いて作ります。
たいてい、フォーム中のボタンはinput要素を用いて作成するでしょう。例えば以下のように記述します。
<input type="reset" value="リセットボタン">
<input type="button" value="汎用ボタン">
アイコンや装飾された文字列を加えたボタンを作るには、input要素の代わりにbutton要素を使います。例えば以下のように記述します。
<img src="redball.gif" width="30" height="30" alt="色玉"><br>
<span style="font-weight:bold;">送信ボタン！</span>
</button>
上記のソースを表示すると、以下のように見えます。
ボタン表示例（※上記は画像で掲載しています。）
上記の例からも分かるとおり、button要素に含んだ内容（＝<button>～</button>の中身）が、そのままボタン表面に表示されます。 br要素を使えば改行も可能です。
type属性の値は、「 submit 」・「 reset 」・「 button 」の3種類が指定でき、それぞれ「送信ボタン」・「リセットボタン」・「汎用ボタン」になります。 この点は、input要素で作るボタンと同じです。
button要素の内容に、画像を表示させるimg要素を記述すれば任意の画像をボタンの表面に表示させられます。 装飾された文字列を記述すれば、その文字列をボタンの表面に表示させられます。
文字列よりも画像を先に記述すれば、画像を上や左に表示させられます。順序を逆にすれば、画像を右や下に表示させられます。
例えば、文字を青色の斜体にして、アイコンを下側に表示させた「送信ボタン」を作るには、以下のように記述します。
<span style="color: blue; font-style: italic;">送信ボタン！</span><br>
<img src="redball.gif" width="30" height="30" alt="色玉">
</button>
上記のソースを表示させると、以下のように見えます。
ボタン表示例（※上記は画像で掲載しています。）
おわりに
今回は、アイコンや装飾された文字列を表面に表示できるボタンの作り方をご紹介いたしました。
役割を示すアイコンと一緒に使えば、一目で効果を把握できる分かりやすいボタンが作れるかもしれません。 ぜひお試し下さい。
【関連記事】
