みなさん、こんにちは。どんぶラッコです。
今日はボックス型とインライン型の違いについて解説します。
…と言われても「？」となる方が多そうですね。笑
我々が普段何気なく使っているhtmlタグですが、実はタグによって2つの性質を持っています。
それがブロック要素とインライン要素です。
今日は、それぞれの特徴についてご紹介します！
ブロック要素とインライン要素
まずは比較表から。
ブロック要素は文章の構成に関わるタグがこれに当たります。具体例で言うと、p, h1, div などですね。
一方インライン要素は文章そのものの性質を表現するために使うタグです。具体例で言うと、a, img, span などですね。
この2つの性質の最も大きな違いは改行があるかどうか、です。
例えばブロック要素である段落を使ったとしましょう。通常段落を使うときは1段落目、2段落目…というように段落分けされますよね。なので改行の処理が入ります。
一方、インライン要素は文章自体の性質を表すだけなので改行処理は入りません。
リンクは、他のページに遷移できる「文章」ですよね！
コンテンツカテゴリー
実は、HTML5ではブロック要素・インライン要素という概念は無くなってしまいました。
今はコンテンツカテゴリーという概念でHTMLタグは分類されています。
例えば、リンクはインライン要素でしたが、カードに対してリンクを貼りたい場合がありますよね。
でも、ブロック要素・インライン要素という分類だけでは、
文章の中の要素(リンクタグ)の中にブロック要素(カード, divタグ)が入っているのはおかしくね！？
となってしまいます。
そんな不整合さを解消するためにHTMLタグを再整理したのがコンテンツカテゴリーです。
しかし、HTMLタグそれぞれはブロック要素、インライン要素の性質は保持したままなので、まずはブロック要素、インライン要素の概念を抑えちゃいましょう！
頭の中を再整理する機会になれば幸いです♪
