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

【CSS初心者入門】インライン要素と便利なdisplay: inline-blockについて3分で解説！こんにちは、かなきち(@kanakichi0801)です

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

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

初期の何記事かは、CSSの基礎を簡単に説明した後にインライン要素の解説に入ります。すぐに解説を読みたい方はスキップを押してね！

これからの記事を読むと
インライン要素の特徴とdisplay: inline-blockの使い方がわかるよ！

こんな人に読んで欲しい

・CSS初心者の方

・HTML初心者の方

・ブロックレベル要素とインライン要素の違いを知りたい方

・コーディングで苦労したくない方

先ずはCSSの復習
インライン要素(display: inline)とは？
インライン要素のHTMLタグ一覧
インライン要素とブロックレベル要素のいいとこ取り display: inline-block について
まとめ

先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">

CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

インライン要素(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で指定できるのは、左右の余白のみです インライン要素にはmargin・paddingの上下が反映されない

ややこしいのですが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というプロパティは、１記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。