【初心者でもわかる】「display:inline-block」を使うタイミングとは？使い分け方を解説！！

どうも7noteです。インラインブロック要素の使い方の記事です。

最初から、インラインブロックとして設定されている要素は存在しない、そんな少し変わったインラインブロック要素ですが、使い時や使い方がイマイチまだ分からないという方向けの記事です。

inline-block要素とは？

インライン要素でもなくブロック要素でもないですが、ちょうどこの二つの間くらいの役割を果たすのがインラインブロック要素です。
インラインブロック要素にする時は、display: inline-block;と指定します。

いくつか特徴ごとに、よく使われる場面を紹介します。

inline-block要素が使われる場面3選

1.要素を横並びにさせたい時

<ul>
    <li>ボタン1</li>
    <li>ボタン2</li>
    <li>ボタン3</li>
</ul>

li {
  display: inline-block;
}

結果↓
ボタン1 ボタン2 ボタン3

通常<li>はブロック要素なので、以下のように縦並びになるはずです。

ーー指定しなかった場合ーーーーーーー
ボタン1
ボタン2
ボタン3
ーーーーーーーーーーーーーーーーーー

しかしinline-blockを指定すると、インライン要素のように扱われ、要素が横並びになります。

ーー指定した場合ーーーーーーー
ボタン1 ボタン2 ボタン3
ーーーーーーーーーーーーーーーーーー

2.文字の途中で改行させたくない時

inline-blockの特徴として、inline-block内の文字は途中で改行されないようになっています。

inline-blockを指定していない時

inline-blockを指定した時

3.インライン要素に指定できないcssを指定したい場合

インライン要素には上下のmarginや、height（高さ指定）などは効きません。
ですが、インラインブロック要素なら効きます。

span {
  display: inline-block;
  margin: 10px 0; /* ←効く */
  height: 200px;  /* ←効く */
}

関連記事：インライン要素に効かないCSS

覚え方というか、考え方というか、そんな話

最初はインライン要素とブロック要素の違いについても覚えるのがややこしいのに、インラインブロック要素も増えたらややこしくて覚えられないという方向けに、「わたしはこうやって覚えた」という事を書いておきます。

まずブロック要素とインライン要素の違いについては頑張って覚えてください。
どちらも名前の通り、「ブロック要素はブロックを積み上げる要素」「インライン要素はライン（文中）の中に入る要素」のようなイメージです。

それを踏まえたうえで、インラインブロック要素は、「要素単体ごとにCSSを効かせる時はブロック要素の様に扱い、対象の要素複数に対して効くcssを書く時はインライン要素のように扱う」というイメージです。
どういうことかというと↓

・「widthやheightやmarginなど、その要素1つ1つに対して個別に指定できるcssはブロック要素のように効く」

・「インラインブロックの要素が複数ある際に、text-alignの指定など複数の要素の配置に関するcssはインライン要素のように効く」

と考えております。
あくまでイメージの話なので、実際にはインラインブロック要素が1つだけでもtext-alignは効きます。
ですが、ライン（文中）内にある全ての要素に対して1つの指定をしている、といったイメージでしょうか。
概念なので文章で上手く伝わっているか不安ですが。

要は木を見るか林を見るか、みたいな話です。（謎の結論）

widthやheightはそれぞれの要素1つ1つに指定されるのに対し、text-alignはインラインブロック要素の親要素に指定するので、その親要素から見てインラインブロック要素が内包されている全体にcssを当てるイメージの違いでしょうか。

まとめ

最後はグダグダになってしまいましたが、ブロック要素・インラインブロック要素・インライン要素はそれぞれ特徴が違うので、その特徴をしっかり理解して使うと綺麗なサイト作りに役立ちますと言うことを今回の記事でお伝えしたかったのですが、、、文字に起こすのは難しいですね。
よくわからないという方はコメントください。補足させていただきます。(汗
ただ、よく使われる場面さえ分かってくれば使い分け自体はさほど難しくないと思います。

おそまつ