読者です 読者をやめる 読者になる 読者になる

KaoLog

ぽんこつwebデザイナーのスキルのメモ

ブロック要素とインライン要素についてまとめてみた

f:id:s2lybb:20170503181657p:plain

 

HTMLの要素にはブロック要素インライン要素があり、全ての要素はこの2つに分類されます。

今回は、このブロック要素とインライン要素について説明したいと思います。

ブロック要素とは?

・文章の骨組み

・横幅いっぱいの領域を持つので、要素が前後で改行される

・一部のブロック要素では、その中に別のブロック要素を入れることは不可能

 

ブロック要素になるHTMLのタグ

・h(見出しタグ)

・p

・ul

・ol

・table

・dl

・div

 

f:id:s2lybb:20170503223557p:plain

 

インライン要素とは?

・文章中の一部として扱われる要素

・行の一部として扱われるので、前後に改行なし

・インライン要素の中に別のインライン要素を入れることは可能だが、ブロック要素を入れることは不可能

 

インライン要素になるHTMLのタグ

・a

・em

・strong

・small

・img

・span

 

f:id:s2lybb:20170503223612p:plain

※インライン要素とブロック要素を見分けるには、改行出来るか出来ないかで見分けることが出来ます。

 

インライン要素では出来ないこと

インライン要素では効かないcssがあります。以下のcssを基準として、実際に効かないことを確かめてみたいと思います。

See the Pen インライン要素のまとめ(全体) by Kaorin (@PANbooooo) on CodePen.

 

widthが効かない

See the Pen インライン要素のまとめ(width) by Kaorin (@PANbooooo) on CodePen.

インライン要素に書いたwidthは全く効きません。

 

heightが効かない

See the Pen インライン要素のまとめ(height) by Kaorin (@PANbooooo) on CodePen.

インライン要素に書いたheightも全く効きません。

 

margin左右は効くが、上下は効かない

See the Pen インライン要素のまとめ(margin) by Kaorin (@PANbooooo) on CodePen.

インライン要素に書いたmarginは左右のみ効きますが、上下は効きません。

 

padding上下左右に効きます。しかし、少しクセがあります。

See the Pen インライン要素のまとめ(padding) by Kaorin (@PANbooooo) on CodePen.

paddingは上下左右設定出来ますが、上下につけたpaddingは上の行、下の行の文字とかぶってしまいます。

 

ブロック要素とインライン要素は入れ替える

ブロック要素とインライン要素は入れ替えることができます。

See the Pen インライン要素をブロック要素に by Kaorin (@PANbooooo) on CodePen.

このような感じです。

もともとインライン要素であったspanがdisplay:block;により、ブロック要素となりました。改行されていることから読み取れます。

また、ブロック要素のものにdisplay:inline;をかけると、インライン要素となります。

See the Pen ブロック要素をインライン要素に by Kaorin (@PANbooooo) on CodePen.

実際にブロック要素であるpはインライン要素となりました。改行されていないところから読み取れます。

 

インライン要素とブロック要素について知ることで、コーディングがより早くなることでしょう