HTMLの必須概念！ブロック要素とインライン要素

HTML、CSSを勉強し始めると、「ブロック要素」とか「インライン要素」という言葉が出てきます。初めは難しく感じるかもしれませんが、普段からネットサーフィンをしているあなたは、これを理解するのに3分も要りません。

HTMLには三つの要素があります。

一体どういうことなのか、詳しく見ていきましょう。

ブロック要素とは

ブロック要素とは、ウェブページのブロックを作ります。（そのまんまやんけ）
ブロックなので、幅と高さ、また余白が指定できます。
webサイトは、一番上のメニューや、記事、関連記事を表示する部分、など、あらゆるブロックをもとに作られています。

ブロック要素には次の特徴があります。

• 要素の前後に改行が入る
• デフォルトでは、ブロック要素同士は縦に並ぶ
• 幅や高さ、余白を指定できる

ブロック要素を作るタグ

ウェブサイトを見ていくと、ブロックの中にさらにブロックがあったりします。例えば、記事ブロックの中に、見出しの部分と本文の部分があったり、その本文もさらにいくつかの段落に分かれています。
つまりブロック要素として、大きなブロックと小さなブロックを作るタグが存在します。

一番大きな枠組みだと、次の三つ見分けることができます。

• ヘッダー部分（一番上の部分）
• メイン部分（主に記事など）
• フッター部分（サイトのリンクなど）

ヘッダー部分はさらに、企業のロゴやメニューなどの部品に分かれています。
メイン部分は記事ブロックと他の記事をお勧めするサイドバーブロックなどに分かれます。
フッターには、サイト全体のリンクやSNSなどが張られていたりします。

このように、大きな枠組みを作るタグをグループ分け用ブロック要素といい、以下のものがあります。

上記のブロックの中に含まれる、さらに小さな部品であるブロックとして、次のものが挙げられます。

ブロック要素で一番覚えておきたいのは、CSSと組み合わせればブロックをどこに配置するか、ブロックの大きさをどうするかなどは自由自在であるということです。

インライン要素とは

インライン要素は、<a>や<span>などのタグによって作られ、要素の前後には改行が入りません。インライン要素の特徴として次のものが挙げられます。

• 要素の前後に改行が入らない
• 要素同士は横に並ぶ
• 幅や高さ、余白を指定できない

「インライン」という言葉の通り、インライン要素は文字列のただ中にあるようなイメージです。

インライン要素を作るタグ

インライン要素を作るタグには次のようなものがあります。

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

インラインブロック要素というのは、ブロック要素とインライン要素の二つの特徴を併せ持った要素です。
特徴として、次のものが挙げられます。

• 要素の前後には改行が入らない
• 要素は横並びに並ぶ
• 要素の高さや幅、余白を指定できる

三つのうち、始めの二つの特徴はインライン要素の特徴であり、三つ目の特徴はブロック要素の特徴です。

インラインブロック要素を作るタグ

インラインブロック要素を作るタグには次のようなものがあります。

まとめ

webサイトは主に3つの要素から作られています。

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

ある程度大きな、意味を持つ塊をブロック要素といいます。どんな意味を持たせるかによって、HTMLで定義するタグが異なりました。
また、文字列の中にリンクや太字を入れるなど、ちょっとした変化をつけるものをインライン要素といい、インライン要素を作るタグもそれぞれ存在しました。
インラインブロック要素はインライン要素の様に横並びに配置されていきますが、ブロック要素の様に高さや幅を指定することができました。