文字に機能を持たせよう
スタイルシートで文字の装飾と機能化を学ぼう。
■１■ 文字のバックをカラフルにっ♪
ちょいと文字のバックに色を付けてみたいって方はスタイルシートで仕上げましょう。
* Ｍｉｓｔｅｒ-ＯＺ * こんな感じに仕上がります。
* Ｍｉｓｔｅｒ-ＯＺ * 文字サイズや色を変えることも出来ます。
<FONT STYLE="font-size:20px;color:white;background:olive">
* Ｍｉｓｔｅｒ-ＯＺ *
</FONT>
|
ホームページのレイアウトやバランスに応じて調整してお楽しみ下さい。
■２■ 色を重ねちゃうっ♪
色の付けた文字を重ねる技を使ってみましょう。
Ｍｉｓｔｅｒ-ＯＺ こんな感じに出来ちゃうんです。
Ｍｉｓｔｅｒ-ＯＺ 文字サイズや色を変えた感じも確認ください。
<SPAN STYLE="width:180;height:30;font-size:20pt;color:blue;
text-shadow: -2px -2px 0px pink, 2px 2px 0px pink;">
Ｍｉｓｔｅｒ-ＯＺ
</SPAN>
|
色の部分は色名前（blue）でもコード番号（#0000FF）でも問題ありません。
■３■ 文字に触れたら台詞が飛び出すっ♪
文字の上にカーソルが来たらメッセージを出すという機能化をご覧ください。
◎Mister OZからのメッセージ◎ ←この文字にカーソルを当ててみましょう。
<A href="#" onmouseover='alert("やあ o(^-^)o 頑張ってね");'>
<FONT STYLE="font-size:20px;color:red">
◎Mister OZからのメッセージ◎</FONT></A>
|
面白い技ですが、あんまり乱発するとかなりウザいです。ご注意を。
■４■ ひっそりと台詞を差し出すっ♪
飛び出すっていうのが大袈裟で嫌だなあって方はひっそりとご挨拶する方法もありますよ。
<TABLE><TD width="200">
<A href="#" onmouseover="msg.innerHTML='やあ o(^-^)o 頑張ってね'"
onmouseout="msg.innerHTML=''"><FONT color=oblue size=4>
◎Mister OZからのメッセージ◎</font></A></TD>
<TD><SPAN ID="msg"></SPAN></TD></TABLE>
|
こんな風にね。これなら煩がられないで済むかな....。
いろいろな組み合せでスタイルシートの文字表現を楽しんでくださいね。
|