【もりけん塾32日目】ブロックレベル要素・インライン要素とdisplayのまとめ

初めてのLP制作依頼の作業をしている、ねこらのん（@nekoranon256）です。

LP制作中に「画像をクリックしたらテキスト表示される」方法について調べていたらdisplayの

の違いについて知らなかったことともりけん先生からできることリストとして上がっていたものなのでまとめました！

またharuさん（@fuwafuwahappy）がわかりやすい記事を紹介してくださったので、そちらを参考にまとめていきます！

お役に立ててよかったです！
displayプロパティは、個人的にこちらがすごくわかりやすくてブクマしてます🥰https://t.co/Fdf4Km6ul0

— haru✍️育児×プログラミング (@fuwafuwahappy) August 9, 2020

（haruさん、ほんまにやさしい…）

ブロックレベル要素とインライン要素のちがい・使い方

HTMLには要素がいくつかあります。

そのHTMLの要素にはブロックレベル要素とインライン要素の2つに分類されるので違いや使い方を表にまとめました。

		ブロックレベル要素	インライン要素
特徴	改行	あり	なし
	並び	ブロック要素同士が縦配列	インライン要素同士が横配列
	横幅・高さ	指定可	指定不可
	余白	margiとpadding指定可	指定不可＜margin＞・上下が不可・左右は可＜padding＞・上下左右は可・他の要素領域を考慮することなく重ねることが可
要素例		h1〜h6 p div ulとol,li table form blockquoteなど	a span b img input strong time　など
他要素		ブロックレベル要素/MDNのサイトへ	インライン要素/MDNのサイトへ
例外			一部のインライン要素は高さ・幅・余白を設定できる性質あり＜一部の要素＞ img textarea input select　など

ブロックレベル要素でもCSSのdisplayを使って表示を変更することが可能。

引用：MDN

ブロックレベル要素は上記のように複数あります。

引用：MDN

インライン要素は上記のように複数あります。

divとspanの違いの認識はdivは『まとまり』でspanは『文中にある特定の部分の指定』でした。

spanではまとまりの前後に改行が入りません。一方divではまとまりの前後に改行が入ります。

spanのように前後の改行が入らないタグをインライン要素、divのように前後に改行の入るタグをブロック要素と呼びます。

引用：初心者向けHTML入門：書き方の基本とタグの使い方

つまり改行される（ブロック要素）のがdivで、改行されない（インライン要素）のがspanということのようです！

2つの違いは以下のとおりです。

要素の種類の2つの違いをみていきました。

displayには覚えておきたい頻出の値が以下の6つ。

コードを打っていると頻繁に出てきたので表でまとめていきます。

またflexについては以下の記事が非常にわかりやすかったのでこちらも掲載しておきます！

haruさん（@fuwafuwahappy）が教えてくださった記事のおかげでブロックレベル要素とインライン要素、display要素が理解することができました！

ググり方がお上手…！

育児をしながら独学されているので限られた短い時間でどうやってググっているのか気になるので、聞いてみようかな！

もりけん塾（@terrace_tech）

Thanks：もりけんさん

Post Views: 71