目次へ戻る３ |
フォント |
６ |
部分的に背景色を変えよう |
次は背景色を変えてみよう。
JavaScriptでも背景色を変える方法があったよね。
でも、あれは背景全体の色を変えることしか出来なかったよね。
一部分だけの背景色を変えたいとき、それがこの命令なんだ。
何度も出てきてわかると思うけれど、
このDHTMLの命令の多くは、
★.style.命令
の形が多いよね。
形さえ覚えてしまえば、今回の命令はbackgroundだけ覚えてもいいよね。
さて、今回のサンプルは背景色のほかに文字の色も一緒に変えてやろう。
背景色を変える命令と、フォントの色を変える命令をいっしょにしないといけないね。
onmouseover=""等の中に入れているものはプログラムなので、
JavaScriptでも出てきた、命令と命令を区切る";"という記号を入れればいいんだ。
つまり、下の例のように
this.style.background = "" ; this.style.color = "" ;
とすればいいんだよ。
| <SPAN onmouseover="this.style.background='yellow';this.style.color='red';" onmouseout="this.style.background='';this.style.color='';">ヨッシーのホームページを作ろう！</SPAN> |
これを実行すると、
| ヨッシーのホームページを作ろう！ ↑文字の部分だけ背景色が変わって、さらに中の文字の色も変わるよ |
このように、文字の部分だけ背景色を変えることができるんだ。
今までのフォントを変える命令をいろいろと組み合わせて<A HREF="">の中で使えば、現在指しているリンクの形を変えてわかりやすくしてあげることができるね。
（※もちろん、今のようにタグ自体にはめ込んでもいいが長い命令の場合は関数を作って呼び出そう。）
ここで基本編は終わりです。
目次へ戻る
フォントの大きさを変える