HTMLのdivタグ使い方を簡単解説！基本と実例10選

Yume

HTMLを勉強しているのだけど、divタグってなんだろう？

こんなお悩みにお答えします。

HTMLのdivタグは、Webページのレイアウトを作るうえで欠かせない要素のひとつです。

この記事では、divタグの使い方を基本から実践まで徹底的に解説します。初心者でも理解できるよう、わかりやすく丁寧に説明しながら、具体的な使い方や応用例を紹介します。

この記事を読むことで、Webページを効率的に構成し、見た目もきれいなページを作れるようになるはずです。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

divタグの基本と役割

divタグの役割と使い道

まず、divタグの基本的な意味とその役割について説明します。divタグは、HTMLのブロック要素の一つであり、Webページ内の要素をグループ化するために使われます。例えば、文章や画像をまとめてひとつのブロックとして扱うときに、このdivタグが利用されます。divタグはデザインに直接影響を与えるものではありませんが、レイアウトを整えるために不可欠です。

divタグの基本的な意味と目的

divタグの目的は、ページ内の要素を論理的なまとまりとして分けることです。たとえば、見出し、段落、画像などをひとつにまとめて扱うことで、CSS（スタイルシート）を使って一括でデザインや配置をコントロールできます。これにより、ページのレイアウトがより柔軟に管理できるようになります。

divタグがよく使われるシチュエーション

Webページでは、ヘッダー、フッター、サイドバー、メインコンテンツなど、異なる部分ごとにdivタグを使ってグループ化します。このようにページを構造的に区切ることで、HTMLのコードが読みやすくなり、変更や修正が簡単になります。

他のタグとの違いを理解しよう

divタグには似たような役割を持つタグもありますが、それらと適切に使い分けることが重要です。

divタグとspanタグの違い

divタグはブロック要素であり、画面全体の幅を占める性質があります。一方、spanタグはインライン要素で、テキストの一部をグループ化したいときに使います。たとえば、段落全体をdivタグで囲み、その中の特定の単語を強調表示したい場合にはspanタグを使います。

divタグとsectionタグの使い分け

sectionタグは、ページ内の意味のあるセクションを表すのに使います。divタグは単にレイアウトのための区切りですが、sectionタグは「意味」を持たせたいときに使います。たとえば、ニュース記事の各セクションや製品の紹介セクションなどにsectionタグを使います。

divタグの使い方を覚える前に知っておくべき基本

divタグを使いこなすには、まずHTMLドキュメントの構造と、その中での役割を理解することが重要です。

HTMLドキュメントの構造とdivタグの役割

HTMLドキュメントは、ページの見た目や構造を定義するために使われます。その中で、divタグは非常に柔軟に利用できる重要なツールです。

ブロック要素とインライン要素の違い

HTMLの要素には大きく分けてブロック要素とインライン要素があります。ブロック要素は行全体を占め、次の要素が必ず次の行から始まります。divタグはこのブロック要素に分類され、主にページ全体のレイアウトを構成します。

divタグの配置の考え方

divタグを使うことで、要素のグループ化や並べ方を柔軟に調整できます。例えば、ページの左側にサイドバー、右側にメインコンテンツを置くといったレイアウトもdivタグとCSSを使うことで簡単に実現できます。

divタグを正しく使うためのルール

divタグを使う際には、無駄なタグを増やさないことが重要です。無駄なタグはコードの読みやすさを損ない、ページの読み込み速度にも悪影響を与えます。

無駄なdivタグを避ける方法

divタグは便利ですが、必要以上に使うとHTMLが複雑になります。特にレイアウトを考えずに無造作にdivタグを追加すると、後でメンテナンスが難しくなることがあります。そのため、常に「本当にこのdivタグが必要か」を考えながら使うようにしましょう。

HTMLの構造をシンプルに保つコツ

できるだけシンプルにコードを保つために、他のタグ（例えばheaderタグやfooterタグなど）も併用して、HTMLをわかりやすく構造化することが推奨されます。特に意味を持たせる部分には適切なタグを使うことが大切です。

divタグの基本的な使い方

ここからは、divタグの具体的な使い方について説明します。初心者が直面しがちな疑問を一つずつ解決しながら進めます。

divタグの記述方法と基本構文

divタグの基本的な書き方

divタグの使い方は非常にシンプルです。開始タグ <div> と終了タグ </div> で囲むことで、その間の内容をまとめることができます。たとえば、段落や画像をまとめて扱いたいときには、このように使います。

<div>
  <p>これは段落です。</p>
  <img src="image.jpg" alt="サンプル画像">
</div>

このコードでは、段落と画像をひとつのグループとしてまとめています。

必須のHTML構文とその例

divタグを使うときに気をつけるべき点は、タグの閉じ忘れです。divタグの終わりには必ず </div> を忘れないようにしましょう。また、クラスやIDを設定することで、CSSやJavaScriptと連携しやすくなります。

divタグの具体的な使用例

シンプルなボックスレイアウトの作成

divタグを使えば、簡単にボックスレイアウトを作成できます。CSSを使ってボックスに枠線をつけたり、背景色を設定することで、ページの視覚的な区切りを作ることができます。

<div class="box">
  <h3>ボックスのタイトル</h3>
  <p>このボックスにはいろいろな情報が入ります。</p>
</div>

見出しや段落のグループ化の例

例えば、記事内の複数の見出しや段落をまとめてグループ化することで、その部分に特定のデザインを適用したい場合にdivタグを使用します。

<div class="article">
  <h2>見出し1</h2>
  <p>これは最初の段落です。</p>
  <h2>見出し2</h2>
  <p>これは次の段落です。</p>
</div>

divタグを使った基本レイアウトの実践

divタグは、Webページのレイアウトを作るときに大いに役立ちます。次に、ページの構成にdivタグをどのように使うのかについて解説します。

レイアウトを整えるためのdivタグの利用

ページのヘッダー・コンテンツ・フッターの区切り

Webページは、一般的にヘッダー、メインコンテンツ、フッターの3つに分かれています。divタグを使ってそれぞれを区切ることで、ページ全体の見た目が整い、CSSでデザインを変更する際にも便利です。

<div class="header">
  <h1>サイトのタイトル</h1>
</div>
<div class="content">
  <p>ここにメインコンテンツが入ります。</p>
</div>
<div class="footer">
  <p>© 2024 サイト名</p>
</div>

このようにヘッダー、コンテンツ、フッターをそれぞれdivタグで分けておくと、ページ全体の構成が理解しやすくなります。

カラムレイアウトの作り方

divタグを使えば、ページを複数のカラムに分割することも可能です。例えば、左右にカラムを配置することで、サイドバーとメインコンテンツのようなレイアウトを作成できます。

<div class="row">
  <div class="column left">
    <p>左側のカラムです。</p>
  </div>
  <div class="column right">
    <p>右側のカラムです。</p>
  </div>
</div>

CSSと連携したdivタグのカスタマイズ

divタグにスタイルを適用する方法

divタグにはクラスやIDを設定してCSSでデザインを加えることができます。これにより、背景色を変えたり、枠線を追加したりと、自由にカスタマイズできます。

<div class="custom-box">
  <p>カスタマイズされたボックスです。</p>
</div>

.custom-box {
  border: 2px solid black;
  background-color: lightblue;
  padding: 10px;
}

CSSクラスを使ったデザインの実例

複数のdivタグに同じクラスを付けることで、同じデザインを一括で適用することができます。例えば、商品リストを表示する際に同じスタイルを繰り返し使うことが可能です。

<div class="product">
  <h4>商品A</h4>
  <p>商品の説明です。</p>
</div>
<div class="product">
  <h4>商品B</h4>
  <p>別の商品です。</p>
</div>

.product {
  border: 1px solid gray;
  padding: 15px;
  margin-bottom: 10px;
}

divタグを使うときのベストプラクティス

divタグを使う際のベストプラクティスについて学びましょう。

divタグの効果的な使い方のポイント

読みやすいコードにするためのコツ

divタグは使い方次第でコードを見やすくも、逆に見にくくもしてしまいます。読みやすいコードを心がけるために、適切にクラス名を付けることが大切です。意味のあるクラス名を使うことで、後から見たときにそのdivタグが何を表しているのかがすぐにわかります。

意味を持たせるためのクラス名の付け方

クラス名は、そのdivタグの役割をわかりやすくするために重要です。例えば、メインコンテンツを表すクラス名に main-content と付けると、何を示しているのか一目で理解できます。

SEOに配慮したdivタグの使い方

検索エンジンに好まれるHTMLの書き方

SEOにおいてもdivタグの使い方は重要です。適切なタグを使い、意味を持たないdivタグの乱用を避けることで、検索エンジンがページの内容をより理解しやすくなります。

過剰なdivタグを避ける理由

無駄にdivタグを増やすと、ページが冗長になり、検索エンジンにとっても理解しにくいページになってしまいます。そのため、divタグは必要な部分にのみ使用し、シンプルな構造を保つことが推奨されます。

divタグを活用した応用編：実例10選

divタグは基本的な使い方だけでなく、さまざまな応用に使うことができます。ここでは、実際のWebページで活用できるdivタグの応用例を10選紹介します。

1. 画像とテキストを並べるボックスの作成

divタグを使って画像とテキストをきれいに並べたボックスを作成できます。特に商品紹介ページなどでよく使用される手法です。

<div class="product-box">
  <img src="product.jpg" alt="商品画像" class="product-image">
  <div class="product-details">
    <h3>商品名</h3>
    <p>商品の詳細説明がここに入ります。</p>
  </div>
</div>

.product-box {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
}
.product-image {
  width: 150px;
  margin-right: 10px;
}
.product-details {
  flex-grow: 1;
}

CSSでスタイルを整えることで、画像とテキストが横に並ぶようにレイアウトできます。

2. ヘッダーとナビゲーションの作成

divタグを使用して、ヘッダー部分とナビゲーションメニューをまとめることもできます。

<div class="header">
  <h1>サイト名</h1>
  <div class="navigation">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
  </div>
</div>

ナビゲーションメニューをCSSで装飾することで、見た目も整えられます。

.navigation {
  margin-top: 10px;
}
.navigation a {
  margin-right: 15px;
  text-decoration: none;
  color: #000;
}

3. フッターに複数の情報をまとめる

フッター部分に連絡先や著作権情報などをまとめて表示する場合にも、divタグが有効です。

<div class="footer">
  <div class="footer-info">
    <p>連絡先: info@example.com</p>
    <p>電話番号: 123-456-7890</p>
  </div>
  <div class="footer-copyright">
    <p>© 2024 Example Company</p>
  </div>
</div>

フッターを複数のセクションに分けることで、情報が整理され、見やすくなります。

4. カード型デザインの作成

divタグはカード型のデザインを作成する際にも非常に便利です。この手法はブログや製品リスト、サービス紹介など多岐にわたって使えます。

<div class="card">
  <h4>カードのタイトル</h4>
  <p>ここにカードの内容を記載します。</p>
</div>

CSSを用いて、カードごとに枠をつけてデザイン性を高めます。

.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

5. フォームのセクション分け

入力フォームの各セクションを分けるためにdivタグを使うことで、ユーザーにとって分かりやすいフォームが作れます。

<div class="form-section">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
</div>
<div class="form-section">
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
</div>

6. モーダルウィンドウの作成

divタグを使って、モーダルウィンドウ（ポップアップ画面）を作成することも可能です。これにより、ユーザーに重要な情報を伝える際に役立ちます。

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <p>ここにモーダルの内容が表示されます。</p>
  </div>
</div>

CSSとJavaScriptで表示・非表示を制御し、スタイリッシュなモーダルを作りましょう。

7. グリッドレイアウトの作成

CSSのグリッドレイアウトと組み合わせて、複数の項目を整然と配置することができます。

<div class="grid-container">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
</div>

CSSでグリッドレイアウトを設定することで、複雑なレイアウトも簡単に実現可能です。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

8. アコーディオンメニューの作成

アコーディオンメニューもdivタグを使って簡単に作成できます。これは、情報をコンパクトに表示し、必要に応じて展開する形式のデザインです。

<div class="accordion">
  <div class="accordion-item">
    <h4>質問1</h4>
    <div class="answer">
      <p>答え1がここに入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <h4>質問2</h4>
    <div class="answer">
      <p>答え2がここに入ります。</p>
    </div>
  </div>
</div>

9. メディアオブジェクトの作成

メディアオブジェクトとは、画像とテキストを並べる一般的なパターンです。ブログの投稿やニュース記事などに便利です。

<div class="media">
  <img src="example.jpg" alt="例の画像" class="media-image">
  <div class="media-body">
    <h4>メディアタイトル</h4>
    <p>ここにメディアの説明を入れます。</p>
  </div>
</div>

10. ローディング画面の作成

ページの読み込み中に表示するローディング画面にもdivタグを使うことができます。ローディングアニメーションをCSSで設定すれば、ユーザーに快適な体験を提供できます。

<div id="loading">
  <p>読み込み中...</p>
</div>

CSSでアニメーションを設定することで、ユーザーがページの読み込み待ちをしている間も快適に過ごせるようにします。

まとめ：divタグをマスターしよう

divタグは、Webページのレイアウトを整えるために欠かせないタグです。この記事で学んだように、基本的な使い方から応用的な使い方まで幅広く対応できるタグであり、HTMLを学ぶうえで避けて通れません。シンプルな構造を保ちながら、適切にdivタグを使いこなすことで、より美しいページを作ることができます。

次に学ぶべきステップとして、divタグと組み合わせるCSSやJavaScriptの技術を深めていきましょう。これにより、インタラクティブで魅力的なWebサイトを構築するスキルが身につくはずです。