inline-block が最近好きなので振り返ってみた。

フロンティアビジョン
2014.09.30
- #HTML・CSS

こんばんは、こんばんわ。
1週間ほど前から早寝早起きしています。
朝はいいですよ！夜だらだらやるよりも朝！静かで気持ちが良いです。

さて、私は1年ほど前まではIE6からのブラウザ対応を頑張らないといけない環境に居ましたが、フロンティアビジョンに入社してからはIE8からの対応でOK！となったので（巷ではIE8対応も有料らしいですが！）、制作時にいろいろ悩まずに快適になりました。

中でも良くなったのはCSSの「display: inline-block;」や「display: table;」、「display: table-cell;」などがCSSハック無しで使えるようになったり、また「box-sizing: border-box;」というwidthやpadding等の計算が楽になるプロパティ達が使えること！！

その中でも今日は「display: inline-block;」の便利さをお話ししたいと思います。
（今更などと言ってはダメだ！）

display: inline-block; とは？

inline-blockとは、displayプロパティの値のひとつで、以下の様なことが出来るようになります。

ブロック要素のようにwidth、height、padding、margin等が指定出来る
インライン要素のように、文字などと一緒に流し込むことが出来る
vertical-align、text-alignなどのプロパティが有効！

と、非常に扱いやすいラインアップですね。

さっそく例を並べてみましょう。

ブロック要素のようにwidth、height、padding、margin等が指定出来る

inline-block

/* HTML */
&lt;div class="entry7929_e_pink"&gt;inline-block&lt;/div&gt;

/* CSS */
[class^="entry7929_e"] {
color: #fff;
display: inline-block;
font-size: 140%;
font-weight: bold;
padding: 30px;
}

インライン要素のように、文字などと一緒に流し込むことが出来る

テストテスト

inline-block

てすとてすと

/* HTML */
テストテスト
<div class="entry7929_e_pink">inline-block</div>
てすとてすと

または要素と要素を横に並べたりも。

inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>
<div class="entry7929_e_blue">inline-block</div>

vertical-align、text-alignなどのプロパティが有効！

inline-block

/* HTML */
<div class="entry7929_e_vtop01">inline-block</div>
<div class="entry7929_e_vtop02">inline-block</div>
<div class="entry7929_e_vtop03">inline-block</div>
<div class="entry7929_e_vtop04">inline-block</div>
<div class="entry7929_e_vtop05">inline-block</div>
<div class="entry7929_e_vtop06">inline-block</div>

/* CSS */
[class^="entry7929_e_vtop"] {
vertical-align: top;
}
.entry7929_e_vtop01 {
height: 70px;
}
.entry7929_e_vtop03 {
height: 50px;
}
.entry7929_e_vtop04 {
height: 50px;
}
.entry7929_e_vtop06 {
height: 70px;
}

親要素の text-align で左寄せ・中央寄せ・右寄せが可能になります。
またinline-block に vertical-align: top; を指定すると、2段以上かつそれぞれ高さが違っても上下が整うなど、float を使って実装すると面倒だったのがスッキリでシンプルなコードで実現出来ます！

inline-blockで横に並べた時の空白が気になる！

何事にもデメリットはつきもの。
display: inline-block; を使用する際には要素と要素の間にスペースが出来てしまいます。
この謎のスペースはHTMLの改行が原因なのです。

ですのでHTMLを詰めて記述するとスペースは無くなるのですが、HTMLを詰めて記述すると後から編集するのが面倒になる＋見た目が非常によろしくないので、CSSで対応しましょう。

letter-spacing を駆使してスペースを消そう！

inline-block

letter-spacing という文字の間隔を指定するプロパティを使用します。

親要素に対して letter-spacing: -.4em; を指定することによって、文字の間隔を無くします。
文字の間隔を無くすことによってHTMLの改行もぎゅっと詰まらせることが出来るので、子要素間のスペースを無くすことが出来ます。
そのままだと子要素内の文字がぎゅっとなってしまい大変なことになるので、子要素に対して letter-spacing: 0; を指定し子要素内の文字間を元に戻してあげましょう。

/* HTML */
<div class="entry7929_e_letter_parents">
<div class="entry7929_e_letter">inline-block</div>
<div class="entry7929_e_letter">inline-block</div>
<div class="entry7929_e_letter">inline-block</div>
</div>

/* CSS */
.entry7929_e_letter_parents {
letter-spacing: -.4em;
}
.entry7929_e_letter {
letter-spacing: 0;
}

親要素に font-size: 0; というやり方もありますが、%で文字サイズを指定しているサイトでは子要素にて文字サイズが元に戻せないのでは？という懸念点から控えた方が良いかと思います。