HTML・CSS

【HTML・CSS勉強】ブロック要素とインライン要素の違いまとめ

こんにちは、Autumn(オータム)です。
今回はHTML・CSSを勉強し始めた方向けに、ブロック要素とインライン要素の違いについて解説していきます。

私自身、HTMLの勉強を始めてからちゃんと理解するまで時間がかかったのが、ブロック要素とインライン要素です。

最初の頃は、タグの意味を覚えることに必死になりがちですが、ここを押さえておかないと後々のページ制作の時に困るので、しっかり勉強しておきましょう。

ブロック要素・インライン要素ってなに?

数多くの種類のタグがありますが、それらをある特徴を元に2つのグループに分けた時の名前が「ブロック要素」「インライン要素」です。

各グループの代表的なタグはこんな感じです。

ブロック要素 : divタグ、pタグ、ulタグ、etc
インライン要素 : aタグ、spanタグ、inputタグ、etc

野球で例えると、選手の特徴を観察してバッター(打者)とピッチャー(投手)にグループ分けするようなイメージです。

それでは、この2つのグループの特徴を1つ1つ確認していきましょう。

要素の幅の違い

一番特徴的な違いは、それぞれの「要素の幅」の違いです。

ブロック要素は、ブラウザの幅いっぱいまで幅を取得するのに対し、インライン要素は中身と同じ大きさになります。実際の例を見てみましょう。

上がブロック要素の「pタグ」、下がインライン要素の「aタグ」です。


青色の部分が要素幅になります。ブロック要素であるpタグはブラウザの幅いっぱいまで伸びているのがわかります。


一方で、インライン要素のaタグは、中身の文章分の幅しか幅がないことがわかります。

この違いは、CSSでレイアウトを組むときに考慮しておく必要がありますので覚えておきましょう。

要素同士の並び方

次に要素が連続した時の並び方についてです。


エディタ上では3つ連続でpタグとaタグを並べていますが、


ブラウザ上ではこのようになります。ブロック要素は縦並び、インライン要素は横並びになります。

しかしブロック要素を横並びにしたい時もありますよね。
そのためにはいくつか方法がありますが、一番わかりやすいのは「インライン要素にCSSで変換する」方法です。


「class=”block”」のpタグをCSSでインライン要素に変換します。


すると、”block”というclass要素の「ブロック要素③」が、インライン要素となり横並びになりました。
また逆もしかりで、aタグに「display: block;」を記述すればブロック要素に変換できます。

高さ・幅・余白の指定

3つ目の大きな特徴として、ブロック要素は高さ(height)・幅(width)・余白 (margin・padding)の指定ができるのに対し、インライン要素は指定ができません。

「余白を指定したのに反応しない!」
「記述は間違ってないのになぜ?」

とパニックになりがちですが、よくよく確認したらそもそもインライン要素だったというオチは少なくありません。

じゃあインライン要素は幅・余白の指定ができないの?
と考える人もいますが、ちゃんと解決方法があります。

それは、「インラインブロック要素に変換する」という方法です。

「インラインブロック要素」というのは、2つの特性の良いとこ取りをした要素で、インライン要素の幅から、CSSで幅(width)・高さ (height)・余白(margin・padding)の指定ができます。


変換の仕方は簡単で、上記のように記述すれば良いだけです。


あとはそれぞれ指定してあげれば自由に幅や余白の指定をすることができます。

まとめ

最後に3つの要素の特徴をまとめました。

【インライン要素の特徴】
・要素の幅は中身と同じ大きさになる
・要素同士が横に並ぶ
・幅(width)と高さ(height)が指定できない
・余白(padding・margin)が指定できない
【ブロック要素の特徴】
・要素の幅はブラウザ幅いっぱいになる
・要素同士が縦に並ぶ
・幅(width)と高さ(height)が指定できる
・余白(padding・margin)が指定できる
【インラインブロック要素の特徴】
・要素の幅は中身と同じ大きさになる
・要素同士が横に並ぶ
・幅と高さが指定できる
・余白が指定できる

ここはWEB制作を行う上で基礎中の基礎の部分ですが、とても大切なポイントですのでしっかり理解して、サクサク作業ができるようになっていきましょう!

読んで頂きありがとうございました!

ABOUT ME
Autumn
元は文系卒・知識ゼロの住宅営業マン。半年のプログラミング完全独学でフロントエンドエンジニアに転職。現在はWEB制作・WEBマーケティングを社内で担当。田舎で自然と共に暮らしてます。