HTML・CSSを勉強し始めると、まずブロック要素とインライン要素の違いを理解するのに苦戦しますよね。
そしてやっと理解し始めた頃に現れる、「inline-block（インラインブロック）要素」。
混乱しそうになりますが、ブロック要素とインライン要素が分かっていれば難しいことはありません。
Webサイトを構築する上で頻繁に使うことになるので、覚えておきたいプロパティです。
「display: inline-block」とは何か、何ができるのか、実際にどうやって使うのか。
詳しく掘り下げて解説していきます。
インラインブロック要素って？
「インライン要素」と「ブロック要素」の、両方の特徴を併せ持った要素のことです。
- 要素の幅は中身と同じ大きさになる
- 要素同士が横に並ぶ
- 幅（width）と高さ（height）が指定できない
- 余白（padding・margin）が指定できない
- 要素の幅はブラウザ幅いっぱいになる
- 要素同士が縦に並ぶ
- 幅（width）と高さ（height）が指定できる
- 余白（padding・margin）が指定できる
インライン要素とブロック要素の特徴はこのようになっています。
そして、それぞれの良い特徴を併せもつインラインブロック要素の特徴は以下です。
- 要素の幅は中身と同じ大きさになる
- 要素同士が横に並ぶ
- 幅（width）と高さ（height）が指定できる
- 余白（padding・margin）が指定できる
インライン要素のように横並びに配置でき、ブロック要素のように幅や高さ・余白の指定ができます。
「幅や高さが変更できるインライン要素」とイメージするとわかりやすいと思います。
CSSの書き方
p {
display: inline-block;
}このように書きます。
上記は、<p>タグをインラインブロック要素にする場合の例です。
この記述をすると、インライン要素もブロック要素もすべて「インラインブロック要素」に変わります。
すべてのモダンブラウザでサポートされているので、ベンダープレフィックスは不要です。
インラインブロック要素の特性
要素の幅は中身と同じ大きさになる
インライン要素と同様に、要素の幅は中身に合わせた大きさになります。
<p>あああ</p>例えばこのようにHTMLを記述してみます。
すると<p>タグはブロック要素なので、要素の幅はブラウザいっぱいに広がります。
※背景が表示されている部分が要素の大きさ。
p {
display: inline-block;
}では「display: inline-block;」を指定して、インラインブロック要素に変換すると…
このように、中身の幅に合わせた大きさになります。
要素同士が横に並ぶ
<p>あああ</p>
<p>いいい</p>例えばこのようにHTMLを記述してみます。
ブロック要素の幅はブラウザいっぱいに広がるので、このように縦並びになりますね。
p {
display: inline-block;
}では「display: inline-block;」を指定して、インラインブロック要素に変換すると…
要素の幅は中身に合わせた大きさになり、要素同士は横並びになります。
幅と高さが指定できる
インライン要素ではできない、幅（width）と高さ（height）を指定できます。
p {
display: inline-block;
width: 200px;
height: 80px;
}このように記述してみます。
幅200px、高さ80pxに大きさが変わりました。
インラインブロック要素にすることで、幅と高さが変更できるようになります。
余白が指定できる
padding・marginで余白の指定もできます。
こちらもインライン要素ではできませんでした。
<p>あああ</p>p {
display: inline-block;
padding: ○○px;
margin: ○○px;
}paddingとmarginを指定してみます。
要素の内側の余白、外側の余白が効くようになります。
「text-align」が使える
「text-align」は、左揃え・中央揃え・右揃えが指定できるプロパティです。
「display: inline-block;」を指定した親要素に記述します。
<div>
<p>あああ</p>
</div>p {
display: inline-block;
}HTML・CSSは共通のものを使用します。
左揃え
div {
text-align: left;
}
要素が左揃えになりました。
中央揃え
div {
text-align: center;
}
要素が中央揃えになりました。
右揃え
div {
text-align: right;
}
要素が右揃えになりました。
「vertical-align」が使える
「vertical-align」は、上揃え・中央揃え・下揃えが指定できるプロパティです。
「display: inline-block;」を指定した親要素に記述します。
<div>
<p>あああ</p>
</div>p {
display: inline-block;
}HTML・CSSは共通のものを使用します。
上揃え
div {
vertical-align: top;
}
要素が上揃えになりました。
中央揃え
div {
vertical-align: middle;
}
要素が上下中央揃えになりました。
下揃え
div {
vertical-align: bottom;
}
要素が下揃えになりました。
横並びにした要素同士に隙間ができる
「display: inline-block;」で要素を横並びにすると、要素同士に少し隙間が空きます。
バグではなく、inline-blockの仕様です。
隙間をなくすにはいくつか方法があります。
HTMLを改行しない
<p>あああ</p>
<p>いいい</p>
<p>ううう</p>通常、このようにコンテンツごとにHTMLを改行することが多いと思います。
この改行が、ブラウザ上で隙間ができる原因です。
<p>あああ</p><p>いいい</p><p>ううう</p>このように改行を削除して、繋げて記述することで隙間がなくなります。
親要素に「font-size: 0;」を指定
<div>
<p>あああ</p>
<p>いいい</p>
<p>ううう</p>
</div>まず、「display: inline-block;」をかけたい要素を<div>で囲います。
div {
font-size: 0;
}
p {
font-size: ○px;
display: inline-block;
}親要素である<div>タグに「font-size: 0;」を指定すると隙間がなくなります。
注意点としては、子要素にも適用されて文字が表示されなくなってしまうので、子要素に対して「font-size」を再度指定する必要があります。
「letter-spacing」を指定
<div>
<p>あああ</p>
<p>いいい</p>
<p>ううう</p>
</div>まず、「display: inline-block;」をかけたい要素を<div>で囲います。
div {
letter-spacing: -.4em;
}
p {
display: inline-block;
}親要素である<div>タグに「letter-spacing: -.4em;」を指定すると隙間がなくなります。
その他の方法
他にも、ネガティブマージン（marginの値をマイナスの値にする）を指定する方法や、閉じタグをなくす方法などが有名ですが、ブラウザによってズレてしまったり、正しいマークアップではなくなってしまうという点から、上に挙げた3つの方法で対応するようにしてください。
実践的な使い方
実際のWebサイトを構築する際に、こんな場面で役立ちます。
「display: inline-block;」の特性を利用すれば色んなシーンで使えます。
ヘッダー
よくあるこんなレイアウトのヘッダー。
floatを使ってコーディングする場合が多いのではないでしょうか。
「display: inline-block;」を使えば、floatを使わずシンプルにコーディングできます。
HTML
<header>
<a href="#" class="logo">logo</a>
<ul class="nav">
<li><a href="">PRIVACY</a></li>
<li><a href="">SITEMAP</a></li>
</ul>
<ul class="btn">
<li><a href="">CONTACT</a></li>
<li><a href="">ENTRY</a></li>
</ul>
</header>CSS
header {
width: 100%;
text-align: right;
position: relative;
}
.logo {
position: absolute;
top: calc(50% - 25px);
left: 0;
}
.nav li {
display: inline-block;
}
.btn li {
display: inline-block;
}デモ
解説
このレイアウトは、ロゴ以外すべて右側に寄っています。
子要素すべてに「display: inline-block;」をかけてインラインブロック要素にします。
そして親要素に「text-align: right;」をかけることで、子要素すべてが右寄せになります。
あとは、ロゴだけを「position: absolute;」で左側に配置すれば完成です。
とてもシンプルに記述できますね。
グローバルナビゲーション
オーソドックスなレイアウトのグローバルナビ。
こちらもfloatなしでレイアウトできます。
HTML
<nav>
<ul>
<li><a href="">nav01</a></li>
<li><a href="">nav02</a></li>
<li><a href="">nav03</a></li>
<li><a href="">nav04</a></li>
<li><a href="">nav05</a></li>
</ul>
</nav>CSS
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
}デモ
解説
まず子要素である<li>タグを「display: inline-block;」で横並びにします。
そして親要素の<ul>タグに「text-align: center;」を指定するだけ。
とても簡単ですね。
まとめ
初心者の頃に悩みがちな「display: inline-block;」についてご紹介しました。
CSSでのレイアウトは色んな方法があり、一長一短です。
シーンごとに適した方法があり、「display: inline-block;」を使うべきシーンも多々あります。
Webサイトの構築には欠かせないプロパティなので、是非覚えておきましょう。
※現在では「display: inline-block」と同じレイアウトが可能で、より自由度の高い「display: flex」が主流となっています。
以下の記事で「display: flex」について解説しているのであわせてご覧ください。
