blockとinline-blockの違いをわかりやすく完全解説！初心者でも迷わない使い分けガイド

---

blockとinline-blockの違いを理解する基本ガイド

CSSの世界には、要素の並び方を決めるdisplayプロパティという考え方があります。その中でも block と inline-block は、特にレイアウトの初歩として理解しておきたい基本です。block は新しい行を作って幅いっぱいに広がる性質があり、幅や高さを設定しても通常はその要素の幅が親要素の幅に合わせて変化します。一方、inline-block は通常のテキストの流れの中に現れますが、幅と高さを設定でき、要素同士を横並びに並べることも可能です。これらの違いを知ると、ページの見た目を細かく調整できるようになり、デザインの自由度がぐんと高まります。特にカード型のレイアウトや、写真とテキストを横並びにしたいときには inline-block が便利ですし、ブロック要素を使って大きな区切りを作りたいときには block が使われます。ここでは、まず基本となる性質を押さえ、次に使い分けのコツを紹介します。
ブロックとインラインブロックの大きな違いは「行の扱い」と「サイズの扱い」にあります。ブロック要素は必ず新しい行を開始し、横幅は自動的に最大値（通常は親要素の幅）を取ります。このとき height や width を設定しても、影響を受けるのはその要素自身だけで、周囲の要素には影響の及ぼし方にも特徴があります。一方、inline-block 要素は「インライン要素の性質」と「ブロック要素の性質」を兼ね備えています。ページの流れの中に自然と混ざりつつ、幅と高さを自在に設定でき、複数の要素を一列に並べるデザインを作るときに威力を発揮します。

基本的な性質を比べる

このセクションでは、実際の挙動を比べて覚えるのがコツです。
1) block は必ず新しい行を作り、横幅は親要素の幅いっぱいを取ります。高さや余白は周囲の要素にも影響を与え、上下の余白は周囲のレイアウトに大きな影響を与えやすいです。
2) inline-block は通常のテキストの中に混ざって表示され、横並びがしやすい一方、文字の高さと要素の高さが揃いにくいことがあります。vertical-align の扱いにも注意が必要です。
3) どちらを使うか迷ったときの目安としては、単純な縦長のセクションなら block、写真と文字を同じ列に並べたいときや、複数のアイテムを横に並べたいときには inline-block が有効です。

実用的な使い分けのルールと例

使い分けの基本ルールは、見た目とレイアウトの目的に合わせて選ぶことです。
・横並びが目的で、要素間のサイズを固定したい場合は inline-block を使う。
・独立した区切りを作って文書の構造をはっきりさせたい場合は block を使う。
・ナビゲーションバーやギャラリーのような、同じ高さ・幅のアイテムを横に並べたいときには inline-block の性質が役立ちます。
・幅を一気にそろえたいときは block の子要素に width を設定すると整った列を作れます。

ピックアップ解説

今日は友達とカフェで CSS の話をしていた。blockとinline-blockの違いが、実際のウェブページでどう役立つかを、雑談風に深掘りしてみようと思う。blockは新しい行を作り、横幅は親要素に対して最大化する性質がある。対して inline-block はインライン要素とブロック要素の両方の良いとこ取りで、テキストの流れの中にも自然に入り込みつつ、幅と高さを自由に設定できる。これによって、写真とテキストを並べたカードや、メニューアイテムを横に並べるグリッド風デザインが作りやすくなる。私は学生時代、これを使い分けるだけで、ページの見栄えが急に整った経験がある。結局、大事なのは“目的は何か”と“見る人の動線はどうなるか”を考えること。blockとinline-blockは、それぞれが違う道具だから、使い分けを意識して使えば、デザインの幅はぐんと広がるのだ。

---