おなか痛い・・・。
こんばんみ、
僕は昔っからおなかが弱いのです。
さて、本日は驚きがあったのでメモ。
ずーっと、Javascriptでしかできないと思ってたことが
HTML,CSSでできたんです。
マウスオーバーってやつですね。
あるところにカーソルを持っていったら
色変わったり、画像変わったりってやつ。
ということでメモ。
やりたかったことは
・メニューバーを作る。
・カーソルを合わせたら、文字色、背景色が変わる。
です。
メニューバーはちゃちゃっと
<table>～</table>でいきました。
次にメニューバーということは
裏にリンクが貼ってあるわけで・・・。
第一関門。
・青文字
・下線リンク
うん、やだ。
なんか一般的、というか
通常は黒文字のみ、
カーソル合わせるとそこだけ
四角い黒の背景になり、白文字になる。
下線は削除は
text-decoration: none ;
これでいけました。
次は青文字を、黒にしたい。
ただのカラー指定ですね。
color : #0C0C0C ;
これ。
(color : brack ; ってないんだっけ・・・できなかったです。redはできたのに。)
でもこれだけだと、
文字のみでなんかへん。
もっとこう、画像じゃないけど
枠がある、というか四角く黒いのだしたい。
そこでpaddingですね。余白をつくります。
特に他にリンクがなかったので、.cssファイルで
a{}で記述しました。
結果これ。
a {
text-decoration: none ;
color : #0C0C0C ;
padding : ～px ;
}
これでリンクのほうはできたので
次はマウスを乗っけたときの要素。
a:hover.(class名){
}
だったんだな。
ここで、colorとbackground-colorで色指定。
そしてあとは、最初に書いた<table>の
<th>や<td>に上の(class名)を書くだけ。
はい、でけました。
これにはほんと驚き。
HTML,CSSだけで
動的(？)なアクションができちゃうんですね。
今後使いそうなのでメモでした！
それでは。
