ちょっとした組み方の違い｜CSS HappyLife

参考にしたHTMLコードは以下のとおりです。

HTMLコード

<p>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
</p>
<p class="rightText">
右寄りのテキスト
</p>
<h3>
タイトルタイトルタイトルタイトルタイトルタイトルタイトル
</h3>

サンプル1を考えてみる

サンプル1は、テキストにリストマークをつけて右側に寄せるというもの。

リストマークをつけるのは、background-imageでできるし、左寄せにするのはtext-alignにすればできるのですが、これを組み合わせると意外にうまくできません。

よくない例です。

CSSコード

p.rightText {
   background: url(icon.gif) 0 0 no-repeat;
   text-align:right;
}

※icon.gifはリストマークのような画像を想定しています。

a要素やspan要素があれば簡単にできるのですけどね。ここでは、タグを追加しない方向で考えてみます。

テキスト量や文字サイズを変更してもレイアウトが崩れにくいのは、リストマークをつけるのに::before擬似要素を使用することです。contentプロパティで背景画像を指定します。displayプロパティをinlineにして、vertical-alignプロパティが使えるようにします。vertical-alignプロパティで縦の位置を調整します。リストマークとテキストの間隔はpadding-right等で空けます。

ブロックレベルの要素（この場合p要素）に対して::before擬似要素あるいは::after擬似要素を使った場合は、追加される内容もブロックレベルになるらしいのですが、どのブラウザでもvertical-alignプロパティが使えたのですよねー。これってブラウザが間違っているのかな？ちょっとよくわからないので、ちゃんとdisplay:inline;の指定を記述しておきます。

CSSコード

p.rightText{
   text-align:right;
}

p.rightText:before{
   display:inline;
   content:url(bg.gif);
   vertical-align:2px;
   padding-right:3px;
}

しかし問題があって、::before要素はIE6とIE7では対応していません。ただし、ie8-jsというJavaScriptを使用することにより、IE6やIE7でも::before要素が使用できるようになります。

サンプル2を考えてみる

サンプル2は、左側に5px幅のラインのあるh3要素。さらにそのラインより外側に5pxの余白があります。できれば行が2行以上になってもちゃんと左のラインがつながってほしいとのこと。

最初、背景画像を白い5px幅のラインだけにして、その左の余白をborderでやろうとしたら、なんとIE6で正常に表示されない！どうやら、背景画像がボーダー辺を基準に配置されてしまうバグがあるようです。

以下のようにしてしまうと、IE6以外ではきちんと意図したとおりに表示されますが、IE6では背景画像が表示されません。

CSSコード

h3 {
   padding-left:15px;
   background: #333 url(h3.gif) 0 0 repeat-y;
   border:5px solid #333;
}

※h3.gifは横5px、縦1pxの白い画像です。

なので、CSS HappyLifeさんの3番目のコードが一番最適のようです。

いろいろ考えてみて

うん、やっぱりIE6ってダメだ。早くみんなIE8にアップグレードしようよ！