1
00:00:00,330 --> 00:00:00,640
そこ。

2
00:00:00,660 --> 00:00:01,610
お帰りなさい。

3
00:00:01,920 --> 00:00:04,060
だから、このレッスンはとても速くなるでしょう。

4
00:00:04,200 --> 00:00:10,680
私たちはちょうどDIVタグとスパンタグの2つのタグについて話していますが、私たちが物事をスタイルできる場所を見極めるまで、彼らは何をし、どのように使用するかについては話すことができません。

5
00:00:11,040 --> 00:00:16,480
 

6
00:00:16,560 --> 00:00:22,410
しかし、私はdivとspanを使ってあなたのことを見せてくれるので、今それらを紹介したいだけです。

7
00:00:22,410 --> 00:00:27,110
次のいくつかのビデオでは、私はこのコースの最初のドラフトでそれを実際に説明する素晴らしい仕事をしませんでした。

8
00:00:27,120 --> 00:00:27,640
 

9
00:00:27,690 --> 00:00:31,820
そこで私は、コースが出版された後の事実の後でこれに戻ってこれを加えました。

10
00:00:31,950 --> 00:00:37,890
私はちょうど私がより良い仕事をしたのかどうかを知ることができたかもしれないことに気づいたいくつかの質問を見た。

11
00:00:37,920 --> 00:00:38,800
 

12
00:00:39,000 --> 00:00:39,340
OK。

13
00:00:39,360 --> 00:00:42,030
だからdivとspanについて話を始めましょう。

14
00:00:42,060 --> 00:00:47,490
私が言う最初のことは、私が言及したように、それらの両方が実際にスタイリング要素に到達するまではそれほど有用ではないということです。

15
00:00:47,490 --> 00:00:49,770
 

16
00:00:49,770 --> 00:00:56,760
しかし、彼らはあなたがコンテンツを一緒にグループ化することができるので、MT-NWによるdivは単なる一般的なコンテナです。

17
00:00:56,760 --> 00:00:58,060
 

18
00:00:58,320 --> 00:01:04,440
だからそれはちょうど例をまとめる方法です。私はこれがここのdivだと言っているわけではありませんが、これはいくつかのコンテンツの周りのボックスにすぎません。

19
00:01:05,040 --> 00:01:09,210
 

20
00:01:09,210 --> 00:01:15,420
ここにいくつかのテキストといくつかの画像があり、それをまとめて大きなボーダーを与えたり、背景を与えたりすることができます。私はdivでそれを行うことができます。

21
00:01:15,420 --> 00:01:20,380
 

22
00:01:20,400 --> 00:01:24,960
もう一度、あなたはそれをどうやってやっているのかについてはまだ話していませんが、アイデアは物事をまとめることができるということです。

23
00:01:24,960 --> 00:01:25,780
 

24
00:01:25,950 --> 00:01:29,660
だから、あなたはこのコースでdivsをたくさん使っているのを見るでしょう。

25
00:01:29,760 --> 00:01:32,450
簡単な例をお見せしましょう。

26
00:01:32,520 --> 00:01:40,290
ここにテキストを追加すると、実際にはこのコースの学生の1人がディスカッションフォーラムで指摘したことになります。

27
00:01:40,290 --> 00:01:41,750
 

28
00:01:41,790 --> 00:01:47,410
Loremを入力してタブを押すだけでは、どれがいいかわかりませんでした。

29
00:01:47,590 --> 00:01:53,170
これは、Lorem Ipsumに基本的にサンプルテキストプレースホルダテキストの束を与えます。

30
00:01:53,280 --> 00:01:58,100
だから私はこれを使って2つのものを作るつもりです。

31
00:01:58,440 --> 00:02:06,470
そして、H1を追加し、このH-1が本当に問題ではない、あるいはそこに何かを置くとしましょう。

32
00:02:06,470 --> 00:02:06,890
 

33
00:02:07,020 --> 00:02:08,990
 

34
00:02:12,060 --> 00:02:14,300
しかし、これは段落であり、私はこれら2つのものをグループ化したいとします。

35
00:02:14,310 --> 00:02:19,560
段落のH-1は、最終的にもう一度これを行うことはできませんが、最終的には境界線とオレンジ色の境界線を囲むようにしたいと考えています。

36
00:02:19,560 --> 00:02:22,150
 

37
00:02:22,260 --> 00:02:24,230
しかし、これは含まれていません。

38
00:02:24,270 --> 00:02:28,630
私ができることはdivタグの中でそれらをまとめてグループ化して保存することです。

39
00:02:33,090 --> 00:02:35,340
 

40
00:02:35,460 --> 00:02:41,700
そして、もし私がページをリフレッシュしたり、実際にそれを開くと、それは全く違って見えることはありません。

41
00:02:41,700 --> 00:02:42,350
 

42
00:02:42,430 --> 00:02:48,180
 

43
00:02:48,180 --> 00:02:53,580
 

44
00:02:53,580 --> 00:02:56,540
私たちがスタイリングをしているのは、実際には何も見えません。なぜなら、この2つのものはコンテナ内にグループ化されているからです。

45
00:02:56,580 --> 00:03:01,800
 

46
00:03:01,800 --> 00:03:07,350
だから私がそのdivにバックグラウンドを与えれば、それは黄色の背景を持っていれば黄色の背景がこの周りにおおよそ行くが、それは第2段落のいずれも含まないだろう。

47
00:03:07,350 --> 00:03:12,440
それは一方でdiv divであり、ジェネリックコンテナでもあります。

48
00:03:12,630 --> 00:03:14,840
しかし、大きな違いがあります。

49
00:03:14,910 --> 00:03:17,640
ですからここで例を挙げてみましょう。

50
00:03:17,910 --> 00:03:23,520
ここでこれらの単語のいくつかを強調したいとしましょう。

51
00:03:23,670 --> 00:03:24,600
イプサムのドア。

52
00:03:24,660 --> 00:03:30,840
私が黒ではなく黄色にしたいものが何であれ、残りのテキストは黒です。

53
00:03:30,930 --> 00:03:34,510
しかし、私はこれを黄色く強調してフォントを大きくするか、何かをしたい。

54
00:03:34,590 --> 00:03:36,090
もう一度、私たちはそれをどうやって行うのか分かりません。

55
00:03:36,450 --> 00:03:43,410
 

56
00:03:45,390 --> 00:03:54,960
しかし、この考え方では、タグを必要としています。一般的なコンテナであるdivを右に置いて保存してリフレッシュすると、新しい行にノックされることがわかります。divはブロックなのでレベル要素。

57
00:03:54,990 --> 00:03:57,120
 

58
00:03:57,120 --> 00:04:01,410
つまり、段落のように独自の行を取ります。

59
00:04:01,410 --> 00:04:06,960
その段落の後にすべての段落を追加すると、新しい行にプッシュダウンされます。

60
00:04:07,230 --> 00:04:10,470
つまり、divはブロックレベルの汎用コンテナです。

61
00:04:10,470 --> 00:04:17,430
これをスパンに置き換えると、これは全く印象的ではありません。実際に何かを見ることができるからです。ここで変更が見られますが、それは通常の段落のように見えるので、リフレッシュする予定です。コンテナがあります。

62
00:04:17,430 --> 00:04:22,410
 

63
00:04:23,930 --> 00:04:25,340
 

64
00:04:25,340 --> 00:04:30,140
今、何もしていないこのコンテンツの周りに一般的なスパンがあります。

65
00:04:30,540 --> 00:04:33,860
それはインラインコンテナですが、divとは異なります。

66
00:04:33,870 --> 00:04:40,680
だから、スパンは基本的にコンテンツを行単位でグループ化するためのもので、divはコンテンツをグループ化する別の方法です。

67
00:04:40,680 --> 00:04:41,200
 

68
00:04:41,310 --> 00:04:42,930
しかし、それはブロックレベルの要素です。

69
00:04:43,200 --> 00:04:45,840
だから私はこれが現時点では少し理論的であることを知っています。

70
00:04:45,970 --> 00:04:48,820
の実用性を理解するのは難しいことです。

71
00:04:48,990 --> 00:04:55,290
しかし、すぐに私たちがC

72
00:04:55,380 --> 00:05:03,830
Sに入ると、私は追加したスパンを見つけて15ポイントのフォントと黄色にしたり、divを見つけてオレンジ色の枠線を付けたりするなど、何かを言うことができます。そうすれば、このコンテンツの周りにオレンジ色の境界線ができます。

73
00:05:04,010 --> 00:05:08,060
 

74
00:05:08,070 --> 00:05:11,020
すべての適切なdivsスパンの汎用コンテナ。

75
00:05:11,190 --> 00:05:12,510
1つは黒で、1つは並んでいます