CSSのblock・inline・inline-block要素についてわかりやすくまとめてみた

CSSのblock・inline・inline-block要素についてわかりやすくまとめてみた

CSSのblock・inline・inline-block要素についてわかりやすくまとめてみた

CSSのdisplayプロパティには主に、block、inline、inline-blockの値があります。

blockは余白やサイズの指定ができ、縦に並びます。inlineは余白やサイズ指定はできませんが横並びします。

サイズや余白の指定が自由でありつつ横並びするのがinline-blockです。

ブロック(block)要素・インライン(inline)要素

HTMLやCSSを駆使する上で重要なのが、block要素・inline要素の概念ですね。

block要素・inline要素はWEBページにおける表記形式を示しており、その要素ごとの表示仕様があります。

この要素はCSSの「display」プロパティで設定できるので、値を変えれば表示形式を変更する事ができます。

CSSの書き方

セレクタ1{ display: block; //ブロック要素 } セレクタ2{ display: inline; //インライン要素 }

上記の場合セレクタ1がブロック要素で、セレクタ2がインライン要素になる事を示しています。

要素が持つ表示形式の初期値はタグごとに決まっている

HTMLを記述する各タグには初めから

・block要素を持つタグ
・inline要素を持つタグ

それぞれが存在します。

HTMLタグのほとんどが、上記どちらかのdisplayプロパティの値を最初から保有しています。

CSSに記載がなくても、最初からdisplayの値を「block」か「inline」として持っている訳ですね。

ブロック要素を持つタグ

例えばdivタグは最初から自動でblockの値を持っていますので、ブロック要素になります。

見出しタグ(h1~h6)も同様に最初からblock要素です。

一番基本的な段落タグのpタグも、はじめからblock要素になります。

<div>コンテンツ</div>
<h1>見出し</h1>
<p>テキスト</p>

インライン要素を持つタグ

それに対してspanタグやaタグ、そして画像のimgタグなどがinline要素です。

一般的には、block要素の内側で使われるタグになりますね。

<p><span><a>テキスト</a></span></p>

ブロック要素とインライン要素の違い

block要素とinline要素とは具体的にどのような性質を持つのかをまとめてみました。

それぞれの要素は最初から以下の様な特徴を持っています。

block要素の特徴

・要素が設置されているレイアウト枠一杯に幅が広がる
・要素を連続させると縦に連なる(改行された状態)
・幅(width)と高さ(height)を指定できる
・marginやpaddingなどの余白を指定できる

inline要素の特徴

・要素の幅は常に中身と同じ幅になる
・要素を連続させると横並びになる
・幅(width)と高さ(height)は指定できない
・marginやpaddingなどの余白が指定できない

では以下より各要素の特徴について詳しく解説していきます。

大切なのはその「違い」を知る事でしょう。

違いを知れば各要素をフル活用でき、レイアウトが上手くできない場合もその原因を発見しやすくなります。

要素の幅について

ブロック要素の幅は常にレイアウト枠一杯に広がる

block要素に背景色をつけてみるとわかりやすいです。

divやhタグにCSSで背景色を付けると、そのタグが設置してある外枠一杯に背景色が伸びます。

これがblock要素の特徴であり、文字がそこまで届いていなくても常に幅一杯にまで存在しています。

ブロック要素背景色例

この様に背景色が枠一杯まで伸びる

インライン要素は中身のあるところまで

それに対しinline要素は、背景色を付けても中身のあるところまでしか背景色は伸びません。

例えば10文字のテキストをinline要素で囲った場合、背景色は10文字までしか広がらないのです。

インライン要素背景色例

背景色は文字のあるところまで

つまりinline要素の存在は「中身があるところまで」という事になりますね。

上記サンプルは見やすい様にCSSで余白を付けています。

要素が連続した時の並び方

ブロック要素は要素を連続させると縦に並ぶ

block要素の場合、要素を連続で並べると必ず縦に並びます。

要素の終わりに改行が入ったような状態になり、要素単位で下に下に並んでいきます。

CSSで後からdisplay: block;が指定された要素も、同様の状態になります。

ブロック要素連続例

ブロック要素が連続すると縦に並ぶ
ブロック要素が連続すると縦に並ぶ
ブロック要素が連続すると縦に並ぶ

インライン要素は要素を連続させても横並びを維持

それれに対してinline要素は連続して並べても改行されず、できるだけ横並びになろうとします。

右端までくるとさすがに段落ちして改行されてしまいますが、その後も並び続けようとします。

インライン要素背景色例

spanを3つ並べていますspanを3つ並べていますspanを3つ並べています

aやspanタグはinline要素ですので、テキスト内で使われても改行されたりしません。

幅と高さの指定

ブロック要素はサイズ指定できる

block要素は要素自体に幅と高さをCSSなどで指定する事ができます。

指定したwidthとheightの値がきちんと反映されますので、自在にボックスサイズを指定する事ができます。

ブロック要素サイズ指定例

div{ margin-bottom: 2px; width: 400px; height: 150px; color: #fff; padding: 18px; background: #0195ea; }
ブロック要素にwidth400、height150を設定した状態

インライン要素はサイズ指定できない

それに対しinline要素はwidthやheightの指定ができません。

CSSで設定をしても反映がされないのですね。

inlineの要素の幅と高さは、常にタグが設置された「中身自体」がサイズになります。

インライン要素サイズ指定例

文字が表示された領域のみのサイズ

つまり囲っているテキスト文字の「長さ」や「文字の大きさ」によって幅と高さが決定されるのです。

marginやpadding余白の設定

ブロック要素はmarginやpaddingの余白を設定できる

block要素であれば、上下左右にmargin(要素の外の余白)padding(要素の内の余白)の値が指定できます。

要素の外側と内側に自在に余白を付ける事ができる訳ですね。

ブロック要素余白設定例

div{ margin-bottom: 2px; color: #fff; padding: 18px; background: #0195ea; }
ブロック要素にmarginとpaddingを設定した状態

インライン要素は上下の余白が設定できない

それに対してinline要素はちょっと特殊です。左右と上下で違います。

左右の余白

まず左右の余白のみ(left・right)であれば、marginやpaddingを指定できます。

span{ color: #fff; margin-left: 10px; margin-right: 10px; padding: 0px 18px; background: #0195ea; }

左右の余白を付けた状態左右の余白を付けた状態

上下の余白

上下のmarginについては指定する事はできませんが、上下のpaddingについては一応指定できます。

しかしpaddingの値を大きくすると、改行した時に前後の行と重なってしまいます。

span{ color: #fff; padding: 20px 18px; background: #0195ea; }

上下の余白を付けた状態。上下の余白を付けた状態。上下の余白を付けた状態。上下の余白を付けた状態。上下の余白を付けた状態。

上の重なっている行が隠れてしまうので、あまり使い勝手はよくありませんね。

要素の中央揃えについて

よく中央寄せしたい要素が中央に並んでくれなくて困った事があるのではないでしょうか。

まさにここにblock要素・inline要素の違いが明確に出ます。

ブロック要素は中央寄せの指定ができない

中央寄せとは、基本的には要素の左右に均等に余白を作る事を指します。

その時に使うのが「text-align」や「vertical-align」ですよね。

しかしblock要素自体には「text-align・vertical-align」の指定ができません。

ブロック要素中央寄せ例

.outer{ padding: 25px; border: solid 1px #cccccc; text-align: center; } .inner{ margin-bottom: 2px; color: #fff; padding: 25px; width: 400px; background: #0195ea; text-align: center; }

中央揃えをするため、innerクラスに幅を400px持たせています。

<div class="outer"><div class="inner">中央寄せしたいブロック要素</div></div>
中央寄せしたいブロック要素

上記の様にblock要素自体は左に寄ったままです。

要素の中にあるテキストは中央揃えになりますが、要素自体が中央に表示される様にはならないのですね。

margin-leftやmargin-rightで「auto」を使えば、中央寄せする事ができます。

インライン要素には中央寄せ指定ができる

それに対しinline要素には、幅を持たせていなくても「text-align・vertical-align」を指定することができます。

ただし指定する際は、inline要素そのものにではなく親要素(block要素)に対して指定する必要があります。

インライン要素中央寄せ例

div{ margin-bottom: 2px; color: #fff; padding: 18px; background: #0195ea; text-align: center; //中央寄せの指示 }
<div><span>中央寄せした状態</span></div>
中央寄せした状態

つまり親要素に中央揃えの指定があった場合に、中身が中央揃えしてくれる事になります。

ブロック要素にwidthが指定されている場合

中身がinline要素なら中央寄せは問題ありませんが、中にはブロック要素の中にブロック要素が入る場合もありますよね。

中身に幅のサイズ指定がされたブロック要素がある場合は中央寄せができません。

ポイントは中身に幅(width)がされているかどうかです。

.outer{ padding: 15px; border: solid 1px #cccccc; text-align: center; } .inner2{ padding: 25px; width: 400px; //このように幅の指定がある場合 color: #fff; background: #0195ea; }
<div class="outer"><div class="inner2">中央寄せにならない</div></div>
中央寄せにならない

幅の指定をするかしないか

もし中身のブロック要素に背景色などの必要がなければ、中央揃えしている様に見えます。

しかし中の要素に背景色をつけて左右に余白を持たせようとすると、その要素に「幅」を持たせないといけません。

ところがwidthの数値を入れると、text-align: center;が効かない訳です。

CSSによるスタイル変更

タグがあらかじめ持っている属性はCSSで変更できます。駆使する事で様々なレイアウト実現に役立ちます。

中央揃えをさせるために

先ほどの状態で中央揃えしたい場合、innerクラスに対しinline要素をつけると中央に揃います。

初期値がblockとなっているタグを、CSSでdisplay: inline;に指定する訳ですね。

CSS変更

.outer{ padding: 15px; border: solid 1px #cccccc; text-align: center; } .inner2{ padding: 25px; width: 400px; display: inline; }

その上で親要素にtext-align: center;を指定すれば、inner2クラスのブロック属性が中央揃えしてくれるようになります。

中央寄せができた例

inline要素をつけて中央寄した状態

inline要素になった事で確かに中央揃えは実現できました。

しかし幅や高さのサイズ指定も効かなくなりますし、レイアウトが崩れます。

専用の修正が必要ですね。

inlineからblockへも変更できる

逆に初期値がdisplay: inline;のタグを、display: block;に変えることもできます。

そうする事でそれまでインライン要素だったものにサイズや余白を指定する事ができる様になります。

場面に応じて使っていきましょう。

インラインブロック要素について

displayの値にはこれまで説明してきたblock・inline以外の指定もできます。

これがinline-block要素です。

CSSの書き方

div{ display: inline-block; //インラインブロック要素 }

CSSでは上記の様に、display: inline-block;と記述します。

inline-block要素の特徴

inline-block要素は言葉の通り、block要素とinline要素の両方の特徴を併せ持ったものになります。

・block要素の様に幅や高さ・余白の指定ができる
・inline要素の様に横並びに配置できる

両者の良いとこ取りした属性

ブロック要素でありながら横並びできる

要素の並びはinline要素の様に横並びでき、要素の中身(幅・高さ・余白)はblock要素の性質を持ちます。

つまり高さや幅を指定しつつ適切な余白を持った要素を、floatなどを使わずに横並びにする事ができるのです。

HTMLページにおいて要素を意図的に横並びさせるには様々な設定が必要になりますので、このinline要素の性質は重宝する訳です。

中央揃えもOK

さらにinline要素の通り「text-align・vertical-align」の中央揃え指定をすることもできます。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事