[HTML/CSS]ブロック要素とインライン要素とは?

こんにちは、がーすーです。

HTMLを学びはじめたばかりの方で多くの方がここで「ん?どういうこと?」と
疑問を抱くのではないでしょうか。

今回はそんな方のために、ブロック要素とインライン要素の違いについてわかりやすく解説していきます!

ブロック要素とインライン要素の代表例

まずはじめに各要素の代表的なタグを紹介します!

ブロック要素

  • div
  • p
  • h1〜h6
  • ul,ol,li

インライン要素

  • a
  • span

ブロック要素とインライン要素の特徴

ブロック要素・ブロック要素の中にインライン要素を入れられる
・横幅や高さを指定できる
・要素の前後に改行が入る
・marginやpaddingの指定ができる
インライン要素・インライン要素の中にはブロック要素を入れられない
・横幅や高さを指定できない
・要素の前後に改行は入らない
・上下のmarginやpaddingが指定できない

次の画像を見てもらうとわかりやすいと思います。

コード構成は同じなのにspanタグとaタグが横並びになっていますね。
ブロック要素が段落のように扱われるのに対して、インライン要素は文章のようなものなので改行されずインライン要素同士が横並びになります。

また、インライン要素には横幅や高さの指定ができないというのも大きな特徴です。

上の画像の通りdivタグとspanタグに横幅500px 高さ100pxのスタイルを指定していますが、spanタグには適用されていませんね。
インライン要素には横幅や高さの指定が適用されないというのもしっかり覚えておきましょう!

spanタグやaタグに高さや横幅を指定する方法

初心者
初心者

じゃあインライン要素と呼ばれるタグに高さや横幅を指定する方法はないの?

きちんと指定する方法がありますのでご安心ください!

方法は簡単!さっきのコードにdisplay:blockを加えるだけです!

styleにdisplay:blockを追加

これはどういうことかと言うと、spanタグに対して「ブロック要素になってください」という指定をしています。
このようにdisplayプロパティを使えば、
インライン要素→ブロック要素に変えるだけでなくその逆もできたり
インラインブロック要素にすることもできます。

ちなみにインラインブロックにするとどうなるかというと・・・

display:inline-blockを指定した場合

このように幅や高さを指定したままインライン要素のように横並びになります。

ではdisplayプロパティについて見ていきましょう。

displayプロパティについて

displayプロパティには要素のブロック⇄インラインの変更だけでなく
表示させたり非表示にしたりと様々なスタイル指定がありますが、
今回は3つだけ紹介します!

項目効果スタイル
display:block指定した要素をブロック要素にする・幅、高さ、上下余白が指定できるようになる
・前後に改行が入り、要素が縦に並ぶ
display:inline指定した要素をインライン要素にする・幅、高さ上下余白が指定できない
・改行されず、要素が横並びになる
display:inline-block指定した要素をインラインブロック要素にする・インライン要素のように横並びになる
・ブロック要素のように幅、高さ上下余白が指定できる

この辺はレイアウトを組む上で非常に重要なポイントなのでしっかり理解し、
思うままに扱えるようになりましょう。

まとめ

今回はブロック要素とインライン要素について解説してきましたがどうでしたか?
はじめのうちは、自分の思い通りにいかないかもしれませんが使ってくうちに呼吸をするように使えるようになるので大丈夫です!

最後に大事なポイントだけおさらいしておきましょう!

重要ポイント

・ブロック要素には「横幅」「高さ」「上下余白」が指定できてインライン要素にはできない
・ブロック要素は改行ができるので縦並び、インライン要素は横並び
・ブロック要素の中にはインライン要素を入れられるが逆はNG
・display プロパティを使えばブロック⇄インライン要素が変えられる

慣れないうちはこれらのことをなんとなく知っているだけで十分です!
あとはひたすら実践あるのみ!

では、よいプログラミングライフを!