divタグとは?|特定の範囲をグループ化する

divタグとは?|特定の範囲をグループ化する
リンゴ
博士、ソースコードでよく目にする<div>タグって一体どんなタグなんですか?
博士
<div>タグは特定の範囲をグループ化するタグで、CSSと組み合わせることでページのデザイン性をアップさせる万能タグなんじゃ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<div>タグとは

 

<div>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / パルパブル・コンテンツ
利用場所フロー・コンテンツが期待される場所
内容フロー・コンテンツ


 
 
<div>タグは、特定の範囲をグループ化する際に使用します。
この要素を指定しただけでは表示上の変化はありませんが、複数の要素をグループ化し、class属性やid属性を使ってスタイルシートを設定したい場合や、lang属性を使って言語情報を付加したい場合などに利用できます。
 
 
博士
CSSを適用するためのコンテナ要素として利用されることが多いぞ。
 
 
<div>は非常に便利なタグですが、「div要素よりも適した要素がない場合の最終手段」として使用することが強く推奨されています。
適切な要素があるにも関わらずdiv要素を使用していると、Webページのアクセシビリティやメンテナンス性が低下してしまう恐れがあるからです。
 
 
博士
まずは、div要素よりも適した要素が他にないか検討しよう。
 
 
例えば、ブログの投稿にはarticle要素、章の区切りにはsection要素、ページのナビゲーションにはnav要素を使用するべきです。
 
 
リンゴ
なんでもかんでも<div>タグを使えばいいってことではないんですね。
 
 

使用例

 
 

表示例

– Steve Jobs (スティーブ・ジョブズ) –

ハングリーであれ。愚か者であれ。

 
 
博士
以下は、class属性を使ってスタイルを適用させた例じゃ。
 
 

 
 

表示例

divタグ class属性を使ってスタイルを適用させた例
 
 

リンゴ
<div>〜</div>で囲んだ範囲のスタイルが、まとめて変更されましたね!
 
 

まとめ

特定の範囲をグループ化する際は、<div>タグを使用します。
 
 

博士
HTMLマークアップに欠かせないタグとして覚えておこう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








divタグとは?|特定の範囲をグループ化する