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

ブロック要素 インライン要素

シェアよろしくです

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

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

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

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

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

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

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

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

スポンサーリンク

ブロック要素の特徴

代表的なブロック要素

  • div
  • h1~h6
  • p
  • form
  • hr
  • table
  • ul
  • ol
  • dir
  • dl
  • pre
  • blockquote など

ブロック要素のレイアウト特徴

ブロック要素

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

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

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

インライン要素の特徴

代表的なインライン要素

  • a
  • br
  • img
  • span
  • strong
  • input
  • select
  • textarea
  • button
  • em
  • label
  • map など

インライン要素のレイアウト特徴

インライン要素

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

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

特殊なインライン要素「置換インライン要素」

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

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

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

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

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

ブロック要素・インライン要素 文法上の注意点

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

  1. ブロック要素の中にインライン要素はOK
  2. ブロック要素の中にブロック要素は一部NG(h1~h6、pの中にブロック要素は×)
  3. インライン要素の中にインライン要素はOK
  4. インライン要素の中にブロック要素はNG

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

最後に

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

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

スポンサーリンク



シェアよろしくです

フォローもよければ