» サンプル

こんな感じ。
list-style-typeでの指定の場合はそれほど難しいことはないのですが、前述した※のようにW3C準拠ではないものを扱う場合には、text-indentを使ってやれば上手くいきます。ただし、マージンの取り方がブラウザ毎に微妙にちがうみたいなので、微調整が必要でちょっと面倒。

もっといい方法があれば、教えてもらえると喜びます。

» サンプル

HTMLはシンプルだし、どうしてクリックできないんだろう？ってことになりますが、解決方法は全然簡単で、<a>タグの背景に透過GIFをはるだけでOKです。
簡単な問題ゆえに、どつぼにハマるパターンなのでメモ書き程度に残しておきます。

ちなみに<a>タグを<div>でラップして、<div>にpositionを与えても同じ症状がでるので、IEでは<a>を位置指定するには注意が必要なようです。

» サンプルソース

サンプルの場合、見ての通りbodyタグのid。つまり、aboutやproductといった名前を変えるだけで、ナビゲージョンのアクティブ化やレイアウトを調整できるようになっています。
(今回のサンプルでは、とりあえずナビゲーションの制御のみを実装)

こうした構成にしたときの最大のメリットは、やはり一括置換が効くことです。
CMSなどのシステム的なバックアップがない場合、テキストエディターなどで一括置換をするわけですが、この場合置換の対象となるソースはできるだけ同一であることが望ましい。
それなのにナビゲーションのアクティブ化のためだけに、クラスを入れてしまったりすると、その時点で一括置換はアウトになってしまう。
(正規化等を使えば、可能なのかもしれませんが…)

そういうことで、bodyにIDを振るのはとっても便利、というお話でした。

※もちろん、もっと大規模なサイトになった場合、CSS自体をコンテンツごとに切り替える、ということになるのでしょうけど。

例)<h1 class=”iepngfix”><a href=”hoge.html”>hoge</a></h1>

なのでpng背景に使う場合は、 <a>タグをネストさせないほうが吉かも。

例)
<div id=”header”>
<div class=”bgimg iepngfix”></div>
<h1><a href=”hoge.html”>hoge</a></h1>
</div>

空タグが入っちゃうのは、この際はやむを得ないのかなと。
あとはheaderをposition:relativeにして、. bgimgとh1をposition:absoluteにするなどで位置調整。
これでOKかと。

結果としては かなりカンタンに使えることが判明。
これだけで透過PNGが使えるのは便利だし、HTML上に直接配置した画像だけでなくCSSで背景に張り込んだ場合にも適用できる点がすごい。

ただ問題は 他のpngfix系のテクニックと同じでJavaScriptをオフにされると、とても素敵な世界が広がってしまうこと。
他にもAJAXが動いてて処理の重いページの場合、動作せずにpingfixが適用されない場合があることの２点。
こればっかりは仕方ないのかもしれないけど、使うには勇気のいる選択になりそう。

自分のサイトとか、趣味で使う分にはかなりアリかと。

.clearfix{
}
.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-table;
}
/* Hide from IE-mac\*/
*html .clearfix{height:1%;}
.clearfix{display:block}
/* End hide IE-mac*/