HTML5

2020.11.11

【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.

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

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 h1h6 header li main nav ol p section table ul

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

インライン要素とは

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

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

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

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

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

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.

上記の例では、spaninline-blockを指定しています。
横並びにはなっていますが、widthheightの指定をすることができていますね!

まとめ

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

こちらも要チェック

0

関連記事

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

  • 2021.05.18

    【HTML5】上付き文字のsupタグと下付き文字のsubタグの使い方

    HTML5

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!