どれが一番いいリストなのか
ご質問で「画像置換を使ったリストをフロートさせるとおかしくなる」という内容がございましたので検証してみます。
その前に一つ予備知識が必要です。画像置換はcssや画像を切ったときに消えてしまうという問題があり推奨されません。動的な見た目の操作はJavaScriptに任せると制作者の負担も軽減され、閲覧者の環境にも左右されず安定して見せることができます。それとJavaScriptはキレイなDOM操作ができれば「MMswap〜」的な汚いソースにはなりません。
さて、画像置換のサンプルを作っていきましょう
フロート+画像置換
ul.floatReplaceList01 {
}
ul.floatReplaceList01 li {
float: left;
}
ul.floatReplaceList01 li a {
display : block;
overflow : hidden;
}
これは最悪ですね〜。IEがグダグダになります。画像置換するところにいきつきません。
inline + 画像置換
問題なく表示されますが、幅・高さ・bg・ロールオーバーを全部の要素に入れないといけないのが辛い。幅と高さは途中で入力をあきらめました。制作者に優しくない作りですね〜。久しぶりに画像置換やって実感。
画像置換の問題として、css、もしくは画像を切った状態では表示されないというのがアクセシビリティの観点からよろしくありません。
「モバイル端末には画像よりも、軽いテキストで表示させたい」というような観点もありますが、現実的にモバイルはキャリアによってhtmlの振り分けが生じるのでpcとモバイルで同じhtmlを使うことも少ないと思います。
ul.inlineReplaceList {
}
ul.inlineReplaceList li {
display: inline;
}
ul.inlineReplaceList li a {
display : block;
float: left;
overflow : hidden;
width: 80px;
height: 40px;
text-indent: -9999px;
}
ul.inlineReplaceList li#inlineReplaceList01 a {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav01.jpg) no-repeat left top;
}
ul.inlineReplaceList li#inlineReplaceList02 a {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav02.jpg) no-repeat left top;
}
中略
ul.inlineReplaceList li#inlineReplaceList01 a:hover {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav01_on.jpg) no-repeat left top;
}
ul.inlineReplaceList li#inlineReplaceList02 a:hover {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav02_on.jpg) no-repeat left top;
}
レイヤー的発想の画像置換.aをブロック化、オーバー時にpadding-topを入れて背景画像にチェンジ。フロートレフトのみ。
画像置換でレイヤーっぽいやつってこんな感じでしたっけ？想像で作ってみました。間違っていたらご指摘いただければ幸いです。
IEは×。IEはブロック化したインライン要素がwidth100%っぽくなるので幅指定が必要。
| IE6 | IE7 | それ以外のモダンブラウザ |
|---|---|---|
| × 幅指定必要 |
○（幅指定不要） | ○（幅指定不要） |
ul.layerList {
}
ul.layerList li {
float: left;
}
ul.layerList li a {
display: block;
overflow: hidden;
height: 45px;
}
ul.layerList li a:hover {
padding-top: 45px;
height: 0;
}
ul.layerList li#layerList01 a:hover {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav01_on.jpg) no-repeat left top;
}
ul.layerList li#layerList02 a:hover {
background: url(http://katapad.com/wp/asset/img/2007/07/kansaiWS/nav02_on.jpg) no-repeat left top;
}
中略
JavaScriptでロールオーバー + float: leftだけで幅も入れない
css2ではfloatした要素に幅も指定しないとダメで、それによりmacIEでは崩れます。そのほかの主要ブラウザでは問題なく表示されます。imgを置いてclassさえ書けばそれで終了になります。わずかな書き方でそれ以上の効果を期待できる上に、css・JavaScript・画像を切ってもaltが表示されるのでなんの問題もありません。
ロールオーバースクリプトはcool web windowさんのところが参考になるかと思います。僕が現在使っているscriptは安定性にかけていてテスト段階（α版）なので公開していません。きちんと動くものを使いましょう。あっ、でも僕のんはyuga.jsの改変なのです。これはすばらしい発想のjsです。元のソースならきちんと動くと思います。なんか今見たらバージョンあがってますね。フムフム、なるほど。
macIEに対応しないといけないのならば、floatでなくinlineにするといいでしょう。
ul.globalNav li {
float: left;
}
- prev:tableTips