- 公開日： 最終更新日：
divタグとは？使い方と他のhtmlタグとの違い
HTMLでレイアウトを整えたり、デザインの基盤を作る際に頻繁に使われるのがdivタグです。意味がないように見えるこのタグには、ページ構造を整理するうえで重要な役割があります。
このページでは、divタグの基本から他のタグとの違い、使い方までを解説します。
目次
divタグとは
divは、HTMLの中で複数のパーツをまとめて扱うためのタグです。見た目には特別な意味はありませんが、レイアウトやスタイルを整えるうえで欠かせない存在です。
複数のテキストや画像、リンクなどを一つのまとまりとして扱いたいときに使われ、divタグで囲むことで全体に一括でCSSを適用できるようになります。これにより、装飾や余白の調整、配置のコントロール、サイズの指定などが簡単に行えます。
たとえば、ページのヘッダーやフッター、記事エリアなどをdivタグで分けておくと、後からスタイルを柔軟に変更することができます。また、divタグを使用することでHTML全体の構造がわかりやすくなり、保守性や再利用性の高いコードを書くことができます。
意味のないように見えるdivタグですが、ページ全体のデザインやレイアウトを支える、土台のような存在だといえるでしょう。
divタグと他のhtmlタグとの違い
divタグは汎用的に使えるタグですが、他にも似たような役割を持つHTMLタグがあります。ここでは、特によく比較されるタグとの違いを紹介します。
pタグとの違い
pタグは主に段落を表すためのタグで、テキストの意味構造を示す意味的なタグです。一方、divタグには意味的な役割がなく、単に複数の要素をグループ化するために使われます。
たとえば、文章を1つの段落として表示したい場合はpタグが適していますが、複数のpタグや画像・リンクなどをまとめて1つのブロックとして扱いたい場合にはdivタグが有効です。
また、pタグの中にdivタグを入れることはHTMLの仕様上できませんが、divタグの中にpタグを入れることは可能です。このように、意味を持つpタグと、意味を持たず構造的な目的で使うdivタグは、使い分けが必要です。
sectionタグとの違い
sectionタグは、HTML5で導入された意味を持つセクション要素です。記事や機能のまとまりごとに構造化されたブロックを表現するために使われます。
たとえば、ブログ記事の本文やお問い合わせフォームの入力ブロックなど、明確なトピックや目的を持ったまとまりにはsectionタグが適しています。
一方、divタグは意味を持たず、単純に見た目の構造やスタイルを整えるために使われます。特に目的を持たない汎用的なブロック要素として、CSSレイアウトのために利用されるケースが多いです。
意味を伝える必要がある場面ではsectionタグ、単にグループ化してスタイルを当てたいだけならdivタグと使い分けるのが理想です。
spanタグとの違い
spanタグは、divタグと同じく意味を持たない汎用タグですが、違いはインライン要素である点にあります。つまり、spanタグはテキストの一部や、インライン要素内で部分的にスタイルを適用したい場合に使われます。
たとえば、文章の中の特定の語句に色をつけたり、太字にしたい場合にspanタグを使います。一方でdivタグはブロック要素であり、改行されて表示されるため、レイアウトの大枠を構成するために使います。
用途としては、spanは部分的な装飾、divは大きなまとまりの管理と覚えておくとわかりやすいでしょう。詳しくは、spanタグとは？のページをご覧ください。
divタグの使い方
divタグは、HTMLの中でも特によく使われるタグの一つです。ここでは、基本的な書き方から、中央寄せ・横並び・装飾といった具体的な使い方までを紹介します。
divタグでブロックを作る
divタグは、開始タグ<div>と終了タグ</div>で囲むだけで、ひとつのブロック要素を作ることができます。このブロックの中にテキストや画像、リスト、ボタンなどさまざまな要素を配置することで、ひとまとまりのグループとして扱えるようになります。
たとえば、ヘッダー部分、ナビゲーションメニュー、記事エリア、フッターなど、ページの大きな構成をそれぞれdivタグで囲っておくと、後からCSSでデザインやレイアウトを簡単に調整できます。
また、divタグにidやclassを設定すれば、CSSやJavaScriptと組み合わせた制御も可能になります。これにより、サイト全体の構造を整理しやすくなり、保守性も高まります。
divタグで囲った部分を中央寄せにする
divタグを使って囲ったコンテンツを中央に寄せたい場合、CSSのmarginやtext-alignなどを活用します。ブロック要素を左右中央に配置するもっとも一般的な方法は、以下のようにmargin: 0 auto;を使う方法です。
<div style="width: 300px; margin: 0 auto;">中央に配置されたブロック</div>
この書き方は、要素に幅を指定した上で左右のマージンを自動にすることで、中央寄せを実現しています。テキストだけを中央寄せしたい場合には、親要素にtext-align: center;を指定するのも効果的です。
なお、align="center"といった古い書き方もありますが、現在では非推奨となっており、CSSで制御するのが一般的です。
divタグを横並びにする
複数のdivタグを横並びに配置したい場合、CSSのFlexboxを使うのがもっともシンプルで柔軟です。親要素にdisplay: flex;を指定するだけで、子要素を横並びにできます。以下は基本的なコード例です。
HTMLの記述例
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
CSSの記述例
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
margin-right: 10px;
}
このようにすることで、要素同士が自然に横一列に並びます。justify-contentやalign-itemsなどを使えば、さらに細かな位置調整も可能です。
Flexboxは対応ブラウザも広く、モバイルにも強いため、現代のレイアウト設計において非常に有効です。
class属性を指定してデザインを装飾する
divタグにclass属性を付けることで、CSSから個別にスタイルを適用できるようになります。class名は自由に設定でき、同じclass名を持つ要素すべてに同じスタイルを適用できます。以下のスタイルがよく使われます。
HTMLの記述例
<div class="card">コンテンツ</div>
CSSの記述例
.card {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
このように、背景色、余白（padding）、枠線（border）、角丸（border-radius）などを指定することで、見た目を整えることができます。レイアウト全体の統一感を出したり、特定のパーツだけを強調するためには、class属性を活用するのが基本です。
divタグのまとめ
divタグは、HTMLの中でも汎用性が高く、構造やデザインの自由度を高めるために欠かせないタグです。意味を持たず、見た目には現れないものの、要素をグループ化して一括でスタイルを適用できることが特徴です。
pタグやsectionタグなど、他のHTMLタグと使い分けることで、より意味のある構造を作ることができ、可読性や保守性の高いHTMLを実現できます。また、中央寄せや横並び、背景色や余白の調整など、CSSと組み合わせることでdivタグの活用幅はさらに広がります。
基本的な使い方さえ理解できれば、さまざまな場面で応用が利くのがdivタグの強みです。Webページのレイアウト設計やデザイン調整をスムーズに行うためにも、正しい使い方を身につけておきましょう。
