SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのdivタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:04動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の八十五本目は、ディブタグです。
  4. 0:08ディブは、特別な意味を持たない、汎用のブロックコンテナです。
  5. 0:12箱そのものに、見出しや段落のような意味はありません。
  6. 0:16それでも、複数の部品をレイアウト用にまとめたり、シーエスエスの対象にしたりする場面で、
  7. 0:20とてもよく使われます。
  8. 0:24今回は、ディブの意味から、基本の書き方、セマンティック要素との使い分け、
  9. 0:30シーエスエスとの組み合わせ、よくある間違いまで、順番に確認していきましょう。
  10. 0:35基本の書き方を確認します。
  11. 0:38ディブは、開始タグと終了タグで内容を囲みます。
  12. 0:42表示はブロックレベルで、要素の前後に改行が入り、横幅いっぱいに広がるのが標準です。
  13. 0:49中には、見出しや段落、画像、リストなど、さまざまな要素を入れることができます。
  14. 0:56ディブ自体には見た目の装飾はほとんどなく、囲んだだけではページの印象は大きく変わりません。
  15. 1:05まずは、練習ファイルでひとまとまりをディブで囲み、開発者ツールでブロックとして表示される様子を確認してみてください。
  16. 1:15終了タグの書き忘れは、レイアウト崩れの原因になるので注意しましょう。
  17. 1:21記事の活用事例を読み解きます。
  18. 1:24記事では、複数の部品をレイアウト用にまとめる場面が例になっています。
  19. 1:29外側のディブにはカードグリッドというクラスが付いていて、その中に、エイチティーエムエルとシーエスエスの二枚のカードがアーティクルで入っています。
  20. 1:40ポイントは役割分担です。
  21. 1:42カード自体の意味はアーティクルが担い、並び全体を包むだけの箱には意味のないディブを使う、
  22. 1:46という分け方です。
  23. 1:50試すときは、練習ファイルのボディにこの例を写し、保存して再読み込みし、要素の入れ子が崩れていないかを開発者ツールで確認してください。
  24. 2:00属性を確認します。
  25. 2:02ディブには、この記事で必須となる専用の属性はありません。
  26. 2:06必要に応じて、アイディー、クラス、ラングといったグローバル属性を使います。
  27. 2:12アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。
  28. 2:19クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
  29. 2:25データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。
  30. 2:32また、クラスを付けても要素の意味は変わりません。
  31. 2:35見た目の指定と意味の選択は、別々に考えることが大切です。
  32. 2:40ディブが真価を発揮するのは、シーエスエスと組み合わせたときです。
  33. 2:44クラス名を目印にすれば、余白、背景色、枠線などをまとめて指定できます。
  34. 2:49さらに、ディスプレイにグリッドやフレックスを指定すれば、ディブ自体が横並びや格子状レイアウトの土台になります。
  35. 2:57記事のカードグリッドの例も、ディブにグリッドを指定することで、二枚のカードをきれいに並べる想定です。
  36. 3:04ただし、シーエスエスでボタンらしく見せてもディブはボタンにはなりません。
  37. 3:09操作が必要な場所では、必ずボタン要素を使ってください。
  38. 3:13セマンティック要素との使い分けが、ディブで最も大切な判断です。
  39. 3:19主題ごとの区切りならセクション、単独で意味が通じる記事ならアーティクル、
  40. 3:24案内ならナブ、ページの中心内容ならメイン、クリック操作ならボタンというように、
  41. 3:30内容に合う要素が用意されています。
  42. 3:35これらを優先すると、読み上げソフトや検索エンジンにも構造が伝わります。
  43. 3:42記事も、クリック操作ならボタン、主題の区切りならセクションなど、内容に合う要素を優先し、
  44. 3:48ディブは適切な意味のある要素がない場合に選ぶ、と説明しています。
  45. 3:55この順番を習慣にしてください。
  46. 3:58兄弟のような存在、スパンとの違いを整理します。
  47. 4:02ディブとスパンは、どちらも特別な意味を持たない汎用要素です。
  48. 4:07違いは表示の種類で、ディブはブロックとして前後に改行が入り、まとまりや文章全体のまとまりを包みます。
  49. 4:15一方スパンは行内の要素で、段落の中の一部の文字だけを包んで、色を変えたりスクリプトの対象にしたりします。
  50. 4:23文章の途中にディブを入れると意図せず改行されてしまうため、行の一部ならスパン、
  51. 4:28ひとまとまりの箱ならディブ、と覚えてください。
  52. 4:33迷ったら、改行が入ってよいかどうかで判断すると分かりやすいです。
  53. 4:38入れ子についても確認しておきましょう。
  54. 4:41ディブの中にさらにディブを入れることはでき、大きなまとまりの中に小さなまとまりを作れます。
  55. 4:48仕様の例でも、説明リストの中で組をディブで包む書き方が認められているように、
  56. 4:52グループ化自体は正しい使い方です。
  57. 4:55ただし、クラス名にはプロファイル、プロファイルヘッドのように役割が伝わる名前を付け、
  58. 5:00入れ子は必要な深さにとどめてください。
  59. 5:04何重にも包むと、あとから読む人が構造を追えなくなり、修正のときに迷子になります。
  60. 5:10シンプルな階層を心がけることが、長く使えるコードにつながります。
  61. 5:15ブラウザー互換性を確認します。
  62. 5:17記事が参照するエムディーエヌのデータでは、ディブ要素は、クロームが一以降、
  63. 5:22エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  64. 5:27エイチティーエムエルの最初期からある、最も基本的な要素の一つで、対応を心配する必要はほぼありません。
  65. 5:33ただし、要素自体が使えることと、組み合わせたシーエスエスのレイアウトが全環境で同じに見えることは別問題です。
  66. 5:40三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを実機で確認しておきましょう。
  67. 5:46よくある間違いは、ディブの多用です。
  68. 5:49何でもディブで作ってしまうと、見た目は整っていても、文書の意味が読み上げソフトや検索エンジンに伝わらない、
  69. 5:54いわゆるディブだらけの状態になります。
  70. 6:00特に危険なのが、クリックできるディブです。
  71. 6:03マウスでは押せても、キーボードのタブキーでは移動できず、エンターキーでも実行できないことが多く、
  72. 6:08操作できない部品になってしまいます。
  73. 6:13見出しは見出しタグ、送信はボタン、リストはリスト要素というように、まず意味のある要素を探し、
  74. 6:18見つからないときだけディブを選んでください。
  75. 6:23まとめです。
  76. 6:24ディブは、特別な意味を持たない汎用のブロックコンテナで、複数の部品をレイアウト用にまとめたり、
  77. 6:30クラスを付けてシーエスエスの土台にしたりするための要素です。
  78. 6:37専用の属性はなく、共通属性を使い、すべての主要ブラウザーで古くから使えます。
  79. 6:43使う前のチェックとして、内容に合う意味のある要素がないか、終了タグを忘れていないか、
  80. 6:48狭い画面でも内容が欠けないかを確認してください。
  81. 6:53お疲れさまでした。
  82. 6:54練習として、カードを二枚並べる小さなレイアウトを、ディブとアーティクルを使い分けて作ってみると理解が深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

divタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。特別な意味を持たないブロックのまとまり。適切な意味のある要素がない場合に選びます。

解説記事・サンプルコードを読む：HTMLのdivタグとは？属性・使い方・ブラウザー互換性と活用例 →