こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第三回】ということで、インライン要素とdisplay: inline-blockについてわかりやすく解説していくよ！

この記事は前回のブロック要素と display: block の記事の続きです。まだ読んでいないという方は先に以下の記事を読んでからこの記事をお読みください。

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

インライン要素(display: inline)とは？

HTML5からブロックレベル要素とインライン要素という呼び方は廃止されました。

しかし、違いを紹介するにあたりあえて、初期値が display:blockの要素をブロックレベル要素とし、初期値が display: inlineの要素をインライン要素として紹介します。

HTMLタグのほとんどはブロックレベル要素(display:block)、インライン要素(display: inline)の２つの種類で分けられます。インライン要素の特徴を簡単にあげると以下の特徴があります。

• 改行が入らずインライン要素同士は横に配置される
• 幅や高さが指定できない
• 余白(margin・padding)の上下が効かない

言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。

インライン要素同士は横に配置される

この図のソースコードが以下になります。

[html]

<span>インライン要素</span>
<span>インライン要素</span>

インライン要素のspanタグを2つ書きました。インライン要素同士は並ぶと横に配置されます。

以下でブロックレベル要素との違いを解説しています。

ブロックレベル要素との違い

前回の記事の復習になりますが、ブロックレベル要素の特徴を図で解説します。

この図のソースコードが以下になります。

[html]

<p>ブロックレベル要素</p>
<p>ブロックレベル要素</p>

ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素同士は並ぶと縦に配置されます。

ブロックレベル要素は縦に並び、インライン要素は横に並ぶと覚えましょう。これは、ブロックレベル要素とインライン要素の一番わかりやすい特徴の違いと言えます。

インライン要素には幅・高さが指定できない

[html]

<span>インライン要素</span>

[css]

span{
  width: 100px;
  height: 100px;
}

インライン要素は幅や高さを指定しても反映されません。インライン要素に幅や高さを指定したい場合は こちら を参考にしてください。

インライン要素にはmargin・paddingの上下が反映されない。

marginで指定できるのは、左右の余白のみです

ややこしいのですがpaddingで指定できるのは上下左右です。しかし、指定できてもpaddingの上下は重なってしまい、余白を取ることはできません。

インライン要素は上下の余白を指定することができないと覚えましょう。

インライン要素のHTMLタグ一覧

使用頻度が高いブロックレベル要素のタグを以下にまとめました。

・<a>(リンク)
・<span>(インライン要素グループ化)
・<strong>(テキストの強調)
・<small>(テキストを小さくする)

etc…

インライン要素とブロックレベル要素のいいとこ取り display: inline-block について

インライン要素のCSSの初期値は、display: inline です。

先ほど、インライン要素の特徴であげたように幅や高さが指定できない。marginやpaddingの上下が指定できないとインライン要素のまま使える部分は限られます。

そこでとても便利なプロパティと値が display: inline-block です。

この値の特徴は以下になります。

• 改行が入らずインライン要素同士は横に配置される
• 幅や高さが指定できる
• 余白(margin・padding)が指定できる

[css]

span{
  display: inline-block;
}

spanタグは代表的なインライン要素のタグです。インライン要素に幅や高さ、marginやpaddingを指定したい場合に、該当のタグにdisplay: inline-blockをCSSで指定します。

display: inline-block の記述はCSSでよく使う記述なので覚えておきましょう！また、displayというプロパティは、１記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。

まとめ

前半にインライン要素のHTMLタグの種類とインライン要素の特徴3つ紹介しました。復習になりますが以下が3つの特徴です。

• 改行が入らずインライン要素同士は横に配置される
• 幅や高さが指定できない
• 余白(margin・padding)の上下が効かない

後半では、インライン要素に幅や高さ、marginやpaddingを指定したい場合に使える便利な display: inline-block を紹介しました。

この記事がいいなっと思ったら読者登録をお願いいたします！