【CSS】inline要素とblock要素とinline-block要素の使い分けについて考える【698日目】

display: xxxいろいろある

display:inline;

display:block;

display:inline-block;

って書いたり、divやspanを使い分けることは結構あると思います。

では、それぞれどんな利点・意味があるんだろうって考えたことはありますか？
ってことで、少し試してみましょう。

実験してみる

divで灰色の箱を作り、その中に4つ要素を並べました。

上から、inline、inline-block、blockの順です。

<div class="box">
  <span class="inline-item">
    test1
  </span>
  <span class="inline-item">
    test2
  </span>
  <span class="inline-item">
    test3
  </span>
  <span class="inline-item">
    test4
  </span>
</div>
<div class="box">
  <span class="inline-block-item">
    test1
  </span>
  <span class="inline-block-item">
    test2
  </span>
  <span class="inline-block-item">
    test3
  </span>
  <span class="inline-block-item">
    test4
  </span>
</div>
<div class="box">
  <span class="block-item">
    test1
  </span>
  <span class="block-item">
    test2
  </span>
  <span class="block-item">
    test3
  </span>
  <span class="block-item">
    test4
  </span>
</div>

これが、各要素の結果です。

そして、これにwidthをつけてみました。その結果はこれ。

ここからざっくりわかること。

inline

中に含まれた文字などの大きさがギリギリ入る範囲がinline要素の大きさ。
widthやheightは使えない。
paddingなどを使うと、要素が大きくなる。

■使い所

1. 要素を横に並べるとき
2. 中に入った文字に応じてサイズを変えたりしたいとき

inline-block

中に含まれた文字などの大きさがギリギリ入る範囲がinline-block要素の基本の大きさ。
widthやheightが使えるので、幅の固定は可能。

■使い所

1. 要素を横に並べるとき
2. 中に入った文字を気にせず、サイズを変えたりしたいとき

block

中に含まれた文字などの大きさがギリギリ入る範囲がinline-block要素の『縦の』基本の大きさ。
横幅は、基本的に親要素のマックスのサイズ。
widthやheightが使えるので、幅の固定は可能。

■使い所

1. 要素を縦に並べるとき
2. 中に入った文字を気にせず、サイズを変えたりしたいとき

個人的な思い

CSSでfloatを使おうと言われることは多いかもしれませんが、
要素を浮かしてしまう、これは親要素を無視するようなものなので、個人的にはあまり好きではなかったりします(´・ω・｀)(個人の感想)

中央寄せに関しても、意味的には、inline要素でtext-align:centerするのが本来やりたいことではないかな？って思うこともあります(´・ω・｀)

なんとなく、CSSの使い方で調べて、それっぽいのをコピペするのも良いですが、
各CSSの意味を理解すると、同じ書き方でもコード量が変わったりするので、意味を理解して使いましょうφ(･･

今回使ったコード

https://codepen.io/klack710/pen/oNvdzGb