HTMLブロック要素とインライン要素の特徴。初心者がつまづくCSSレイアウトの基本

HTMLはいくつものタグで構成されています。HTML5の登場でさらにタグも増えたので、正直まだ全部使いきれてません…。

そんなHTMLのタグですが、実は大きく２種類に分けられるんです。

それが「ブロック要素」と「インライン要素」。

CSSでサイトのレイアウトを整える時によく分かるんですが、この２つの分類が結構重要になってきます。

というのも、同じスタイルを適用しても一方には効かなかったり、微妙に効き方が違ったりするんです。

また、HTMLの文法にも関わってきます。これは間違って記述していても、ブラウザでは普通に表示されたりするので厄介です。

バリデート（文法チェック）しないと気付けないので、知らない間にコンピューターに分かりづらい記述になってしまいます。

ここでそんなブロック要素とインライン要素の特徴を紹介していきます。

ブロック要素の特徴

ブロック要素は横幅のサイズにかかわらず、縦にレイアウトされます。改行とかしなくても勝手に下へ下へと並んでいきます。

そして一番の特徴は、レイアウトが出来るということです。

webページをレイアウトする時に使うcssのスタイルでよく使うものに、「margin」「padding」「width」「padding」があります。これらは、要素の上下左右の余白や横幅・高さを指定するものですが、ブロック要素にはこれらすべてを指定することが出来ます。

インライン要素は横にレイアウトされていきます。要素の横に空間がある場合、改行しない限り横に並んでいきます。

そして重要なのが、レイアウトがしづらいということです。横幅・高さは基本的に指定できませんし、上下左右の余白も一部しか効かなかったり、変化が見づらいことがあります。

実は先ほど紹介したインライン要素の中に、「置換インライン要素」と呼ばれる特殊なインライン要素があります。img、input、select、textarea、buttonなどがそれにあたります。画像やフォームなど、テキストではないものに置き換えられるものが置換インライン要素です。

インライン要素なので横にレイアウトされていきますが、これらはレイアウトが可能です。

通常のインライン要素では扱いづらい「margin」「padding」「width」「padding」をすべて設定することが出来ます。

ちなみに、簡単に２つの要素について紹介しましたが、CSSの「displayプロパティ」を使うことで要素の表示方法を変更することもできます。

例えば、インライン要素であるimgに「display:block;」を指定することで、ブロック要素のように扱うことが出来ます。

ここで少しブロック要素とインライン要素の、文法上の注意点を紹介しておきます。

これらは最初に結構やってしまうので、コーディングが終わったら必ずバリデートをするのをお勧めします。

ブロック要素・インライン要素についてみてきましたが、実際ページを作っているともっと細かい違いが出てくると思います。

要素が思い通りに動いてくれないときは、今回のように一度基本に立ち返ってみるといいかもしれません。