SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.18
  • CATEGORY
TITLE

【CSS】display:inline(インライン)とblock(ブロック)の違いを解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】display:inline(インライン)とblock(ブロック)の違い
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • displayinline、blockの使い方について学びたい方へ
  • inlineとblockの違いについての解説になります。
inlineとblockの違い

上の図のように、
inlineは改行されずに、横並びになります。
blockは改行され、ブラウザいっぱいに広がります。

また、inline、blockには他にも特徴がありますので最後まで読んでいただき理解度を深めましょう。

displayについて

displayについて

displayとは、ボックスの種類を指定します。
今回は2種類の値を覚えましょう、書き方は以下のようになります。

指定できる値
  • inline(初期値)
    指定した要素をインラインボックスとして表示します
  • block
    指定した要素をブロックボックスとして表示します
  • inline-block 
    解説の記事ありますよ
    指定した要素をインラインボックスとして表示され、ブロックボックスとして表示します
    インラインボックスのように改行はされません、ブロックボックスのように、高さ、幅の指定は
    可能になります
  • none 
    解説の記事ありますよ
    指定した要素は非表示になります

display:inline インラインとは

>display:inline インラインとは

インラインとは、指定した要素をインラインボックスとして表示します。
書き方は以下のようになります。

/*--インラインボックス--*/
要素 {display: inline;}

インラインボックスの特徴、要素の例は以下になります。

インラインボックス要素の特徴
インラインの特徴
  • 要素の改行はされずに、次に続く要素はその要素の横に配置されます
  • marginは左右に指定できます、上下は指定できません
  • paddingは上下左右に指定できます
  • width、heightを指定できません
  • 横幅は中身の長さによって自動的に広がります
インラインの例
  • <span>、<a>、<br>、<img>、<input>など
  • ※一部のタグ<img>、<input>は、width、height、margin(上下)の指定が可能です

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

inlineである、spanタグを並べても改行はされず、要素はその要素の横に配置されます。
横幅は中身の長さ(文字数や大きさ)によって自動的に広がります。

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

要素には大きく分けて「ブロックレベル」「インライン」の2種類があります。
<p>要素には大きく分けて<span>「ブロックレベル」</span>と<span>「インライン」</span>の2種類があります。
p span {background-color: #28d53e;}

幅、高さを指定はできません

幅(width)と高さ(height)を指定できません。

幅、高さ

「インライン」
<span>「インライン」</span>

.inline-area01 .inline01 {
	width:200px;  /*--効かない--*/
	height: 100px; /*--効かない--*/
	background-color: #e8505b;
}

上下左右の余白の調整について

左右のmarginは効きますが、上下のmarginは効きません。
左右のpaddingは効きますが、上下のpaddingは他の要素の領域と重なってしまいます。

上下左右の余白

要素には大きく分けて「ブロックレベル」、「インライン」の2種類があります。
h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、
spanやaタグといったインライン要素には注意が必要です。
前回の記事かコチラから
<p>要素には大きく分けて<span>「ブロックレベル」、「インライン」</span>の2種類があります。
h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、
spanやaタグといったインライン要素には注意が必要です。
<a href="#">前回の記事かコチラから</a>
</p>
p span {
	padding: 40px 10px;
	margin: 10px;
	
	/*--領域の確認用に背景色を指定--*/
	background-color: rgba(241,241,241,0.1);
	
/*--
内訳
padding-top: 40px
padding-right: 10px
padding-bottom: 40px
padding-left: 10px

margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px
--*/
}
p a {
	padding: 40px 10px;
	margin: 10px;
}

text-align、vertical-alignの指定について

「text-align」、「vertical-align」の指定は可能になります。
「text-align」、「vertical-align」を指定する際には、親要素に対して指定する必要があります。

text-alignを指定

「インライン」
<div>
	<span>「インライン」</span>
</div>
/*--親要素--*/
div {text-align: center;}

div span {background-color: #e8505b;}

関する記事

基本的なtext-alignの指定方法についての記事になります。

基本的なvertical-alignの指定方法についての記事になります。

inlineからblockに変更

display: inlineからblockに変更も可能です。
display:blockにすることで幅、高さの変更も可能になり、paddingの上下の指定も可能です。

inlineからblockに変更

inlineからblock「インラインからブロック」

<p>inlineからblock<span>「インラインからブロック」</span></p>
p {
	text-align: center;
}

p span {

	/*--inlineからblockに変更--*/
	display: block;
	background-color: #1fcf51;
	padding: 10px 0;
}

display:block ブロックとは

display:block ブロックとは

ブロックとは、指定した要素をブロックボックスとして表示します。
書き方は以下のようになります。

/*--ブロックボックス--*/
要素 {display: block;}

ブロックボックスの特徴、要素の例は以下になります。

ブロックレベル要素の特徴
ブロックレベルの特徴
  • 要素の前後に改行が入り、次に続く要素はその要素の下に配置されます
  • margin、paddingを上下左右に指定できます
  • width、height、margin、padding、borderを指定できます
  • 要素の横幅いっぱいに広がります
ブロックレベルの例
  • <div>、<section>、<header>、<footer>、<h1〜h6>、<p>、<ul>、<li>、<form>など

要素は縦に並びます

blockである、p要素の前後に改行が入り、次に続く要素はその要素の下に配置されます。
要素の横幅いっぱいに広がります。

要素は縦に並びます

ブロック01

ブロック02

<div>
	<p>ブロック01</p>
	<p>ブロック02</p>
</div>
p {
	background-color: #e8505b;
	margin-bottom: 10px;
}

幅、高さを指定はできます

幅(width)と高さ(height)を指定することが可能です。
width: 200px、height: 100pxが適用されております。

幅、高さを指定はできます

ブロック

<p>ブロック</p>
p {
	width: 200px;
	height: 100px;
	background-color: #e8505b;
}

上下左右の余白の調整について

margin、padding、borderを指定することが可能です。
margin-top: 20px、padding:20pxが適用されております。

上下左右の余白

ブロック

ブロック

<p>ブロック</p>
<p>ブロック</p>
p {
	width: 100px;
	height: 100px;
	padding: 20px;
	background-color: #1ece50;	
}

p + p {margin-top: 20px;}

text-alignやvertical-alignの指定はできません

要素自体は左寄りのままで要素内の文字だけ中央配置になります。
要素自体を中央配置にしたい場合はmargin: -left -rightをそれぞれ「auto」にする必要があります。

text-alignを指定

ブロック

中央配置

<p class="block">ブロック</p>
<p class="margin-auto">中央配置</p>
p.block {
	width: 200px;
	text-align: center;
	margin-bottom: 20px;
	background-color: #e8505b;	
}

p.margin-auto {
	width: 200px;
	
	/*--要素自体を中央配置にしたい場合--*/
	margin: 0 auto;
	text-align: center;
	background-color: #e8505b;
	
	/*--
	内訳
	margin-top: 0px
	margin-right: auto
	margin-bottom: 0px
	margin-left: auto
	--*/	
}

まとめ

今回はこれで以上です。

inlineとblockの違いについての解説しました。
次回は、「inline-block」、「none」についての解説を記事にします。

inline-blockとnone

display:inline-blockとnoneの使い方について

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top