20200629　ナビゲーション設定のまとめ

①CSSでbackground-imageの切替えを用いた方法　

使用するもの　a:hover

CSSに背景画像としてボタンの画像を設定するので、HTMLに手を加える必要性がない。

印刷時に画像が表示されないことがあるらしい。

使用するもの　text-indent:-9999 、a:hovor、background-position:0 0

ロールオーバー前後の画像が１枚にまとめられているため、画像の読み込みが発生しない。

画像の貼り付け回数が減る。

１枚にまとめた画像を用意する必要がある。

画像の用意が大変かも

使用するもの　img:{opacity:0.1~1の値;}

オンマウス時に背景色を透過させる方法

背景画像の設定が必要なくシンプルなため、設定が簡単。

凝ったものができない。

4つ方法のうちで一番楽にロールオーバー設定ができるのはこれかも。

CSSで実装する手間が省ける。

フォームボタンで使用するinputタブで使用可。

JSの表示を非表示にしている閲覧者は表示されない可能性がある。