【副業を始めたい人必見!】副業開始マニュアル

【divタグとspanタグ】ブロック要素とインライン要素について解説!

【divタグとspanタグ】ブロック要素とインライン要素について解説! HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事では、ブロック要素とインライン要素について解説します。

ブロック要素とインライン要素の特性や使い方などが理解しやすいよう、画像を多く使って解説しています。

HTML5では「ブロック要素」と「インライン要素」という分け方はしなくなりましたが、タグにはそれぞれどちらかの要素に分類されています。

文章を表示させるpタグやリストを作るul・olタグのように前後に改行され、1つのブロックとして認識されるもののことを「ブロック要素」と呼び、リンクを挿入する際に使うaタグや画像を挿入するimgタグのように、テキストの一部として認識されるもののことを「インライン要素」と呼びます。

ブロック要素とインライン要素とは何なのかやそれぞれ分類されているタグ、ブロック要素を使ったテクニック、ルールについて解説していていきます。

【HTML初心者向け】まとめ記事一覧

前回の、表の作成方法については、【tableタグ】表の作成方法を解説!でまとめています。

スポンサーリンク

ブロック要素

ブロック要素とは?

ブロック要素」とは「ブロックライン要素」とも呼ばれ、文章を構成する基本となる要素です。

ブロック要素 改行の様子

上の画像を見てもらえればわかると思いますが、見出し(h2タグ)、文章(pタグ)、リスト(ul・olタグ)があり、それぞれの前後に間が空いています。

このように前後に改行が入るものを「ブロック要素」と呼びます。

」をイメージするとわかりやすいです。

「ブロック要素について」という箱と「ブロック要素とは…」という箱、「リスト」という箱が3つ組合わさって出来上がっています。

下の画像はそれぞれの背景に色を付けてみると要素がタグでブロックされているのがわかるかと思います。

ブロック要素 改行の様子 色付き

代表的なブロック要素

ブロック要素の代表的なタグを下の表で簡単にまとめました。
(クリックすると、タグの解説をしているページにジャンプします)

h1~h6 p ul・ol table div
form dl header nav article
section main aside footer

ブロック要素でグループ化

ブロック要素を使うことで「グループ化」することができます。

グループ化とは?

ブロック要素(h1タグ、pタグ、tableタグなど)のタグは様々ありますが、それらのタグをまとめて1つのブロックにすることを「グループ化」と呼びます。

小さな箱」を「大きな箱」に収納するイメージです。

ブロック要素のイメージ

グループ化のメリット

グループ化するとHTMLファイル内が整理され見やすくなります。

CSSで装飾する際に「大きなブロック要素」を指定することで、「小さなブロック要素」をまとめて装飾することができます。

グループ化したときの画像

ニシドラ
ニシドラ

グループ化しなかった場合は、「font-size: 16px」を個別に指定していますが、グループ化すると1回指定するだけで済むので、書くのが楽になります。

divタグでグループ化

グループ化するときに特定のタグ、例えばヘッダー部分をグループ化するときは「headerタグ」、メインコンテンツ部分をグループ化するときは「mainタグ」を使います。

「特別、決まってた用途がない」ときや「CSSでまとめて装飾したい」というような場合は「divタグ」を使います。

divタグ自体には特定の意味はありません。

しかし、ブロック要素を持っているので「とりあえずまとめたいとき」に使うことができます。

使い方はシンプルで、グループ化したい複数の要素の間に<div>タグを挟むだけです。

<div>
<h2>ブロック要素について</h2>
<p>
ブロック要素とは「ブロックライン要素」とも呼ばれ、文章を構成する基本となる要素で…。
</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>

これでdivタグを使ってグループ化することができました。

divタグをCSSで指定し、背景の色を変えると下の図のようになります。

div {
background: rgba(250,190,167);
}

divを指定し背景を赤にした図

グループ化したタグをCSSで指定することでまとめて装飾することができます。

インライン要素

インライン要素とは

インライン要素」は少々わかりにくいと思いますが、一言で表すと「テキストの一部」です。

aタグやimgタグはインライン要素のタグでこれらはテキストの一部として表示されます。
改行はされず、ブラウザ上では横に並んでいきます。

下のコードではspanタグを3つ使ってテキストを書いています。

<div>
<span class=”red”>あいうえお</span>
<span class=”blue”>かきくけこ</span>
<span class=”green”>さしすせそ</span>
<div>

ブラウザ上で表示させるとテキストが横に並びました。

インライン要素 表示結果

CSSで色を付けるとそれぞれが独立したものだということがわかります。

インライン要素 表示結果 色付き

spanタグ

spanタグ」はdivタグと同様に特定の意味を持たないタグです。

divタグとの違いは、spanタグがインライン要素であることです。

文章中にspanタグを挟むことで特定のテキストだけをCSSで装飾できるようになります。

<p>インライン<span>要素</span></p>

このようなコードがあり、spanタグをCSSで指定して「要素」の色を変えると下の画像のようになります。

spanタグを指定した様子

こんな感じでspanタグは使います。

代表的なインライン要素

代表的なインライン要素を表にまとめました。
(クリックすると、タグの解説をしているページにジャンプします)

a img span strong font
input br small blockquote script

ブロック要素とインライン要素のルール

ブロック要素とインライン要素には1つだけ文法上のルールがあります。

インライン要素の中にブロック要素は入れられません。

ブロック要素の中に、ブロック要素・インライン要素を入れることはできますが、インライン要素の中にはインライン要素しか入れることができません。

このルールは「HTML4.01」までのバージョンで適用されます。
「HTML5」では、ブロック要素・インライン要素ではなく、より難しく分類されていますが、「インライン要素の中にブロック要素を入れない」というルールはしっかり守りましょう。

まとめ

今回の内容をまとめます。

  • タグはブロック要素とインライン要素のどちらかに分けられる。
  • ブロック要素の前後に改行が入る
  • グループ化することでHTMLファイルで見やすくなり、CSSファイルでまとめて装飾することができる
  • 特定の意味を持たないdivタグ・spanタグ
  • インライン要素はテキストの一部と分類され、横に並ぶ
  • ルールがある(HTTML4.01以前)

ブロック要素とインライン要素について書いてきました。

divタグは便利なタグでID名・クラス名を付けることでdivタグ同士を選別して装飾することができ、ほとんどの場合ID名・クラス名のどちらかを付けます。

divタグはブロック要素の中でも使用頻度が高いのでしっかり使い方を覚えておきましょう。

次回は、グループ化するときに使うタグを7つ解説します。
今回解説した、グループ化について掘り下げた内容になっています。

コメント

タイトルとURLをコピーしました