【CSS入門】 inline？block？displayで要素の種類を指定しよう

この記事ではCSSのdisplayプロパティについて解説します。

CSSを学ぶにあたって絶対に避けては通れない重要な項目なので、しっかりと理解していきましょう。

displayとは？

要素の種類を指定し、表示形式を決めます。

指定することで、例えばブロックレベル要素をインライン要素に変えたりインライン要素をブロックレベル要素に変えることができます。

displayの使い方

displayに指定できる値は以下の通りです。

全て説明すると長くなってしまいますので、今回の記事ではこの中からinline・block・inline-block・noneのみを紹介します（table・table-cell・flexについては下記の記事をお読みください）。

inline

display:inline；と指定した要素をインライン要素にすることができます。

インライン要素は前後に改行が入りませんので、インライン要素が続くと要素が横に並んでいきます。以下の場合、span要素はインライン要素なので、「赤」「青」「黄」の文字は横並びになります。

HTML

<p>信号は<span class="red">赤</span><span class="blue">青</span><span class="yellow">黄</span>です</p>

CSS

.red{
	color: red;
}

.blue{
	color: blue;
}

.yellow{
	color: yellow;
}

デフォルトでインライン要素

下記のタグはすべてデフォルトでインライン要素になっていますが、display:block;と指定すればブロックレベル要素に変ります。

気をつけること

インライン要素の幅（width）と高さ（height）は「テキストの長さ」や「文字の大きさ」により決まるため、CSSで指定できません。

marginとpaddingなどの余白に関しては、上下は指定できませんが左右は指定できます。text-alignとvertical-alignの指定もできますが、text-alignは親要素に対して指定しないといけません。以下の場合、pタグ内にあるaタグ(デフォルトでインライン要素)の背景色のみが変わります。

HTML

<p>詳しくは<a>こちら</a>から</p>

CSS

a{
	background: blue;
}

block

display:block;と指定した要素をブロックレベル要素にすることができます。

ブロックレベル要素は親要素の幅全体に広がり自動的に要素の前後に改行が入るので、ブロックレベル要素が続くと要素は縦に並んでいきます。以下の場合、ブロックレベルのpタグが縦に並びます。

HTML

<p class="one">これはpタグです</p><p class="two">これもpタグです</p>

CSS

.one{background: blue;}

.two{background: orange;}

デフォルトでブロックレベル要素

下記のタグはすべてデフォルトでブロックレベル要素になっていますが、display:inline;と指定すればインライン要素に変ります。

気をつけること

ブロックレベル要素は、幅（width）と高さ（height）をCSSで指定できます。さらに、marginとpaddingなどの余白に関しても上下左右すべて指定できます。

text-alignとvertical-alignの指定はできません(中のテキストは中央揃えになります)。

HTML

<div class="BOX-A">BOX-A<div>

CSS

.BOX-A{
	width: 100px
	height: 100px;
	margin: 20px auto;
	padding: 30px 20px;
}

inline-block

インラインブロックは、インライン要素とブロックレベル要素のハイブリットです。インライン要素と同じで前後に改行が入りませんので横に並んでいきますが、ブロックレベル要素のように幅（width）と高さ（height）を指定することができます。そして、marginとpaddingなどの余白に関しても、ブロック要素のように上下左右すべて指定できます。

text-alignとvertical-alignの指定もできますが、text-alignは親要素に対して指定しないといけません。これらの特徴から、幅や高さを持ったボタンなどを横並びにしたいときなどによく使われます。

横並びで使うときのメリット・デメリット

メリットはfloatで横並びをする時と違い、要素の高さが違ってもレイアウトが崩れません。

デメリットは、要素と要素の間に隙間が生まれる事です。しかし下記のように要素にfont-sizeを指定して、親要素をfont-size:0;にすれば解決できるので、横並びにしたいときはinline-blockをドンドン使っても問題ありません。

CSS

.parent{
  font-size: 0;            /* 子要素の間の隙間を消す */
}
  
.child{
  display: inline-block;
  font-size: 16px;          /* 親要素で消したフォントサイズを戻す */
}

none

指定された要素をブラウザ上で完全に非表示にします。

見えないというだけでなく存在自体無くすので、高さなどもすべて無くなります。レスポンシブデザインで、ある要素を「パソコンで見るときは表示したいけど、スマホでは非表示にしたい・・・」という場面は多々ありますがそんなときによく使われます。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

さらにわかりやすいように、特徴早見表を作りました。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。