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

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

スポンサーリンク

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

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

要素 特徴
ブロック要素 ウェブページにおいてある程度大きな、意味を持ったブロックを定義する
インライン要素 in lineの名のごとく、文字列の中に小さなまとまりを定義する
インラインブロック要素 ブロック要素とインライン要素の二つの特徴を併せ持った要素

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

ブロック要素とは

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

ブロック要素の例
  • 記事ブロック
  • 見出し
  • メニュー
  • ヘッダー
  • フッター

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

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

ブロック要素を作るタグ

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

ブロック要素の説明
ウェブページの構成

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

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

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

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

タグ 用途
<header> ページ上部を囲む。ロゴやナビゲーションメニューなどが含まれることが多い
<nav> ヘッダーの中に含まれることが多く、メインのナビゲーションメニューを囲む
<article> 記事部分を囲む。
<section> あるテーマを持ったグループ
<main> ページのメインコンテンツ部分を囲む
<aside> サイドバーなどの本文ではない補足情報を囲む
<footer> ページの一番の部分を囲む
<div> 意味を持たないブロック要素を作る。主にCSSでの装飾が目的

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

タグ 用途
<h1~h6> 見出しを作る
<p> 段落を作る
<ul><ol> リストを作る
<table> 表を作る
<form> 入力フォームを作る

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

ブロックという言葉にふさわしく、好きなように配置することができるというわけだね!

インライン要素とは

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

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

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

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

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

タグ 用途
<a> リンクを作りたい文字列を囲む
<span> 主に、CSSで装飾する目的で囲む
<strong> 太字で強調したい文字列を囲む

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

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

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

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

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

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

タグ 用途
<img> 写真を挿入する
<input> ウェブページから入力するためのフォームを作る
<select> セレクトボックスを作る
<textarea> ウェブページから文章を入力するフォームを作る

まとめ

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

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

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

これらの概念を理解することは、CSSでwebサイトを装飾していくときに非常に役に立つんだ。いや、むしろ絶対に理解しなくてはならない概念なんだ!

スポンサーリンク