CJ Club TOP
/
ぷっちCGI
/スタイルシートでフォームをかざる
□ スタイルシートでフォームをかざる □
□一風変わった見栄えのフォームにしよう！(IE4以上[NN4.x でもとくに問題はなし])
00/1/21-onFocus を Focus としてたのを修正。
00/9/15-一括指定方法
01/2/19-↑で input,textarea,select{〜} としてなかったのを修正
1.お目当てのフォームがあるCGI ファイル、HTMLファイルを
テキストエディタ
で開く
まずは飾りたいフォームを探してください。検索機能などで input もしくは textarea などを探すとよいでしょう。
ここでは、<input type=submit> と <input type=text> と <textarea></textarea> のフォームをそれぞれ飾ってみたいと思います。
2‐1. <input type=submit>の場合
<input type=submit value=" 送信 ">
このタグに以下のように記述を加えます。
<input type=submit value=" 送信 "
STYLE="font-family:
ＭＳ Ｐゴシック
;font-size:
11pt
;color:
#55C230
;background-color:
#FFFFFF
;border:
1 dotted #FCB38B
;" onmouseover="this.style.backgroundColor='
#FFFACD
'" onmouseout="this.style.backgroundColor='
#FFFFFF
'"
>
（実際は改行しない方が好ましい）
すると、送信ボタンが以下のようになります。
きれいに飾られたでしょ?
上の記述したソースを説明すると、一つ目の青い部分、STYLE 内での
font-family
は文字の書体を指定します。その書体に対応していないとうまく表示されない書体もあるので気をつけてください。ので、青い部分を
ＭＳ Ｐ明朝
にしたりもできます。他は一気に説明しちゃいます。
指定
意味
例の値
font-size
フォーム内の文字の大きさ
11pt（pt は単位）
color
フォーム内の文字の色
#55C230(
■
)
background-color
フォーム内の背景色
#FFFFFF(□)
border
（3つの項目を指定）
（左）枠線の太さ
1
（中）枠線のスタイル
dotted
（右）枠線の色
#FCB38B(
■
)
backgroundColor
（先）マウスが乗ったときの背景色
#FFFACD(
■
)
（後）マウスがどいた時の背景色
#FFFFFF(□)
2‐2. <input type=text>の場合
ほとんど 2‐1 と同じでやれます。
<input type=text name=name size=25>
このタグに以下のように加えます。
<input type=text name=name size=25
STYLE="font-family:
ＭＳ Ｐゴシック
;font-size:
11pt
;color:
#55C230
;background-color:
#FFFFFF
;border:
1 dotted #FCB38B
;" onFocus="this.style.backgroundColor='
#FFFACD
'" onBlur="this.style.backgroundColor='
#FFFFFF
'"
>
（実際は改行しない方が好ましい）
すると、テキストフォームが以下のようになります。
いや〜飾られた。
説明は 2‐1 とまったく一緒なので、参考にしてカスタマイズなりしてみてください。
違うところ▽
指定
意味
例の値
backgroundColor
（先）フォーカスを得た時
#FFFACD(
■
)
（後）フォーカスを失った時
#FFFFFF(□)
2-3. <textarea></textarea> の場合
大方のよそう通り今までと同じようにできます。ただ一つ注意することは開始タグのほうに追加記述する点です。
<textarea name="comment" rows=5 cols=55 wrap=SOFT>
このタグに以下のように加えます
<textarea name="comment" rows=5 cols=55 wrap=SOFT
STYLE="font-family:
ＭＳ Ｐゴシック
;font-size:
11pt
;color:
#55C230
;background-color:
#FFFFFF
;border:
1 dotted #FCB38B
;" onFocus="this.style.backgroundColor='
#FFFACD
'" onBlur="this.style.backgroundColor='
#FFFFFF
'"
></textarea>
（実際は改行しない方が好ましい）
すると、テキストエリアが以下のようになります。
ほかのフォームにもお試しあれ！
* 色は16進数で記述して下さい。そのさい
Color16
（WIN） というソフトが便利です。
* 対応していないブラウザでは、表示が乱れる場合がありますので注意してください。
3.一括して指定
実は一括で指定する方法もあります
<style type="text/css">
<!--
input,textarea,select{
/*文字フォント*/font-family :ＭＳ ゴシック;
/*文字サイズ */font-size :10pt;
/* 文字色 */ color :#38B85B;
/* 背景色 */ background-color:#FFFFFF;
/*線の外観 */border :1 dotted #FCB38B;
}
-->
</style>
上のを<head>タグ内に入れます。意味はそれぞれ書いてある通りなので参考に変更してください。しかし結局はこれだけだと見栄えだけで、フォーカスが移動したりマウスが触れたりしてもなにも動きませんので onFocus onBlur はフォーム一つ一つ設定しなければなりません。
□
BACK