WEBVTT

1
00:00:00.000 --> 00:00:00.892
こんにちは。

2
00:00:00.892 --> 00:00:04.161
エイチティーエムエル、リファレンス解説です。

3
00:00:04.161 --> 00:00:08.470
エイチティーエムエルタグ編の八十五本目は、ディブタグです。

4
00:00:08.470 --> 00:00:12.928
ディブは、特別な意味を持たない、汎用のブロックコンテナです。

5
00:00:12.928 --> 00:00:16.792
箱そのものに、見出しや段落のような意味はありません。

6
00:00:16.792 --> 00:00:20.804
それでも、複数の部品をレイアウト用にまとめたり、シーエスエスの対象にしたりする場面で、

7
00:00:20.804 --> 00:00:24.816
とてもよく使われます。

8
00:00:24.816 --> 00:00:30.314
今回は、ディブの意味から、基本の書き方、セマンティック要素との使い分け、

9
00:00:30.314 --> 00:00:35.812
シーエスエスとの組み合わせ、よくある間違いまで、順番に確認していきましょう。

10
00:00:35.812 --> 00:00:38.181
基本の書き方を確認します。

11
00:00:38.181 --> 00:00:42.373
ディブは、開始タグと終了タグで内容を囲みます。

12
00:00:42.373 --> 00:00:49.845
表示はブロックレベルで、要素の前後に改行が入り、横幅いっぱいに広がるのが標準です。

13
00:00:49.845 --> 00:00:56.952
中には、見出しや段落、画像、リストなど、さまざまな要素を入れることができます。

14
00:00:56.952 --> 00:01:05.153
ディブ自体には見た目の装飾はほとんどなく、囲んだだけではページの印象は大きく変わりません。

15
00:01:05.153 --> 00:01:15.724
まずは、練習ファイルでひとまとまりをディブで囲み、開発者ツールでブロックとして表示される様子を確認してみてください。

16
00:01:15.724 --> 00:01:21.920
終了タグの書き忘れは、レイアウト崩れの原因になるので注意しましょう。

17
00:01:21.920 --> 00:01:24.243
記事の活用事例を読み解きます。

18
00:01:24.243 --> 00:01:29.509
記事では、複数の部品をレイアウト用にまとめる場面が例になっています。

19
00:01:29.509 --> 00:01:40.660
外側のディブにはカードグリッドというクラスが付いていて、その中に、エイチティーエムエルとシーエスエスの二枚のカードがアーティクルで入っています。

20
00:01:40.660 --> 00:01:42.518
ポイントは役割分担です。

21
00:01:42.518 --> 00:01:46.622
カード自体の意味はアーティクルが担い、並び全体を包むだけの箱には意味のないディブを使う、

22
00:01:46.622 --> 00:01:50.726
という分け方です。

23
00:01:50.726 --> 00:02:00.948
試すときは、練習ファイルのボディにこの例を写し、保存して再読み込みし、要素の入れ子が崩れていないかを開発者ツールで確認してください。

24
00:02:00.948 --> 00:02:02.386
属性を確認します。

25
00:02:02.386 --> 00:02:06.859
ディブには、この記事で必須となる専用の属性はありません。

26
00:02:06.859 --> 00:02:12.770
必要に応じて、アイディー、クラス、ラングといったグローバル属性を使います。

27
00:02:12.770 --> 00:02:19.480
アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。

28
00:02:19.480 --> 00:02:25.551
クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。

29
00:02:25.551 --> 00:02:32.101
データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。

30
00:02:32.101 --> 00:02:35.935
また、クラスを付けても要素の意味は変わりません。

31
00:02:35.935 --> 00:02:40.408
見た目の指定と意味の選択は、別々に考えることが大切です。

32
00:02:40.408 --> 00:02:44.948
ディブが真価を発揮するのは、シーエスエスと組み合わせたときです。

33
00:02:44.948 --> 00:02:49.913
クラス名を目印にすれば、余白、背景色、枠線などをまとめて指定できます。

34
00:02:49.913 --> 00:02:57.716
さらに、ディスプレイにグリッドやフレックスを指定すれば、ディブ自体が横並びや格子状レイアウトの土台になります。

35
00:02:57.716 --> 00:03:04.810
記事のカードグリッドの例も、ディブにグリッドを指定することで、二枚のカードをきれいに並べる想定です。

36
00:03:04.810 --> 00:03:09.917
ただし、シーエスエスでボタンらしく見せてもディブはボタンにはなりません。

37
00:03:09.917 --> 00:03:13.748
操作が必要な場所では、必ずボタン要素を使ってください。

38
00:03:13.748 --> 00:03:19.318
セマンティック要素との使い分けが、ディブで最も大切な判断です。

39
00:03:19.318 --> 00:03:24.828
主題ごとの区切りならセクション、単独で意味が通じる記事ならアーティクル、

40
00:03:24.828 --> 00:03:30.338
案内ならナブ、ページの中心内容ならメイン、クリック操作ならボタンというように、

41
00:03:30.338 --> 00:03:35.848
内容に合う要素が用意されています。

42
00:03:35.848 --> 00:03:42.137
これらを優先すると、読み上げソフトや検索エンジンにも構造が伝わります。

43
00:03:42.137 --> 00:03:48.965
記事も、クリック操作ならボタン、主題の区切りならセクションなど、内容に合う要素を優先し、

44
00:03:48.965 --> 00:03:55.793
ディブは適切な意味のある要素がない場合に選ぶ、と説明しています。

45
00:03:55.793 --> 00:03:58.488
この順番を習慣にしてください。

46
00:03:58.488 --> 00:04:02.206
兄弟のような存在、スパンとの違いを整理します。

47
00:04:02.206 --> 00:04:07.056
ディブとスパンは、どちらも特別な意味を持たない汎用要素です。

48
00:04:07.056 --> 00:04:15.138
違いは表示の種類で、ディブはブロックとして前後に改行が入り、まとまりや文章全体のまとまりを包みます。

49
00:04:15.138 --> 00:04:23.544
一方スパンは行内の要素で、段落の中の一部の文字だけを包んで、色を変えたりスクリプトの対象にしたりします。

50
00:04:23.544 --> 00:04:28.556
文章の途中にディブを入れると意図せず改行されてしまうため、行の一部ならスパン、

51
00:04:28.556 --> 00:04:33.567
ひとまとまりの箱ならディブ、と覚えてください。

52
00:04:33.567 --> 00:04:38.740
迷ったら、改行が入ってよいかどうかで判断すると分かりやすいです。

53
00:04:38.740 --> 00:04:41.494
入れ子についても確認しておきましょう。

54
00:04:41.494 --> 00:04:48.018
ディブの中にさらにディブを入れることはでき、大きなまとまりの中に小さなまとまりを作れます。

55
00:04:48.018 --> 00:04:52.005
仕様の例でも、説明リストの中で組をディブで包む書き方が認められているように、

56
00:04:52.005 --> 00:04:55.991
グループ化自体は正しい使い方です。

57
00:04:55.991 --> 00:05:00.413
ただし、クラス名にはプロファイル、プロファイルヘッドのように役割が伝わる名前を付け、

58
00:05:00.413 --> 00:05:04.834
入れ子は必要な深さにとどめてください。

59
00:05:04.834 --> 00:05:10.633
何重にも包むと、あとから読む人が構造を追えなくなり、修正のときに迷子になります。

60
00:05:10.633 --> 00:05:15.272
シンプルな階層を心がけることが、長く使えるコードにつながります。

61
00:05:15.272 --> 00:05:17.212
ブラウザー互換性を確認します。

62
00:05:17.212 --> 00:05:22.190
記事が参照するエムディーエヌのデータでは、ディブ要素は、クロームが一以降、

63
00:05:22.190 --> 00:05:27.168
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

64
00:05:27.168 --> 00:05:33.633
エイチティーエムエルの最初期からある、最も基本的な要素の一つで、対応を心配する必要はほぼありません。

65
00:05:33.633 --> 00:05:40.615
ただし、要素自体が使えることと、組み合わせたシーエスエスのレイアウトが全環境で同じに見えることは別問題です。

66
00:05:40.615 --> 00:05:46.692
三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを実機で確認しておきましょう。

67
00:05:46.692 --> 00:05:49.429
よくある間違いは、ディブの多用です。

68
00:05:49.429 --> 00:05:54.903
何でもディブで作ってしまうと、見た目は整っていても、文書の意味が読み上げソフトや検索エンジンに伝わらない、

69
00:05:54.903 --> 00:06:00.376
いわゆるディブだらけの状態になります。

70
00:06:00.376 --> 00:06:03.569
特に危険なのが、クリックできるディブです。

71
00:06:03.569 --> 00:06:08.587
マウスでは押せても、キーボードのタブキーでは移動できず、エンターキーでも実行できないことが多く、

72
00:06:08.587 --> 00:06:13.605
操作できない部品になってしまいます。

73
00:06:13.605 --> 00:06:18.774
見出しは見出しタグ、送信はボタン、リストはリスト要素というように、まず意味のある要素を探し、

74
00:06:18.774 --> 00:06:23.944
見つからないときだけディブを選んでください。

75
00:06:23.944 --> 00:06:24.889
まとめです。

76
00:06:24.889 --> 00:06:30.955
ディブは、特別な意味を持たない汎用のブロックコンテナで、複数の部品をレイアウト用にまとめたり、

77
00:06:30.955 --> 00:06:37.020
クラスを付けてシーエスエスの土台にしたりするための要素です。

78
00:06:37.020 --> 00:06:43.006
専用の属性はなく、共通属性を使い、すべての主要ブラウザーで古くから使えます。

79
00:06:43.006 --> 00:06:48.205
使う前のチェックとして、内容に合う意味のある要素がないか、終了タグを忘れていないか、

80
00:06:48.205 --> 00:06:53.404
狭い画面でも内容が欠けないかを確認してください。

81
00:06:53.404 --> 00:06:54.822
お疲れさまでした。

82
00:06:54.822 --> 00:07:03.644
練習として、カードを二枚並べる小さなレイアウトを、ディブとアーティクルを使い分けて作ってみると理解が深まります。