IE6以下で<a>以外にも:hoverを利用

| 2007年12月10日 00:55

Web creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]のすぐに使えるCSSデザインテクニックネタ。

IE6以下ではa要素以外の:hoverや:activeをサポートしていないのでCSSで見た目を変化させようとしてもできないが、IE独自のビヘイビアを利用することでIE6でも:hoverや：activeができるようになるという。

試してみたが恐ろしく簡単な手順で恐ろしく使えることがわかって眠気がぶっ飛んだ。

手順は下記の3ステップ

  1. .htcファイルのダウンロード
  2. MIMEタイプの設定
  3. CSSの設定

1. .htcファイルのダウンロード

世の中にはいろいろなhtmlコンポーネントがあるようだが、とりあえずは:hoverなどの擬似クラスを拡張してくれる「csshover.htc」を利用してみよう。

ダウンロードページ
whatever:hover

上記ページから

  • Version 1.42.060206 (:hover and :active)
  • Version 2.02.060206 (1.42 and :focus)

の2つをダウンロードしておこう。ダウンロードファイルを解凍すると「csshover.htc」と「csshover2.htc」が出てくるが1.x系が:hoverと:activeをa以外にもbody内のすべての要素で利用できるようにするもので2.x系が:focusをa,input,textareaで利用できるようにするものらしい。目的に応じてサイトにコピーしよう。

2. MINEタイプの設定

専用サーバならconfファイルとかで設定するのだろうか？共有サーバの場合は.htaccessが利用できれば設定可能だ。おそらく有料のホスティングサービスなら大抵設定できると思われる。.htaccessに下記一文を追記してUPしましょう。

AddType text/x-component .htc

3. cssの設定

body 以下の要素に適用するにはcssに下記のように記述する。


body {
	behavior: url("/ファイルまでのパス/csshover.htc");
	behavior: url("/ファイルまでのパス/csshover2.htc");
}

cssからのパスではなくcssを呼び出すファイルからのパスになるのでドキュメントルートからのパスで設定したほうがよいです。

これで準備は完了。あとは下記のようなソースで利用できます。

HTMLサンプル


  <table>
  <thead>
  <tr>
  <th>ファイル名</th>
  <th>効果</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <th>擬似クラス拡張</th>
  <td>csshover.htc</td>
  </tr>
  <tr>
  <th>csshover.htc</th>
  <td>:hover、:activeをすべての要素で</td>
  </tr>
  <tr>
  <th>csshover2.htc</th>
  <td>:focusをa、input、textareaで</td>
  </tr>
  </tbody>
  </table>
  
  <br />
  
  <input type="text" /><br />
  <textarea></textarea>

CSSサンプル


  tbody tr:hover {
  background-color: #FFCC00;
  }
  tbody tr:active {
  background-color: #00CCFF;
  }
  input:focus {
  background-color: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
  font-size: 2em;
  }
  textarea:focus {
  background-color: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
  padding: 10px;
  height: 200px;
  width: 200px;
  }

実行結果

ファイル名 効果
擬似クラス拡張 csshover.htc
csshover.htc :hover、:activeをすべての要素で
csshover2.htc :focusをa、input、textareaで


確認したところIE6、Multiple Explorers の5.01、5.5で動作しました。macIEでも動作しそうですね。

これでフルCSSのプルダウンとかも簡単に作成できそうです。

またWeb creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]には同じように透過PNGをサポートしてくれる.htcもかかれてます。

IE6以下で<a>以外にも:hoverを利用タグ:

トラックバック
  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/198
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?

このサイトは次のライセンスで保護されています。

Creative Commons License

Kantenna by Kantenna_Admin is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Japan License.
IT業界、エンジニア関連の求人
Web業界に精通したエージェントなので、希望に合った仕事、プロジェクト、雇用形態を紹介してくれてしっかりと転職活動をサポートしてくれます。
初心者のみ採用！【スノーグラス】ＷＥＢ系エンジニア募集
初心者のみのweb系エンジニア求人!なんでだ?そろそろ転職考えてるのでここ行ってみようかな・・・
Twitter Updates