CSSでマウスオーバー時のボタン画像を切り替える：Ultimate Interface：So-netブログ
マウスオーバー時の画像切り替えのアクションは、CSSが主流になる前まではjavascript等で実現していたのですが、 最近はほとんどCSSで切り替えるテクニックが使われているように思います。 代表的な例が、text-indent にマイナス値を入れてテキストをどっかに飛ばし（隠し）、 background にオンとオフをひとまとめにしたボタン画像を埋め込み、:hover でスライドさせるテク。 Dave Woods - HTML, CSS, Web Design - [サンプル] 実装が簡単なうえ、オンとオフ２つのボタンが一つの画像ファイルになっているのでサーバへのアクセス負荷軽減等のメリットがあります。 じゃあ、デメリットは？ ブラウザ設定で画像を非表示にした状態で見ると、画像どころかテキストさえも表示されません。 もしこれがサイトにおける重要なメニューだとしたら、最悪です。 代替方法
リンク画像の枠線を消す
バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。 消去前 消去後 １．スタイルシート（styles-site.css）に設定 まず、タイプセレクタで img 要素に枠線を与えない設定を行います。 img { border-style:none; } または、子孫セレクタで a 要素の子孫要素である img 要素に設定を与える方法です。上記の場合は全ての画像にスタイルが適用されますが、この方法であればリンク画像のみにスタイルの設定を与えることができます。 a img { border-style:none; } さらに、img 要素に class 属性 または id 属性を与えて、クラスセレクタ・一意セレクタで指定すれば画像によってリンクのあり・なしを振り分けることができます。以下はクラスセレクタの例です。 .no_border
CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イメージCSSロールオーバー
サービス終了のお知らせ