画像関連のCSS TIPS

渡部です。
最近はCSSレイアウトでコンテンツを作ってます。
CSSはブラウザによって解釈が異なることが多いので、けっこう悩まされるのですが、先日も作っていて画像関連ではまったことがあったので、その件について書いてみようと思います。

box要素に画像を並べると、妙な余白が出る件

backgroundを指定しているbox要素に画像を並べていたのですが、なぜか余白が空いてしまう現象が起こりました。(最初は背景画像もあいまってその現象に気が付かなかった・恥)

HTMLコード

<div id="header_menu">
<img src="images/menu.gif" width="90" height="21">
<img src="images/menu.gif" width="90" height="21">
<img src="images/menu.gif" width="90" height="21">...
</div>

CSSコード

#header_menu {
margin-top: 5px;
height:	  21px;
background: #333;
vertical-align: bottom;
}

このコードでの表示
menu_s1.jpg

調べてみたところ、vertical-align属性と画像の垂直位置が妙なことになっていた模様。
vertical-align属性はtop, middle, bottomに加えて、baseline, text-top, text-bottomというプロパティがあるのですが、どうやら画像vertical-alingはデフォルトではtextのbaselineに合わされているようなんですね。
結局画像のcssにvertical-align:text-bottom属性をセットして無事解決!

追加したCSSコード

#header_menu img{
vertical-align: text-bottom;
}

CSS適用後の画像
menu_s2.jpg


テキスト・画像関連でもう1つ。

テキストと画像を並べて表示するとline-heightがずれる件

これはどういうことかといいますと、WYSIWYGエディターなどで絵文字(アイコン)を含めて文章を書き、それをHTMLで表示すると行間が揃っていないことがよくあります。
HTMLコード

<p class="box">
ほげほげ ほげほげ ほげほげ ほげほげ ほげほげ
ほげほげ ほげほげ ほげほげ ほげほげ ほげほげ
<img src="images/one_icon.gif" class="img_box">
ほげほげ ほげほげ ほげほげ ほげほげ ほげほげ
ほげほげ ほげほげ ほげほげ ほげほげ...
</p>

このコードでの表示
line_height_s1.jpg

分かりやすいようにline-heightを広げていますが、画像のある行だけ明らかに行間が違います。
これはどうやらline-heightが文字の高さに対してベースラインの間の値を設定する特性というのに起因しているようです。では画像が含まれているとline-heighを設定しても意味がないかというと、画像の上下にmarginをセットすることで(ある程度まで)回避できます。画像の上下にmarginをセットすることでその行の高さを増やし、擬似的にline-heightをきかせるということです。
定義するCSSコード

.img_box {
margin:		0.4em 0.2em 0.5em 0.2em;
vertical-align:	middle;
}

CSS適用後の画像
line_height_s2.jpg

だいぶ目立たなくなりましたね。実際は細かい設定が必要になるかと思いますが、パターン化してしまえばWIZWIGエディター対応のコンテンツを作るとき重宝できると思います。

Leave a Reply