こんにちは。ジーニアスウェブの米田です。
最近だんだんと暑くなってきましたね。
汗っかきの私には、これからの季節が憂鬱です。。。
さて今回は、コーディングの勉強を始めた人なら誰しも一度は行き詰まるであろう（私だけかもしれませんが）、ブロックレベル要素とインラインレベル要素についてお話ししようと思います。
目次／このページでわかること
HTML5における「ブロックレベル要素」と「インラインレベル要素」
実はHTML5からは、ブロックレベルかインラインレベルかという要素の大きな分類は廃止され、新しく7つのカテゴリーが定義されています。廃止されたというよりも、以前までの２つの要素をより細かく定義づけしたものという表現が近いように思います。
これらの新しく定義されたものを「コンテンツ・モデル」と呼び、HTML5でマークアップする場合は意識しなければなりません。しかし、すぐに理解する必要はなく（私も絶賛勉強中です）、優先して学習すべき点はブロックレベル要素とインラインレベル要素の考え方（概念こそ廃止されたが、考え方自体は引き継がれている）だと思います。
「ブロックレベル要素」と「インラインレベル要素」の違い
ブロックレベル要素とインラインレベル要素の間には、
大きく分けて3つの違いがあります。
01「ブロックレベル要素」は新しい行から始まり、「インラインレベル要素」は、行内のどこから始めることができる
ブロックレベル要素は、見出し、段落、表など、文章を構成する基本となる要素であり、1つのブロック（かたまり）として認識されます。
ブラウザでの表示でも、1つのかたまりとして扱われ、前後に改行が入ります。
インラインレベル要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。
ブラウザでの表示では、前後に改行が入らず、文章の一部として表示されます。
02配置ルール
ブロックレベル要素内には、他のブロックレベル要素やインラインレベル要素を配置することができます。
一方、インライン要素の中には、文字データや他のインライン要素を配置することはできますが、インライン要素の中にブロックレベル要素を配置することはできません。
正 <p><a>テキストが入ります</a></p>
誤 <a><p>テキストが入ります</p></a>
03インラインレベル要素では、一部のスタイルが無効化される
width – 効かない
height – 効かない
margine – 効かない
また、paddingは上下左右に効きますが、要素の高さには影響しないため、下図のようにコンテンツが重なってしまう可能性があります。
※img、input、textareaは特別なインラインレベル要素であり、上記のすべてのスタイルが効きます。
最後に
ブロックレベル要素とインラインレベル要素の考え方は非常に重要で、サイトを構築していく上でなくてはならない知識です。基礎中の基礎ですが、理解を曖昧のままにしていると無駄な時間を使ってしまったり、後々行き詰まる原因にもなりかねません。
私もまだまだ駆け出しです。基礎からしっかりと学んでいこうと思います。