自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【CSS】display:inline(インライン)とblock(ブロック)の違いについての解説になります!こんな方に読んでほしいCSSを学び始めた方へdisplayinline、blockの使い方について学びたい方へinlineとblockの違いについての解説になります。上の図のように、inlineは改行されずに、横並びになります。blockは改行され、ブラウザいっぱいに広がります。inline、blockには他にも特徴がありますので最後まで読んでいただき理解度を深めましょう。ブロックとは要素は縦に並びます幅、高さを指定はできます上下左右の余白の調整についてtext-alignやvertical-alignの指定はできませんまとめdisplayについてdisplayとは、ボックスの種類を指定します。今回は2種類の値を覚えましょう、書き方は以下のようになります。インラインとはインラインとは、指定した要素をインラインボックスとして表示します。書き方は以下のようになります。inline;}インラインボックスの特徴、要素の例は以下になります。要素の改行はされずに、次に続く要素はその要素の横に配置されますmarginは左右に指定できます、上下は指定できませんpaddingは上下左右に指定できますwidth、heightを指定できません横幅は中身の長さによって自動的に広がりますインラインの例<span>、<a>、<br>、<img>、<input>など※一部のタグ<img>、<input>は、width、height、margin(上下)の指定が可能です主に文章の一部として用いられるinlineである、spanタグを並べても改行はされず、要素はその要素の横に配置されます。横幅は中身の長さ(文字数や大きさ)によって自動的に広がります。文章の一部として用いられる要素には大きく分けて「ブロックレベル」と「インライン」の2種類があります。<p>要素には大きく分けて<span>「ブロックレベル」</span>と<span>「インライン」</span>の2種類があります。#28d53e;}幅、高さを指定はできません幅(width)と高さ(height)を指定できません。#e8505b;}上下左右の余白の調整について左右のmarginは効きますが、上下のmarginは効きません。左右のpaddingは効きますが、上下のpaddingは他の要素の領域と重なってしまいます。要素には大きく分けて「ブロックレベル」、「インライン」の2種類があります。h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、spanやaタグといったインライン要素には注意が必要です。前回の記事かコチラから<p>要素には大きく分けて<span>「ブロックレベル」、「インライン」</span>の2種類があります。h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、spanやaタグといったインライン要素には注意が必要です。10px;}text-align、vertical-alignの指定について「text-align」、「vertical-align」の指定は可能になります。「text-align」、「vertical-align」を指定する際には、親要素に対して指定する必要があります。【CSS】text-alignで要素の位置を指定しましょう!基本的なtext-alignの指定方法についての記事になります。【CSS】vertical-alignで縦の位置について学ぼう!!基本的なvertical-alignの指定方法についての記事になります。inlineからblockに変更も可能です。display:blockにすることで幅、高さの変更も可能になり、paddingの上下の指定も可能です。ブロックとはブロックとは、指定した要素をブロックボックスとして表示します。書き方は以下のようになります。block;}ブロックボックスの特徴、要素の例は以下になります。要素の前後に改行が入り、次に続く要素はその要素の下に配置されますmargin、paddingを上下左右に指定できますwidth、height、margin、padding、borderを指定できます要素の横幅いっぱいに広がりますブロックレベルの例<div>、<section>、<header>、<footer>、<h1〜h6>、<p>、<ul>、<li>、<form>など要素は縦に並びますblockである、p要素の前後に改行が入り、次に続く要素はその要素の下に配置されます。要素の横幅いっぱいに広がります。10px;}幅、高さを指定はできます幅(width)と高さ(height)を指定することが可能です。100pxが適用されております。#e8505b;}上下左右の余白の調整についてmargin、padding、borderを指定することが可能です。20px、padding:20pxが適用されております。20px;}text-alignやvertical-alignの指定はできません要素自体は左寄りのままで要素内の文字だけ中央配置になります。-rightをそれぞれ「auto」にする必要があります。auto--*/}まとめ今回はこれで以上です。inlineとblockの違いについての解説しました。次回は、「inline-block」、「none」についての解説を記事にします。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。