うまくいかなかったことで理解が深まった「display: inline-block;」の正体

はじめに

現在 RUNTEQ入学を控えて学習を続けており、自己紹介サイト(ver.1)を作っています。
その勉強の過程で出会った display: inline-block; について整理してみました。
「ここは違くないかい？」等、ぜひ忌憚ないフィードバックをいただけると嬉しいです。

本題：やりたかった事とその結果

現行の自己紹介サイトには自分の仕事や趣味について書いてみました。
その際、項目にカーソルを合わせた際に軽く目立たせたいなと思ったのがキッカケです。
modal をつけたかったので id をつけて <li> で囲っています。

<ul>
    <li id="work" class="aboutwork">仕事</li>
    <li id="hobby" class="abouthobby">趣味</li>
</ul>

やりたかった事

具体的には、仕事・趣味の項目を目立たせたかったです。
色々調べて transition でアニメーションをつけられることを復習しました。
そして hover と組み合わせることで理想の動きをしてくれそうなので、まずこのように書きました。
※「仕事」の項目の例

.aboutwork {
  width: fit-content;
  display: inline-block;
  transition: transform 0.5s;
  cursor: default;
}

.aboutwork:hover {
  transform: scale(1.2);
}

その結果（誤ったパターン）

元々の想定は縦に並べたかったのですが、横並びになってしまいました。
そもそもこの時点で、「正しく動作するように inline-block にした方がいい」とあったので、ただただそれを鵜呑みにしてしまっていたのが良くなかったと思います。

▼ inline-block にした場合の状態

改善策（正しいパターン）

リサーチを進めていくと、私の理想とする形に inline-block は合わないようでした。
結論としては、 block の方がいいとのことで修正すると、理想の配置になりました。

.abouthobby {
  width: fit-content;
  display: block;
  margin: 0 auto;
  transition: transform 0.5s;
  cursor: default;
}

▼ block に直した場合の状態

ちなみに・・

なお、 block だけでなく margin: 0 auto; も必要ということがわかりました。

margin: 0 auto; をつけてない状態だと、「仕事」「趣味」の項目が左端に寄ってました。
<ul> にはブラウザ標準の padding があり、それによってリスト項目が左側にインデントされていたことによって起きた事象のようです。

当初私は、直したい項目自体は「文字」なので text-align: center; か？と思いきや、
margin: 0 auto; は 要素そのものを中央に置くのであって、 text-align: center; は要素の中にある文字を中央寄せするものという違いがあるようです。

そのため、私の意図を表現するにはmargin: 0 auto;にする必要があったということです。

それぞれの違いと意味について

この間違いを経てそれぞれの違いと意味を学ぶことができました✏️

インラインブロックという言葉を分解すると・・

inline（文章の途中に参加する要素）/ block（まとまりを区切る）
(よくビジネスメールとかで「インラインで失礼します」とか読んだことありました)
日本語で考えるとスッと入ってくる気がしました。

inline-block をつけることによって「文章の流れには参加するけど、自分自身はブロックっぽく扱ってね」となるそうです。そうすると、

仕事　趣味

と横に並んで「ひとまとまりの要素」として扱いやすくなるそうです。今回の事例でいうと、 transform: scale(1.2) によって、実現したかった

仕事 → ちょっとデカくする
趣味 → ちょっとデカくする

の扱いがしやすくなったということです。

ただ今回の私のイメージとしては縦に並べたかったので、display: inline-block; は display: block; に直し、さらに margin: 0 auto; にすることでページ中央にくる理想の配置ができたということでした。

また、「ブロックとは？」をChatGPT に図化してもらったらとてもわかりやすかったのでシェアです。

▼イメージこんな感じ

┌─────────────────────────────┐
│  仕事                       │ ← 1つのblock
└─────────────────────────────┘
┌─────────────────────────────┐
│  趣味                       │ ← 次のblock
└─────────────────────────────┘

こうやってみると、なぜ inline-block にしたら横に並んでしまったのかがわかります💡

まとめ

• inline-block は文章の途中に入るけれどその要素自体はひとまとまりとして扱う
• block にすると文章の流れを区切って、独立したまとまりにできる
• text-align: center; は 要素の中にある文字を中央寄せする もの
• margin: 0 auto; は 要素そのものを中央に置く もの

用語の意味と違いを理解して、次に出くわしたときには使い分けられるようにします！

さいごに

制作中の自己紹介サイトについては公開後にリンクを追記しようと思いますmm
ぜひご一読いただけますと幸いです。

2026.08.22追記：自己紹介サイトを公開しました！
https://nsh0-22.github.io/self-introduction/