ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

inline-blockといえば、インライン要素でありながら、ブロック要素であるwidthやheight、marginやpaddingなどを使えるようになるというスタイルです。

たとえば

<p class="e_date">2010.09.08</p>

<p class="e_title">記事のタイトル</p>

というhtml記述に対して

<style>

.e_date{
display:inline-block;
width:72px;
height:20px;
padding:5px;
background-color:#000000;
color:#FFFFFF;
}

.e_title{
display:inline-block;
width:200px;
}

</style>

というスタイルを設定すると以下のようになります。

サンプル

しかし、Firefoxなどモダンブラウザでは使用できますが、IE6、7ではまだ実装が不十分です。IE8でもサーバによってはなぜか実現できたりできなかったりします。（このサクラインターネットでは使えませんでした。）

これをIEでも実現させるには、ブロック要素をinline-blockにするのではなく、インライン要素をinline-blockにしてみてください。

<span class="e_date">2010.09.08</span>

<span class="e_title">記事のタイトル</span>

スタイルは上記のと同じです。

以下実行結果

サンプル２