Nuts Choco Web Design - 情報誌 -

ウェブ製作で困ることはいくつかありますが、その中でも非常に困る点としては複数のOSやブラウザの動作検証を行うのが難しいといったことではないでしょうか？

現在、ブラウザが多様化されています。その多様かされた複数のブラウザの中でも、OSやバージョンによっても動作や表示が異なります。これは製作者にとって非常に悩みの種であると思われます。

まさか、以前のIEの動作検証を行うために、Windows 95 をインストールするわけにもいかないと思います。今回は、IEに絞って Multiple IE といったものを紹介します。

このソフトウェアは現在、WindowsにインストールされているIEのバージョンに影響を受けたり、上書きすることなく、複数バージョンのIEの動作確認が行えるようになります。IE 3.0 - 6.0 までのバージョンがありますので、あらかじめ Windows のIEはバージョン 7にしておくとすべてのバージョン確認ができますね。ただし、Microsoft から提供しているソフトウェアではなく、意図しない問題が発生する可能性もありますので、自己責任でご利用ください。あと、表示メニューはすべて英語です。日本語版は現時点でありません。

Download Multiple IE installer(10.3MB) 

以下は英語の説明のサイトですが、あらかじめ一読されることをお勧めします。

Install multiple versions of IE on your PC

インストールが完了すると、以下のような画面が表示されます。

 

マウスオーバーの動作を行うと、リンクのボタンの色や画像が変わるような動作を作る場合はJavaScriptを使うことがあります。ただ、クライアントによっては最初からJavaScriptを無効にしていることがあり、正常にリンクの動作も行われない可能性があります。今回はCSSを使ったリンクボタンについて説明します。HTMLで以下のようなリンクと画像をあらかじめ作成しておきます。

【HTMLタグ】
<ul id="test">
 <li id="test1"><a href="#">test1</a></li>
 <li id="test2"><a href="#">test2</a></li>
</ul>

【ボタンの画像】


上記の設定でスタイルシートを以下のような記述にすることで
リンクボタンが動的に動いている感じのものが作成できます。

【スタイルシート】
/*基本設定*/
#test { height: 25px;list-style-type: none;}
#test li {float: left;width: 60px;}
#test li a {display: block;overflow: hidden;width: 100%;height: 0 !important;height /**/:25px;
padding-top: 25px;background-image: url(test.jpg);}
/*画像指定*/
#test1 a { background-position:  0     0; }
#test2 a { background-position: -60px  0; } 
/*マウスオーバーの画像指定*/
#test1 a:hover { background-position:  0     -25px; }
#test2 a:hover { background-position: -60px  -25px; }

【説明】
1.list-style-type:none でリストタグの「・」を無効にします。
2.float: left で配置を指定します。
3.display: block; で A リンクの属性を文字箇所以外もクリックできるようにblock に変更します。
4.background-position:  0     0; は横方向 0 の上方向 0 の画像を表示させる
5.background-position: -60px  -25px; は横方向 65px の上方向 25px の画像を表示させる

完成はこちら