エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【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>

f:id:willow710kut:20190911202824p:plain

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

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

f:id:willow710kut:20190911203905p:plain

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

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