Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.78 - フォームの背景色や文字色を変更する


スタイルシートをつかって、フォームの背景色や文字色を変えてみます。


Step テーマ
● フォームに色を付ける (CSS)

実行例


更新履歴



リスト

<head>
<style type="text/css"><!--
.formcolor{ background-color:#E6E6FA; color:#4b0082; }
--></style>
</head>
<body>
<form>
<textarea CLASS="formcolor" rows="4" cols="50">
04/20 STEP.78 を追加しました
03/03 STEP.77 を追加しました
02/25 STEP.76 を追加しました</textarea></p>
</form>
</body>

サンプルだけの HTMLは こちらへ

説明


[Ｑ] フォームに色をつけたいのですが
[Ａ] IE4 以上, NS6 以上なら、CSS で できます。

フォームの文字色や背景色は、IE4以上、NS6以上であれば、スタイルシートが使えます。

STYLE属性で一つ一つ設定するもよし、サンプルのようにCLASS属性で設定するもよし、特にフォームだからと特殊なことはしません。
普段通り CSS で設定すれば OK です。

CLASS属性というのは、
<style type="text/css"><!--
.formcolor { background-color:#E6E6FA; color:#4b0082; }
--></style>
 このように、<STYLE>タグに、formcolor という自分でつけた名前で設定しておいて、このスタイル設定にしたいタグに、
<textarea rows="4" cols="50" class="formcolor">
04/20 STEP.78 を追加しました
03/03 STEP.77 を追加しました
02/25 STEP.76 を追加しました
</textarea>
 このように指定します。あちこちに、同じスタイルを使う時に便利ですね。
この <STYLE>タグは、<HEAD>~</HEAD>タグ内に書き込みます。


STYLE属性というのは、
<textarea rows="4" cols="50" style="background-color:#E6E6FA; color:#4b0082;">
04/20 STEP.78 を追加しました
03/03 STEP.77 を追加しました
02/25 STEP.76 を追加しました
</textarea>
 このように、タグに１つ１つスタイルを指定します。
ココだけ、特別に このスタイルという時は、こっちのやり方ですね。


スタイルシート(CSS) の基礎説明は、STEP.41、42 を参照下さいませ。

▲TOP

Q&A


[Q] スクロールバーの色を変更するのは、どうするのですか？
[A] IE か OP であれば、スタイルシートで変更できます。
<style type="text/css"><!--
.scrlbar{
background-color : #E6E6FA;
color : #4b0082;
scrollbar-3d-light-color : red;
scrollbar-arrow-color : green;
scrollbar-base-color : blue;br> scrollbar-dark-shadow-color : yellow;
scrollbar-face-color : cyan;
scrollbar-hightlight-color : mazenta;
scrollbar-shadow-color : orange;
}
--></style>

scrollbar-3dlight-color : white ;

scrollbar-arrow-color : white ;

scrollbar-base-color : white ;

scrollbar-darkshadow-color : white ;

scrollbar-face-color : white ;

scrollbar-highlight-color : white ;

scrollbar-track-color : white ;

scrollbar-shadow-color : white ;

▲TOP

Q&A


[Q] Step.25のコンボボックスに色をつけたいのですが
[A] SELECTタグにスタイルシートを指定します。(ボタンにも使えるよ！)
<form name="myForm">
<select name="myMenu" class="formcolor">
<option value="index.htm" >☆☆ イヌでもわかるJavaScript講座 目次 ☆☆</option>
<option value="hajimeni.htm">はじめに</option>
<option value="step1.htm" >Step.1 いきなりJavaScriptを使ってみましょう</option>
<option value="aisatu.htm" >Step.2 あいさつ文を表示してみましょう</option>
<option value="getdate.htm" >Step.3 現在の日付と時間を表示してみましょう</option>
</select>
<input class="formcolor" type="button" value="GO!" onClick="myGo()">
</form>

▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP