HTML

【初心者向け】図解付き!HTMLのdivとspanの使い方を知る

どうも、つよぽんです^^

今回はdivタグとspanタグの意味や、使い方について解説する記事となります。

この記事の想定読者は次のとおりです。

想定読者
  • divタグ、spanタグをなんとなくで使っているけどあまり意味を理解していない方
  • divタグ、spanタグと他のタグの違いを知りたい方
  • divタグ、spanタグをそもそも知らない方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのdivタグとspanタグの使い方を知るdivタグとspanタグの意味をご存知ですか?他のタグと異なり構造的な意味を持たないこの2つのタグは一体どのような場面で使われるのが正しいのでしょうか?今回の記事ではなんとなくで使ってしまいがちなdivタグとspanタグの解説をします。...

今回の内容は以下のとおりです。

今回の内容
  • divタグとspanタグの共通の意味
  • divタグとspanタグは他のタグと何が違うのか
  • divタグとspanタグの使い方

 

divタグとspanタグの共通の意味

divタグとspanタグはどういった意味で共通しているのでしょうか?

MDNのドキュメントページを見ると一番最初に行にそれぞれ共通の言葉が出てきます。

それは「汎用コンテナー」「汎用的な行内コンテナー」のように「汎用コンテナー」という言葉です。

MDNのドキュメントページ

この「汎用コンテナー」とはHTMLでいうとどんな意味になるのでしょうか?

次の章で具体的に解説していきます。

divタグとspanタグは他のタグと何が違うのか

ここであらためて確認ですが、divタグとspanタグはそれぞれHTMLで用意されているタグの1つです。

そして、それぞれのタグには構造的な意味を表すために何かしらの意味が含まれています。

例えば以下のとおりです。

タグの意味例
  • h1~h6タグ : 見出しタグ
  • pタグ : 段落タグ
  • ul, ol, li : 箇条書きタグ

上記にあげた3つ以外にもタグはたくさん存在して、それぞれ異なる意味を持っています。

しかし、divspanは他のタグと異なり構造的な意味を持っていません。さきほども述べたようにdivspanは「汎用コンテナー」だからです。

では一体「汎用コンテナー」とは具体的にどのようなものなのでしょうか?

結論から言うと、主にHTMLのスタイル(デザイン)の変更に使われることが多いタグになります。

そのため、基本的にはスタイルの変更を行うときにしか使われないので、CSSと一緒に利用しないとWebページ上では全く意味を持たないタグになってしまいます。

CSSに関してはまた別記事で詳しく解説しますが、CSSを利用することでWebページのスタイル(デザイン)を好きなように変更することが出来ます。

CSS: カスケーディングスタイルシート

以下の画像は「ヘッダー」「メインコンテンツ」のようにパーツごとにグループ分けを行っているWebページです。

Webページ構造パーツごとにグループ分けされている

上の画像のように、「ヘッダーはページの上」「メインコンテンツは左下」「サイドバーは右下」といった具合に、グループごとにページのどこに配置するか決める際にも、この「汎用コンテナー」は役立ちます。

それでは、divspanがページのスタイル変更のために使われる「汎用コンテナー」ということがわかったところで、divspanの違いを理解するために、それぞれの使い方について見ていきましょう。

divタグとspanタグの使い方

divspanの大きな違いは、divが「ブロックレベル要素」、spanが「インライン要素」だということです。

ブロックレベル要素」「インライン要素」については以下の記事で解説をしているので、わからない方はそちらを読んでいただけたらと思います。

あわせて読みたい
図とコードで理解!HTMLのブロックレベルとインラインの違い「ブロックレベル要素」と「インライン要素」が何か説明できますか?ブロックレベルとインラインを理解はWebページを組み立てるのに重要な概念となってきます。なんとなくで利用しているタグがブロックレベルかインラインか知ることでHTMLスキルも向上します。...

ブロックレベル要素インライン要素の特性を活かして、divとspanはそれぞれ次のような目的で使われます。

divとspanの使われ方
  • divタグ(ブロックレベル要素) : パーツをグループごとに分ける
  • spanタグ(インライン要素) : テキストの一部など部分的にスタイル(デザイン)を変える

それでは実際にdivとspanの挙動を図を使いながら解説していきます。

divの挙動

divはブロックレベルでグループ分けされるdivはブロックレベルでグループ分けされる

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像のコードを確認すると、h1タグ1つ目のpタグをdivタグで囲っています。

そして、CSSを使ってdivタグ内の背景色を黄色くしたところ、h1タグの内容と、1つ目のpタグの内容の背景が黄色くなりました。

2つ目のpタグに関してはdivタグに囲われていなので背景は黄色くなっていません。

この場合、h1タグと1つ目のpタグは「1つのグループとしてまとめられた」ということになります。

そして、divタグはブロックレベル要素なので横幅いっぱいに黄色背景が広がっています。(以下の記事でブロックレベル要素が横幅いっぱいに広がる説明をしています。)

あわせて読みたい
図とコードで理解!HTMLのブロックレベルとインラインの違い「ブロックレベル要素」と「インライン要素」が何か説明できますか?ブロックレベルとインラインを理解はWebページを組み立てるのに重要な概念となってきます。なんとなくで利用しているタグがブロックレベルかインラインか知ることでHTMLスキルも向上します。...

spanの挙動

spanはインライン(行内)の一部のスタイル変更に使えるspanはインライン(行内)の一部のスタイル変更に使える

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像のHTMLの出力結果を見ると、さきほど説明したdivタグと異なり、テキスト(文章)内の部分部分でスタイルの変更があたっているのがわかるかと思います。

スタイル変更点
  1. つよぽん : 文字が大きくなり、「ぽん」の部分には赤文字のスタイルもあたっている
  2. Web白熱教室 : 赤文字のスタイルがあたっている
  3. Web開発 : 黄色背景のスタイルがあたっている

①の「つよぽん」の「ぽん」の部分に関してはスタイル変更が2重であたっています。

  1. 文字サイスを大きくする
  2. 文字色を赤くする

これはコードを確認してみるとわかりますが、文字を大きくするspanタグの中で、文字を赤くするspanタグを使って実現しています。

そして、インライン要素になるので、それぞれのスタイル変更はspanタグで囲ったテキストの幅分だけ反映されています。(divタグの場合はブロック要素なので、横幅いっぱいにスタイルがあたっていた。)

まとめ

ここまで話してきた内容をまとめると以下のとおりです。

この記事のまとめ
  • divタグspanタグ構造的な意味を持たない「汎用コンテナー
  • 汎用コンテナーはスタイルの変更を行うCSSと組み合わせて使わないと意味がない
  • divタグはブロックレベル要素、spanはインライン要素

さきほどもリンクを貼りましたが、ブロックレベル要素インライン要素について理解していない方のために、解説記事のリンクを以下に貼っておきます。

あわせて読みたい
図とコードで理解!HTMLのブロックレベルとインラインの違い「ブロックレベル要素」と「インライン要素」が何か説明できますか?ブロックレベルとインラインを理解はWebページを組み立てるのに重要な概念となってきます。なんとなくで利用しているタグがブロックレベルかインラインか知ることでHTMLスキルも向上します。...

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのdivタグとspanタグの使い方を知るdivタグとspanタグの意味をご存知ですか?他のタグと異なり構造的な意味を持たないこの2つのタグは一体どのような場面で使われるのが正しいのでしょうか?今回の記事ではなんとなくで使ってしまいがちなdivタグとspanタグの解説をします。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です