CSSのdisplayをマスターしよう:inline、block、none…意味と違いは?

CSSのdisplayをマスターしよう(block・inline・none・inline-blockの意味と違い)

今回はCSSのdisplayプロパティについて勉強しましょう。少し分かりづらい内容ではありますが、ウェブサイトを作るためには必ず理解しておく必要があります。


前提知識

タグと要素

この記事では「要素」という言葉を連発します。要素というのは、<タグ>〜</タグ>のカタマリを表します。たとえば、<p>これは例文です<p>は1つの要素です。

1. displayとは?

1-1. display=CSSのプロパティ

CSSの書き方の基本

CSSの基本文法はセレクタ・プロパティ・値の3つから書かれるんでしたね。

「display」というのはプロパティの1つで、ざっくりというと要素の表示形式を決めるものです。たとえばp {display: block}や、span {display: inline}のように使われます。

1-2. displayが取ることのできる値

displayに対する値は、主に次の4つです。

displayに対する値

  • display: block p、div、ul、h1〜h6などのタグの初期値はdisplay:block
  • display: inline a、span、omgなどのタグの初期値はdisplay:inline
  • display: inline-block
  • display: none

全てのタグはこの中のいずれかの値を取ります。そして「pタグはblock」「aタグはinline」というようにタグごとにdisplayプロパティの初期値が決まっていますinline-blocknoneを初期値で取るタグはありません。CSSで指定しない限り、勝手に使われることはないわけですね。

1-3.それぞれの値のイメージ

displayプロパティにより要素の表示のされ方高さ・幅の設定が変わってきます。下図にざっくりとそれぞれの値の表示のされ方をまとめました。

CSSのdisplayプロパティまとめ

まずはイメージで理解しましょう。

  • block⇒要素が横までいっぱいに広がり、縦に並んでいく
  • inline⇒要素が平ぺったく横に並んでいく
  • inline-block⇒blockとinlineの中間
  • none⇒非表示になる

一般的なのはblockとinline

ウェブページでは、ほとんどの要素がdisplay: blockdisplay: inlineのどちらかを取っています。

1-4. 今から解説すること

これから説明する内容の結論をまとめた図をはじめに紹介しておきます。

CSSのdisplayの考え方

ぱっと見ても何のことだか分からないと思いますが、ひとつひとつ例を出しながら解説していくのでご安心ください。

2. display: blockとはどんなもの?

サルワカくんの顔(通常)
サルワカくん
ここからはそれぞれの値の意味を見ていきましょう。

divタグやpタグ、h1~h6の見出しタグなどは、指定しなくてもはじめからdisplay:blockになっています。以前はこれらの要素は“ブロック要素”と呼ばれていましたが、この呼び方は最新のHTML5で廃止されました。

2-1. display: blockの要素は縦に並ぶ

displayブロック

ウェブページを大まかにみるとdisplay:blockの要素が上から下へと並ぶことで構成されています。display:blockの要素の前後には改行が入り、縦に並んでいきます。

試しに、初期値がdisplay:blockであるpタグを2つ並べてみましょう。分かりやすくするために背景には色をつけることにします。

HTMLコード
<p class="block1">これはブロック1です</p>
<p class="block2">これはブロック2です</p>
CSSコード
.block1 {background: orange}
.block2 {background: skyblue}
ブラウザ表示

これはブロック1です

これはブロック2です

このように要素の前後には改行が入り、縦に並んでいきます。

2-2.display: blockなら幅と高さを指定できる

ブロック要素のwidthとheight

display:blockの要素には幅(width)と高さ(height)の指定ができます。つまり初期値がblockのdivタグやpタグは幅・高さが指定できるわけですね。

実際に試してみましょう。pタグの幅・高さをそれぞれ50pxずつ設定してみます。

HTMLコード
<p class="block1">これはブロック</p>
CSSコード
.block1 {background: orange;
		width: 100px;
		height: 100px}
ブラウザ表示

これはブロック

指定したwidthとheightがちゃんと反映されていますね。

2-3. 余白も上下左右に指定できる

block要素の考え方

display: blockの要素では、余白も自由に決めることができます。言い換えると、上下左右にpadding(要素の内側の余白)とmargin(要素の外側の余白)の値を自由に指定できます。

実際に試してみましょう。pタグにpaddingとmarginをそれぞれ10pxずつ設定してみます。

HTMLコード
<p class="block1">これはブロック</p>
CSSコード
.block1 {background: orange;
		padding: 10px;
		margin: 10px}
ブラウザ表示

これはブロック

きちんと余白が作られているのが分かりますね。

2-4. text-alignやvertical-alignの指定はできない

サルワカくんの顔(通常)
サルワカくん

text-alignは横方向のテキストの揃え位置を指定するプロパティです。text-align:centerとすれば文章や画像を中央揃えにすることができます。vertical-alignは、これの縦方向バージョンですね。

display:blockの場合、text-align:centervertical-align:middleを指定しても、要素が真ん中に表示されるようにはなりません(要素の中身のテキストは中央揃えになりますが)。

実際に見てみるのが早いですね。初期値がdisplay:blockのpタグを幅80pxにして、それをtext-alignで中央配置しようとしてみます。

HTMLコード
<p class="block1">ブロック</p>
CSSコード
.block1 {background: orange;
		width: 80px;
		text-align: center}
ブラウザ表示

ブロック

要素(オレンジの部分)は左に寄ったままです(要素内の“block”という文字は中央配置になっていますが)。

【参考】blockの要素を中央配置

CSS中級者向けのお話です。display:blockの要素を中央に配置したいときにはmargin-right:auto; margin-left:autoという指定により横に中央配置にすることができます。blockの要素を縦に中央配置にする方法は以下の記事で解説しています。

3. display: inlineとは?

次はdisplay: inlineです。spanタグやaタグ、imgタグなどは指定しなくても、初期値がinlineとなっています。以前はこれらの要素は“インライン要素”と呼ばれていましたが、この呼び方は最新のHTML5で廃止されました。

3-1. inlineの要素は主に文章の一部として用いられる

主に文中の一部として用いられる

display:inlineはおもに文中の一部として使われます。たとえば、テキストの装飾やリンクなどの要素にdisplay:inlineが用いられるわけですね。

3-2. inlineの要素の間には改行が入らず横に並ぶ

要素の前後には改行が入らず横に並ぶ

display:inlineの要素どうしの間には改行が入らず、横に並んでいきます。テキストと同じように右端までたどり着くと改行されます。

試しに、初期値がdisplay:inlineであるaタグとspanタグを並べてみましょう。分かりやすくするために背景には色をつけることにします。

HTMLコード
<p>これは<a href="http://saruwakakun.com/">aタグ</a>と<span>spanタグ</span>です。</p>
CSSコード
a {background: skyblue; 
	color:white}
span {background: orange}
ブラウザ表示

これはaタグspanタグです。

このようにdisplay:inlineの要素の前後には、改行が入らず横に並んでいきます。

3-3. inlineの要素は基本的にはblockの中で用いられる

inlineはblockの中で使われる

display:inlineの要素は、基本的にはdisplay:blockの要素の中に入ります

inlineの中にblockは基本的に入れない

逆にinlineの中にblockを入れることはほとんどありません。

3-4. inlineの要素は、幅と高さを指定できない

display:inlineの要素は、CSSで幅(width)と高さ(height)を指定することができません。inlineの要素の幅と高さは「要素の中身」に応じて決まります。つまり「テキストの長さ」や「文字の大きさ」により幅と高さが自動で決まるわけですね。

試しに、初期値がdisplay:inlineであるspanタグの幅と高さを調整しようとしてみます。

HTMLコード
<p>これは<span class="example">spanタグ</span>です。</p>
CSSコード
.example {width:200px; 
	height: 200px; 
	background: skyblue}
ブラウザ表示

これはspanタグです。

このようにdisplay:inlineの要素に対してCSSで幅と高さを指定しても、要素の大きさはピクリとも変わりません。

3-5. inlineの要素では上下の余白を調整できない

display:inlineのpaddingとmargin

display:inlineでは左右の余白(padding・margin)は自由に指定することができます。

display:inlineのpaddingとmargin

しかし、上下のmarginを指定することはできません。また、上下のpaddingは指定できるものの、paddingを大きくすると、改行されたときに前後の行とかぶってしまい、デザインが崩れてしまいます。

display: inlineの要素で指定できる余白は左右だけと思っておけば良いでしょう。 試しにspanタグの余白を変えようとしてみましょう。

HTMLコード
<p>これから書くのは<span class="example">margin20pxのspanタグ</span>の例文です。</p>
<p>これから書くのは<span class="example2">padding20pxのspanタグ</span>の例文です。</p>
CSSコード
.example {margin: 20px; 
	background: skyblue}
.example2 {padding: 20px; 
	background: skyblue}
ブラウザ表示

これから書くのはmargin20pxのspanタグの例文です。


これから書くのはpadding20pxのspanタグの例文です。

横方向のpaddingとmarginはきちんと指定されています。一方で、上下のmarginは無効になっています。上下のpadding指定は反映されているものの、前の行とかぶってカオスなことになってしまいました。

3-6. inlineの要素はtext-alignの指定ができる

display:inlineの要素では「text-align」や「vertical-align」を指定することができます(これはdisplay:blockにはできないことでしたね)。ただし、inlineの要素にtext-alignを指定するときには、親要素に対して指定する必要があります。つまり、以下のように指定をします。

divタグの中にあるspanタグに対して、text-alignで中央寄せしたいとき div {text-align: center}と書く

試しに、inlineの要素を中央寄せにしてみましょう。

HTMLコード
<div id="example">
  <span>inline</span>
</div>
CSSコード
#example {text-align:center
		/*↑親要素のdivに対して指定する*/}
span {background: skyblue}
ブラウザ表示

inline

一方でvertical-alignを指定するときには、親要素ではなくdisplay:inlineの要素に対して直接指定すればOKです。

3-7. inline⇔blockはCSSで指定すれば変えられる

たとえば、初期値がdisplay: blockのpタグをCSSでdisplay: inlineに指定して変えることができます。逆に、初期値がdisplay: inlineのaタグをdisplay: blockに変えることもできます。

例として、aタグをdisplay: blockに変えてみましょう

HTMLコード
<p>これは<a href="http://saruwakakun.com/">aタグ</a>の例文です。</p>
CSSコード
a {display: block;
	background: skyblue; 
	color:white}
ブラウザ表示

これはaタグの例文です。

aタグがdisplay: blockになりました。display:blockなので横幅や高さを変えることもできます。

4. display: inline-blockとは?

では、display: inline-blockというのはどんなものでしょうか。これはinlineとblockの間を取ったようなものです。ざっくりと言えば、要素の並び方はinline的で、要素の中身はblock的な性質を持ちます。

4-1. inline-blockの要素は改行が入らず横に並ぶ

display:inline-block

display:inline-blockの並びはdisplay:inlineと同じようになります。改行が入らず、横に並んでいくわけですね。

4-2. inline-blockは幅・高さの指定ができる

display:inline-blockの幅と高さの指定

一方で、幅・高さについてはdisplay:blockと同じように自由に指定することができます。

4-3. 上下左右の余白の指定もできる

ilnine-blockの余白の指定

また、余白についてもdisplay: blockと同じで、marginとpaddingの値を自由に指定することができます。

4-4. text-alignとvertical-alignの指定もできる

diplay inline-blockの指定

また、display: inline-blockでは「text-align」や「vertical-align」の指定をすることもできます。なんだかいいとこ取りという感じがありますね。

4-5. display: inline-blockの使いどころは?

基本的にウェブページはdisplay:blockとdisplay:inlineの要素で構成されます。では、この便利そうなinline-blockは実際にどのようなところで使えるのでしょうか。

基本的にモノを横に並べたいときに使える!

基本的には要素を横にずらっと並べたいときに使うと便利です。

inline-blockのつかいどころ 

たとえば、ソーシャルシェアボタンを横並びに配置するときだったり…

display:inline-blockのつかいどころ

メニューバー(ナビゲーションバー)でボタンを横に並べたいときなどですね。

これをdisplay: blockでやろうとすると、通常だと1つ1つのボタンの間に改行が入ってしまい、「float:left」などの少し複雑なプロパティで対応する必要があります。また、これをdisplay: inlineでやろうとすると、幅・高さ・余白を自由に指定できません。そこでdisplay: inline-blockが便利なわけですね。

メニューバーを作ってみよう

実際にinline-blockで横並びのメニューバーらしきものをサクッと作ってみましょう。ここでは初期値がdisplay:blockであるul・liを使ってみましょう。

HTMLコード
<div id="nav">
   <ul>
      <li>HOME</li>
      <li>HTML</li>
      <li>CSS</li>
   </ul>
</div>
CSSコード
/* ↓id="nav"の中のulに対してCSSを適用*/
#nav ul {
	list-style-type: none; /*箇条書きのポッチを消す*/
	text-align:center /*左右中央寄せは親要素に対して指定*/
	}

/* ↓id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li { 
	display: inline-block;/*inline-blockにします*/
	width: 80px;/*幅も指定できる*/
	height: 40px;/*高さも指定できる*/
	padding: 10px 0;/*余白も指定できる*/
	margin: 10px 0;/*余白も指定できる*/
	vertical-align: middle;/*縦の表示位置も指定できる*/
	background: skyblue;/*背景を水色に*/
	font-weight: bold;/*文字を太字に*/
	color:white /*文字色を白に*/
	}

このコードをブラウザで表示すると以下のようになります。

ブラウザ表示


ものすごく簡単ですね。このようにdisplay: inline-blockを使うことで簡単に要素を横に並べることができるのです。

5. display: noneとは?

最後はdisplay: noneです。この値を指定された要素は、ブラウザ上で非表示になります。これについては実際に例を見てみるのがいちばん分かりやすいですね。

HTMLコード
<p>これは残します。</p>
<p class="invisible">これを非表示にします。</p>
CSSコード
.invisible {display :none}
ブラウザ表示

これは残します。

このようにCSSでdisplay: noneを指定したものは、画像でも文字でも何でも非表示になります。

あくまでも非表示になるだけ

あくまでも非表示になるだけであり、ウェブページが開かれるときには普通に読み込まれています。非表示にしたからといって読み込み速度が早くなるわけではないことに注意しましょう。

display: noneの使いどころは?

スポンシブデザインを作るときに便利です。※レスポンシブデザイン:ウェブページを見る端末のサイズによって表示を変えるデザインのことたとえば「パソコンで見たときには表示させている要素を、画面の小さいスマホで見たときにだけdisplay:noneで非表示にする」という感じですね。

6. まとめ

ここまでdisplayの4つの値を見てきました。とくに理解しておきたいのはblockinlineinline-blockですね。改めて以下の画像を見て、それぞれの値を理解しておきましょう。

CSSのdisplayの考え方
displayプロパティの考え方まとめ
サルワカ