【HTML入門】divタグとは?特徴や使い方をわかりやすく解説

プログラミング言語の辞書

この記事ではHTMLのdivタグを使う方法について解説します!

divタグはサンプルコードや実際のコードでもとても良く見るタグですが、何に使われるかがよくわからないという初心者の方も多いのではないでしょうか。

今回の記事では、

  • divタグとは
  • divタグを使用する目的・使い方
  • divタグとspanタグの違い
  • divタグを横並びにする方法

について解説していきます。

忍者CODEの学習は“実践型”!
だから
結果を出せる!

忍者CODE

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級!それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から!
適正コース診断

HTMLのdivタグとは

divタグの「div」とは「Division」の略で、区分や部分といった意味を持ちます。divタグは単体では意味を持ちません。しかし、囲った部分をブロック要素としてまとめて扱うことができるようになるタグになります。

<h1>タグなら見出し、<p>タグなら段落、<img>タグなら画像といった要素とは違い、<div>タグ単体での意味合いがないのが特徴です。

では、divタグは実際どのように使用されるのか。次のセクションからdivタグの使い方などについて詳しく解説していきます。
HTMLの基礎を無料で学ぶ方はこちら▶

HTMLのdivタグを使用する目的・使い方

単体では意味合いを持たないdivタグを使用する目的は大きく2つです。

  1. 要素をグループ化する
  2. デザイン・レイアウトを構成する

要素をグループ化する

divタグは、関連する要素をグループ化するために使用されます。

例えば、ページ内の複数の要素をまとめてスタイリングしたり、JavaScriptで操作したりする場合に便利です。divタグを使うことで、そのグループ内の要素に対して統一的なスタイルや動作を適用することができます。

デザイン・レイアウトを構成する

divタグは、HTML要素を配置してデザインやレイアウトを構成するために使用されます。

ウェブページのセクションやコンテンツの配置を制御するためにdivタグを使うことが一般的です。例えば、ヘッダー、フッター、サイドバーなど、ウェブページの特定の領域をdivタグで囲み、それぞれの領域に対してスタイルや配置を指定することができます。

HTMLのdivタグとspanタグとの違い

今回解説をしている<div>タグと同じように<span>タグも、タグ単体での意味を持ちません。

<span>タグは、<span>要素</span> というようにスタイルを適応したい要素をタグで囲んで使います。以上の点から、<div>タグと<span>タグはよく似ているので混同することが多いです。

<div>タグと<span>タグの主な違いは以下の2点です。

  1. デフォルトの表示方法の違い
  2. スタイルとレイアウトの違い

デフォルトの表示方法

<div>タグは通常、改行を含むブロック要素です。つまり、デフォルトでは要素が新しい行に表示されます。

一方、<span>タグはインライン要素であり、テキストの一部としてフローに組み込まれます。つまり、デフォルトでは要素は同じ行に表示されます。

スタイルとレイアウト

<div>タグはブロック要素であるため、幅や高さ、余白などのスタイルやレイアウトを変更することができます。

一方、<span>タグはインライン要素であるため、テキストの一部をスタイル付けすることが一般的です。

ブロックレベル要素とは、HTML 4.01まで存在した要素(タグ)の分類の一つで、ページ内の配置(レイアウト)上、意味のある一つのまとまりとみなされるもの。
引用:IT用語辞典 e-Words

インライン要素とは、HTML 4.01まで存在した要素(タグ)の分類の一つで、文章などの一部を構成する断片的な内容を表すもの。
引用:IT用語辞典 e-Words

プログラミングスクールなら
忍者CODE

適正コース診断2

HTMLのdivタグを横並びにする方法

先ほど、<div>タグはブロック要素であるため、幅や高さ、余白などのスタイルやレイアウトを変更することができると説明しました。

以下で、実際にCSSのFlexBoxという機能を利用して横並びのレイアウトを作る方法を解説します。

<div class="content">
  <div class="content_item">りんご</div>
  <div class="content_item">みかん</div>
  <div class="content_item">ぶどう</div>
  <div class="content_item">バナナ</div>
  <div class="content_item">メロン</div>
</div>

実行結果
りんご
みかん
ぶどう
バナナ
メロン

この縦並びになっているアイテムを横並びにします。

.content {
  display: flex;
}

実行結果
りんごみかんぶどうバナナメロン

それぞれのアイテムの親クラスであるcontentクラスにdisplay: flex; という設定を加えただけで簡単に横並びのレイアウトを作ることができました。

HTMLの基礎を無料で学ぶ方はこちら▶

挫折することなくエンジニアを目指すなら

独学?スクール?

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

1人で学習を進められるかな…
どこをゴールにしていいかわからない…
挫折してしまわないかな…

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

・確実にスキルを身に着けたい
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
このように「確実に!」「効率良く!」といった声もよく上がります。
やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。
このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。
「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。
ですので、1人でCSSを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。
そこでおすすめしたいのが「忍者CODE」です。
忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。
上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。
ですが、忍者CODEでは
・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待
などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。
未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

まとめ

divタグは囲った部分をブロック化して、デザインを一括適応できる便利なタグです。classやidを割り当てれば、cssに記述した内容を適応できます。ブロック化できるため、ページ構成を分かりやすくできるのも魅力です。

とはいえ、divタグの多用はあまり良くないとされており、適切な場面での使用が求められます。正しくdivタグを活用して、デザインを整えることが大事です。