必殺、display: inline-block;

※この記事は11年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、遅くにみやびです。
プリンに醤油をかけるとウニの味がしますが、みやびプリンはキノコの味がします。


まずそ。



さて、今日は、インラインレベルをブロックみたく扱いたい時の話をしよう。

けっこう、コーディングをする時に、Pタグの中にさらにブロック的な扱いをしたいテキストがあったりすもんだ。

だいたいの人が思いつくやりかたといえばこれだ。

●HTMLソース <span class="blockspan">ここがブロックみたくなるじょ</span>それ以外はインライン
●CSSソース

.blockspan {
background: #CC0000;
color: #FFFFFF;
display: block;
padding: 5px;
}

↓実際の表示↓

ここがブロックみたくなるじょそれ以外はインライン

spanにdisplay: blockをきかせておけば、spanにパディングだろうが、背景画像だろうが、自由にブロックみたく扱うことができる。

しかし、display: blockだとちょっと不便なことがある。
それは、他のブロック要素と一緒で、強制改行されてしまうってこと。
そうさせないやり方は確かにいろいろある。
float: leftとかきかせるやりかた。
ただ、これだと、親ブロックにcleafixをきかせなきゃいけなかったりと、少々めんどうである。

そこで、便利なのが、display: inline-blockである！
●HTMLソース

<span class="blockspan-in">ここが半ブロックみたくなるじょ！</span>それ以外はインライン

●CSSソース

.blockspan-in {
background: #CC0000;
color: #FFFFFF;
display: inline-block;
padding: 5px;
}

↓実際の表示↓

ここが半ブロックみたくなるじょ！それ以外はインライン

これは、なんと便利か！
ブロックと一緒で、あらゆるプロパティを使える上、並び的には、インラインと同じ動きをしてくれるのだ！
まぁ、一塊って扱いなので、きかせている部分が長かったりすると改行されてしまう。
だが、それを含め扱いやすい（というより、その一塊として改行されることが嬉しい）。
さらに嬉しいのは、IE6さんでもちゃんときいてくれるっていう代物！！！！

さぁ、あなたも明日からこの便利なプロパティを使ってみましょう。




CSSは、独学より本読んだほうがいいかもね・・・・。