* You are viewing the archive for 11月 7th, 2007

画像関連の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

Continue Reading

歓迎会

神楽坂のかみくらにて歓迎会を行いました。
RIMG0450.JPG RIMG0456.JPG RIMG0461.JPG
RIMG0460.JPG
実はココ、TVで観たことがあって、「お箸で食べるフレンチという」フレーズだけを覚えていたのです。
お店の名前も場所もわからず検索しまくりやっと見つけたと思ったら、予約がなかなかとれません。。。
という状態でしたので、すごく期待していただいてきました。
個室でのんびりできました。フレンチというよりは、創作和風料理っぽいかも。
もちろん、おいしかったです!ご馳走様でした。

息子というより孫?!

新人Aです。
つむじが二つの人を見つけました。
58歳でも子供って生めるんですね
10歳で68歳・・・。もう孫ぐらい年が離れてます・・・。