ブロック要素・インライン要素・インラインブロック要素の違いを理解しよう

※この記事は 1未満 分程度でお読みいただけます。

コーディングの学習を進めていて、初期段階でもっとも多いのが、思った通りにパーツを配置することができない、という悩み。中央に配置したいけどどうしても左に寄ったまま動かない、余白を設定したけどちゃんと隙間があいてくれない、サイズを指定したけど反映されない、など、そういった相談を受けることが、とても多いです。

これらの多くのケースは、ブロック要素、インライン要素、インラインブロック要素、それぞれの特徴をしっかり理解できていない、ということろに原因があります。今回は、コーディングの基礎として、この3つの要素をしっかり理解するために、それぞれの特徴や用途、挙動の違いを解説していきたいと思います。

HTMLタグの初期値はあるが、用途に応じてCSSで変更OK！

まずはじめに、基本としてHTMLタグは、ブラウザで設定されている初期値として必ず、ブロック要素、インライン要素、インラインブロック要素のどれかの性質を持っています（一部例外あり）。何も指定しない場合は、この初期値が適応されます。

ですが、「もともとブロック要素だから、ブロック要素として使わなければならない」というルールはありません。この要素は、CSSの「display」プロパティで変更ができます。作りたいパーツや用途に応じて、ブロック要素、インライン要素、インラインブロック要素を切り替えながら、使っていきます。

それぞれのおもな特徴は、次の通りです。

しっかりとした箱「ブロック要素」

それでは、各要素の特徴を詳しく解説していきます。まずは、ブロック要素です。これは、ほとんどのHTMLタグに初期値として設定されている、もっとも代表的なものになります。h1～h6、p、ul、li、div、header、footer、section などなど、レイアウトに関するほぼすべてのHTMLタグが、ブロック要素になります。

もともとブロック要素になっているHTMLタグには、何も指定しなくても、そのままブロック要素として使えます。aタグやspanタグなどのインライン要素（初期値）を、あえてブロック要素として使いたい、というときは、CSSで下記のように指定します。

display: block;

ブロック要素は、しっかりとした箱のイメージです。ブロック要素を配置すると、横幅を指定しなければ、自動で親要素いっぱいのサイズ（100%）で配置されます。この箱は、かなりしっかりとした形を持っていて、横に並べて配置されることはありません。横幅が狭くなった場合でも、縦に縦に積まれていきます。

そして、このブロック要素が持っているもうひとつの特徴が、配置をしたときに左側に寄った配置になるところです（左右中央寄せにつていは後述します）。

このブロック要素は、おもに箱として中に何かを入れたいときに使います。hタグに見出しの文字を入れる、pタグに文章を入れる、見出しや段落や画像などの複数の要素をさらに大きな箱（divなど）に入れる、など、WEBサイトをコーディングしていく際の、もっとも基本的な使い方になります。

形のないやわらかい袋「インライン要素」

次が、インライン要素です。この要素は、aタグやspanタグなど、一部のHTMLタグの初期値に設定されています。もし、ブロック要素をインライン要素として使いたければ、CSSで下記のように指定します。

display: inline;

インライン要素はやわらかい袋のイメージです。この要素は、箱としての形を持っていません。紙袋やラップのように、ただ特定の部分をぴたっと囲ってあげるだけです。箱ではないので、高さや横幅という概念がそもそも存在しません。また、親要素の横幅に収まりきらなかった場合は、次の行に流して表示されます。

インライン要素は特定の部分にピンポイントに何かを指定したいとき（おもに文字要素）に使います。文章のなかでこの部分だけ色を変えたい、文章のこの部分にリンクを張りたい、などがインライン要素の代表的な使い方になります。

箱だけどフレキシブル「インラインブロック要素」

最後が、インラインブロック要素です。すこし特殊なこの要素。初期値がインラインブロック要素になっているHTMLタグほとんどありませんが、作りたいパーツによっては、いくつかのケースで使うことがあります。CSSでは下記のように指定します。

display: inline-block;

インラインブロック要素は、ブロック要素とインライン要素の中間的な性質を持っていて、中身によって自動で横幅が調整されるフレキシブルな箱のイメージです。いちおう箱ではあるので、横幅や縦幅などのブロック要素でできることは同様に指定できます。ただ、フレキシブルな箱なので、横幅を指定しない場合は、中身のコンテンツにあわせて自動で調整されます。

ブロック要素との大きな違いは、横幅の自動調整ともうひとつ、要素を横並びにできることです。このあたりはインライン要素と似た挙動を見せます。ですが、いちおう箱の性質を持っているので、中身が横幅に収まりきらなかった場合は、箱の中で文字が改行されていきます（横幅を指定しない場合は、親要素の100%が最大幅）。

インラインブロック要素は、以前はかなり頻繁に使用していました。なぜなら、以前はブロック要素を横に並べるプロパティがなかったので（詳しくはこちら）、あえてインラインブロック要素にして横に並べる、など、少し変わった使い方をされることが多かったからです。

しかし現在では、グリッドやフレックスボックスなど、要素を横に並べるプロパティがあります。ですので、以前と比べて、インラインブロック要素の使用頻度はかなり低くなってきました。ただ、いくつかのケースでは、まだ使用されることはあります。

もっとも使われているのは、フォームのパーツ（入力欄など）と、それ以外では文字量にあわせて横幅が変わるボタンやアイコンなどです。リンクのボタンをCSSで作る際に、使う用途によって「詳しくはこちら」「さらに見る」など、文字量が変わることがあります。その際に、文字量によってボタンの横幅を自動で調整したい、ということであれば、インラインブロックを使うとかんたんにできます。

けっこうあります！それぞれの挙動の違い

それでは、この3つの要素の挙動の違いを見ていきましょう。迷いやすいポイントをあげてみました。

縦幅・横幅の指定と横並び

まずはじめに、サイズ指定（横幅・縦幅）と、横並びの挙動を見てみましょう。各要素（黒枠の部分）をCSSで、上から「display: block（divの初期値）」「display: inline」「display: inline-block」を指定して、複数繰り返し記述しました。そのうえで、すべての要素に等しく、横幅（140px）と縦幅（70px）を指定しました。

見ていただいたとおり、ブロック要素とインラインブロック要素は、サイズ指定が効いていますが、インライン要素だけ、指定が効いていません。インライン要素はそもそも箱じゃないので当然です。

また、インライン要素とインラインブロック要素は横並びになりますが、画面の横幅を超えたときの挙動が少し変わります。インラインブロック要素はあくまでも箱なので、横幅が足りなくなったときには、箱ごと次の行に改行されます。

パディング・マージンの指定

次は、パディングとマージンの違いを見てみます。今回は、先ほどと同様にそれぞれに「display」を指定したうえで、横幅（140px）を指定してあります。その状態で、マージンとパディングをそれぞれ20pxずつ指定してあります。外側の赤枠部分が、要素が入っている親要素です。

これを見てみると、ブロック要素とインラインブロック要素は問題なく指定が効いています（隣接したマージンの挙動だけ少し変わります）。しかし、インライン要素だけ、かなりおかしな状態になっています。インライン要素は、左右のパディング・マージンは問題なく効いていますが、上下の指定が親要素からはみ出して表示されています。

このように、インライン要素の上下のパディング・マージンは、想定していない挙動を起こすことがあります。さらに、改行がかかってしまった場合は、もっとめちゃくちゃになります。ですので、箱的な使い方をするのであれば、インライン要素ではなくインラインブロック要素を使用したほうが得策です。例えば、文章中にこのようなアイコンを設置する場合は、インラインブロック一択です。

要素の左右中央寄せ（センタリング）

最後は、かなり迷う方が多い要素の左右中央寄せです。この違いをきちんと理解せずにコーディングを進めてしまうと、あとで必ず苦労することになります。それではまず、3つの指定方法の違いを見てみます。

インライン要素とインラインブロック要素に関しては、通常の文字のセンタリングで行うときと同様に、親要素に対して

text-align: center;

を指定すれば、中央寄せになります。どちらも、テキストと同様の挙動を見せます。

一方のブロック要素。ブロック要素は、横幅を指定して配置すると、まず左側に寄って配置されます。この挙動は強力で、親要素に「text-align: center」をしても、まったく中央に寄ってくれません。しかし、このブロック要素は、マージンの指定で少し変わった挙動を見せます。

まず、親要素ではなく自分自身に対して、

margin-left: auto;

と、左側のマージンに「auto」を指定すると、左側に力いっぱい突っぱねてくれます。結果的に要素が右側に寄ります。反対に、

margin-right: auto;

を指定すると、右側に突っぱねて左側に寄ります（これは最初と同じ状態）。そして、

margin-left: auto;
margin-right: auto;

と、左右に同じ力で突っぱねてあげると、要素は画面の中央に配置されます。親要素の「text-align: center」は、ブロック要素のセンタリングには一切影響を与えません。

最後にもうひとつ勘違いが多いところで、ブロック要素を画面の中央に配置することと、ブロック要素の中身を中央に配置することは、まったく別ものです。これはそれぞれ別に設定をする必要があるので、どちらも設定をしたい場合は、自分自身に対して、

margin-left: auto;
margin-right: auto;
text-align: center;

と設定します。これで、両方の設定を正しく指定することができます。

それ以外もいくつか種類があります

これまで、ブロック要素とインライン要素、インラインブロックの挙動を見てきましたが、HTMLタグでこれ以外の要素の種類が存在します。表組とグリッド、フレックスボックス関連などです。

tableやtr、th、tdなどのテーブル関連タグは、おもに表組を作るときに使われます。これらは、インラインブロック要素と似た挙動を見せます。箱としての形は保ちつつ、中身にあわせて横幅が自動で調整されます。

要素を横並びにしたいときは、グリッドかフレックスボックスを使おう

また、グリッドとフレックスボックスも、3種類と違った挙動を見せます。この2つは、要素を横並びにしたり、全体のレイアウトを設定する際にとても便利で、使いどころを覚えれば、コーディングをかなり楽に、きれいに進めることができます（詳しくはこちら）。

グリッドはブロック要素と似た挙動、フレックスボックスはインラインブロック要素と似た挙動を見せます。

それぞれの特徴を理解して、正しく要素を選択をしよう

今回解説した、ブロック要素、インライン要素、インラインブロック要素の3種類。パーツがうまく配置できない、センタリングができない、要素がずれてしまう、などの悩みのほとんどが、この要素の違いが理解できていないことから起きています。

この違いをしっかりと理解するだけで、配置やレイアウトに関する悩みは、格段に少なくなっていきます。それぞれの特徴や用途、使いどころをしっかり理解して、正しい種類を選択、指定しながら、コーディングを進めていってください。

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。