【CSSが効かないときに要チェック】ブロックレベル要素とインライン要素の違い

コーディングを学び始めた時につまずきやすいポイントはいくつかありますが、そのうちの1つが「ブロックレベル要素」と「インライン要素」なのではないかと思います！

CSSで指定した装飾がうまく反映されない！という時、その原因は要素の性質によるものかもしれません。。

ブロックレベル要素

ブロックレベル要素を一言で表すと、ボックスを積み上げていくように配置される要素です。

中の要素の大きさ（上記の例では文章の長さ）にかかわらず、親要素の幅いっぱいに広がります。

See the Pen 20201111-2 by spiqa design (@spiqa_design) on CodePen.

文章が多い時には、右端で自動的に折り返され、ブロック要素の高さが高くなっていきます。

See the Pen by spiqa design (@spiqa_design) on CodePen.

ブロック要素はwidthやheightを指定することで幅や高さを自由に指定することができます。

See the Pen block by spiqa design (@spiqa_design) on CodePen.

ブロック要素は、幅が短い時でも横に並ぶのではなく縦に並びます。

See the Pen by spiqa design (@spiqa_design) on CodePen.

ブロックレベル要素の例

address　article　dd　dl　dt　div　h1〜h6　header　li　main　nav　ol　p　section　table　ul

ブロックレベル要素は、比較的扱いやすく種類も多いので、自然と使用しているのではないかと思います。

インライン要素とは

指定しているのにCSSが効かない！というとき、その要素がインライン要素であることがあります。

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、要素の幅に収まらなくなるまで横に並んで配置され、親要素の幅いっぱいになったら折り返す要素です。

See the Pen 20201111-2 by spiqa design (@spiqa_design) on CodePen.

インライン要素は、ブロックレベル要素と異なり、CSSで幅や高さを指定することができません。こちらの例でもwidthとheightを指定していますが、効いていませんね。

※img、inputなど高さを指定することができるインライン要素も一部あります。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

marginは左右にのみ指定できます。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

上の例では、上下左右にmargin:20pxを指定していますが、検証機能で確認してみると

このように左右のmarginのみが反映されていることがわかります。
（参考）検証機能とは

paddingは上下左右の指定ができます。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

しかし、上下のpaddingの指定を行う場合、そのインライン要素の上下に配置している要素と重なってしまうことがあります。
上記の例でもpタグの文章にspanの要素（黄色の部分）が重なってしまっています。

インライン要素の余白を調整する場合は、ブロック要素で囲んで他要素と意図せぬ重なりが起きないようにするなど行うようにしてください。

最後に、インライン要素内にブロックレベル要素を入れるのは文法上誤りです。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

インライン要素内にインライン要素を入れることはできます。
ただしいマークアップを心がけましょう！

インライン要素の例

a　br　button　img　input　span

インライン要素に幅や高さを指定したい時には

文法上インライン要素を使用しているけれども、スタイルを調整するにあたって幅や高さを指定したいというときには、「ブロックレベル要素」または「インラインブロック要素」にすることで可能になります。

※ 「インラインブロック要素」は、インライン要素と同様に中身の要素に応じた広さになりますが、CSSで幅と高さを指定することができます

See the Pen 20201111-3 by spiqa design (@spiqa_design) on CodePen.

上記の例では、spanにinline-blockを指定しています。
横並びにはなっていますが、widthとheightの指定をすることができていますね！

まとめ

CSSが思ったように反映されない時など、要素の性質についてぜひ確認してみてください！

こちらも要チェック

HTML5

2021.05.12

【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

HTMLの基本中の基本、pタグについて解説します！ pタグとは？ pタグとは、段落を指定するためのタグになります。 pはParagraphの略であり、翻訳すると…