【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）｜クロノドライブ
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
ロールオーバー画像の実現方法
今回は「ロールオーバー画像の実現方法」についてお話します。 ロールオーバー画像は、 グローバルナビ、サイドメニューなどの ボタンリンクによく使用されています。 ホームページをコーディングする際には 決して避けては通れない、 不可欠な技術と言えます。 JavaScriptなどで実現する方法もありますが、 cssプログですので、 もちろんcssによる実現方法を ご紹介します。 私からは ・直接画像を置く方法 ・テキストの置き換えを使った方法 の2パターンご紹介します。 直接画像を置く方法 ボタン画像をdivなどで囲み そのボタン画像を囲んだdivの背景に ロールオーバー時の画像を設定します。 わかりにくいですが、ボタンを囲んだものの背景に ロールオーバー時の画像を設定することで ボタンの下に、ロールオーバー時の画像が 隠れている状態です。 そして、ボタンをマウスオーバーした際に、 ボタンの表示
縦メニューを画像1枚、ロールオーバー実装するCSS | ネットショップ立ち上げ備忘録
上記のような画像を作成してCSSのみで縦メニューを一枚画像で作成する場合のメモ。 横メニューが一般化している昨今ですが、左メニューレイアウトを採用する場合もまだあると思います。 今回の利点は ・text-indentを使用しない ・htmlのソース上で<img>タグを使用しない ・画像一枚で実装するため、複数画像で実装するより読み込みが早くなる という感じかなと思います。 実験していないので勝手な予想ですがSEOで考えるとtext-indent:-9999px多用はあまりよろしくないかもと思っているのでもしかしたらSEOにも良いかもしれないのかな！？ ・実際のサンプル（1枚画像のサイズは横200px 縦150pxでメニュー1項目のサイズはw100px h50pxです） Top About Service ・html <div id="navitest"> <ul> <li id="top"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
