<div> ブロックレベル要素としての範囲を指定
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | フロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<div>タグの説明
<div>
は、文章の特定の範囲を指定して一つのまとまりとして扱いたい場合に使用します。
例えば、文章の構造に何ら影響を与えない形で、見た目だけをスタイルシートで変更したい場合に向いています。また、ウェブのデザイン面で工夫を凝らしたい場合に汎用的に扱える便利な要素でもあります。
この要素自体は、何の意味も持ちません。だからこそ、HTMLタグの中で最も柔軟に使える要素であるとも言えます。特に、CSS(スタイルシート)が一般的となった今、モダンなレイアウトが求められる環境では、必ず使わなければいけないタグの一つとなっています。
逆に、何かの意味や役割りが発生する場所に<div>
を採用すると、それだけで意味論的な構造が失われてしまいます。例えば、本来<article>
や<section>
を使うべき場所で、安易にこのタグを配置すべきではありません。
<div>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素自体は何の意味も持たず、文章のアウトラインにも影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも可能です。
<div>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<div>の使い方とサンプル
このタグは、あらゆる場面で汎用的なまとまりを指定できます。ウェブのデザイン面でCSSと最も親和性の高い要素と言えるでしょう。
HTML
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
CSS
div {
margin-top: 10px;
padding: 5px;
border: 1px solid #ccc;
}
#box1 {
text-align: left;
}
#box2 {
text-align: center;
}
#box3 {
text-align: right;
}
表示確認
CSSと<div>
の入れ子構造を利用したレイアウトの参考例です。このようなマークアップは、モダンデザインのサイトで一般的な技術となっています。
HTML
<div id="container">
<div id="header">Header</div>
<div id="contents">
<div id="main">Main</div>
<div id="sidebar">Side</div>
</div>
<div id="footer">Footer</div>
</div>
CSS
div {
margin-top: 1rem;
padding: 0 1rem 1rem 1rem;
border: 1px solid #ccc;
}
#contents {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
gap: 1rem;
min-height: 200px;
}
#contents > #main {
flex: 2;
}
#contents > #sidebar {
flex: 1;
}
表示確認
<div>に関連するHTMLタグ
文字列の表現を指定する要素 | |
---|---|
<div> | ブロックレベル要素としての範囲を指定 |
<span> | インライン要素としての範囲を指定する |
<br> | 改行を行う |
<wbr> | 文章の中で改行可能位置を指定する |
<b> | 文字を太字にする |
<mark> | 文章の中で目立たせたい箇所をマーキングする |
<pre> | ソースを整形済みテキストとして表示する |
<bdi> | ページの書字方向とは別の書字方向を指定する |
<bdo> | 書字方向を指定する |
<ruby> | ルビを振る文字列の範囲を指定する |
<rt> | ルビの内容を指定する |
<rp> | ルビが非対応な環境で読みがなを囲う記号を指定する |
<rtc> | ルビテキストの集まりを指定する |
<sub> | 下付き文字として表示する |
<sup> | 上付き文字として表示する |
<details> | 折りたたみ可能なディスクロージャー・ウィジェットを設置する |
<summary> | 折りたたみ可能なディスクロージャー・ウィジェットの概要を設定する |