1
00:00:00,760 --> 00:00:01,370
OK。

2
00:00:01,620 --> 00:00:05,960
このビデオでは、このティック・タック・トゥ・ボードの演習を最初から作り直すつもりです。

3
00:00:06,060 --> 00:00:09,120
だから私たちは最初から空のファイルで始めるつもりです。

4
00:00:09,130 --> 00:00:13,880
私はHVMが私たちのボイラープレートに追加できるボードをCoppermineします。

5
00:00:14,460 --> 00:00:21,210
それをT T T掲示板と呼んで、これがあなたの記憶をジョギングするだけの方法です。

6
00:00:21,420 --> 00:00:22,550
それはテーブルです。

7
00:00:22,560 --> 00:00:23,950
この全体がテーブルです。

8
00:00:24,000 --> 00:00:30,330
それは3つの行1,2および3を有し、各行は3つのTweedyを有する。

9
00:00:30,360 --> 00:00:32,270
だから我々は3つずつのボードで終わる。

10
00:00:32,430 --> 00:00:38,760
そして、私たちがやることは、これらの3つのテレビに入って、左右の境界線を回すことです。そして、これらの3つの上で、上下の境界線を回すつもりです。

11
00:00:39,390 --> 00:00:42,890
 

12
00:00:43,560 --> 00:00:48,020
だから、テーブルと3つの層から始めなければなりません。

13
00:00:48,810 --> 00:00:53,490
そして私は実際に3つのチアラを行って、最初に行うつもりです。

14
00:00:53,520 --> 00:00:56,400
だから我々は3つのテレビを取得し、それをもう一度複製するつもりです。

15
00:00:59,340 --> 00:01:01,450
 

16
00:01:01,590 --> 00:01:06,650
3つの要素で3つの行があり、それぞれに3つのTVがあります。

17
00:01:06,720 --> 00:01:12,940
だから私たちはそれを保存し、ブラウザでこれを開くと、私たちには何も見えないことがわかります。

18
00:01:13,500 --> 00:01:18,600
それは、私たちのテーブルがそこにあるにもかかわらず、私たちのテーブルには何もありません。

19
00:01:18,900 --> 00:01:23,910
そして空のテーブルを持っていて実際にはこれが何であるかをまだ見ることができるので、スタイルを適用する必要もありません。

20
00:01:23,910 --> 00:01:25,910
 

21
00:01:25,910 --> 00:01:27,950
これらのテーブルにはデータはありません。

22
00:01:28,080 --> 00:01:32,700
ここの例では、それは単なるテーブルであり、次にそれはスタイル付けされています。

23
00:01:32,700 --> 00:01:34,790
だからそれには境界があります。

24
00:01:34,980 --> 00:01:36,320
だから我々はそれを行う必要があります。

25
00:01:36,360 --> 00:01:42,120
だから、ちょうどあなたにそれを証明するためにここではいくつかのスタイルを追加してみましょう。私はあなたが今知っておくべきスタイルタグでこれを行うつもりです。

26
00:01:42,120 --> 00:01:45,210
 

27
00:01:45,360 --> 00:01:51,170
 

28
00:01:51,170 --> 00:01:55,960
 

29
00:01:55,970 --> 00:01:59,370
長期的には素晴らしいアイデアではありませんが、ここでの見やすさを目的としたソリューションビデオのために、私たちはファイルを見直す必要がなく、私が1つの場所で何をやろうとしているのか混乱する必要はありませんここにスタイルタグの一番上にファイルします。

30
00:01:59,880 --> 00:02:09,540
だから私がやろうとしている最初のことは、Tを選択して幅を与えることだけです.TTの検査をすれば、基本的には存在しないことが分かります。

31
00:02:09,540 --> 00:02:11,550
 

32
00:02:19,380 --> 00:02:22,920
 

33
00:02:22,930 --> 00:02:24,830
それらは2ピクセル×2ピクセルです。

34
00:02:24,960 --> 00:02:28,720
だから彼らは本当に小さく、それは何もそこにないし、私たちはそれらに割り当てられていないか高さです。

35
00:02:28,770 --> 00:02:30,680
 

36
00:02:30,690 --> 00:02:36,570
 

37
00:02:36,570 --> 00:02:43,130
だから私がしたいのは、幅を与えて100ピクセルから始めるつもりですが、高さについても同じことをやるつもりです。保存してリフレッシュしても何も見えません。

38
00:02:43,500 --> 00:02:46,860
そしてもう一度それは何も表示されていないからです。

39
00:02:47,010 --> 00:02:55,380
しかし、私たちが行かれて今調べてみると、各Tedyが100 x 100ピクセルの正方形になっているのが分かります。

40
00:02:55,380 --> 00:02:59,160
だから、彼らがそこにいることを見ることができるように、彼らに背景を与えてみましょう。

41
00:02:59,310 --> 00:03:02,330
バックグラウンドピンクセーブと言ってください。

42
00:03:03,000 --> 00:03:05,970
そして今、我々は私たちのボードの始まりを見ることができます。

43
00:03:06,120 --> 00:03:08,360
だから私は実際にその背景色を元に戻すつもりです。

44
00:03:08,370 --> 00:03:11,400
私はタイルがそこにあることをあなたに見せたいだけでした。

45
00:03:11,400 --> 00:03:12,630
私たちはテレビを持っています。

46
00:03:12,930 --> 00:03:18,750
そして今私たちがする必要があるのは、境界線を選択的にオンにする方法を理解することです。

47
00:03:18,930 --> 00:03:22,800
だから私たちはこれらの3つの要素から始めるつもりです。

48
00:03:22,800 --> 00:03:25,380
左と右の境界線をオンにしたい。

49
00:03:25,380 --> 00:03:26,990
だから私はページを更新する場合。

50
00:03:27,140 --> 00:03:36,310
しかし、ここでこのトップレベルを取って、それに左と右の四半期を与えることから始めましょう。

51
00:03:36,480 --> 00:03:40,990
だから私は行くつもりです、そして、それは最初のTRの代わりに2番目のTDです。

52
00:03:41,070 --> 00:03:47,250
私はちょうどクラスを与えようとしています。私はちょうどこのクラスを垂直にするつもりです。そして私はこれらの3つのクラスをverticalと呼んで、左右のボーダーを取得します。

53
00:03:47,250 --> 00:03:52,120
 

54
00:03:52,320 --> 00:03:53,820
したがって、classはverticalと等しくなります。

55
00:03:53,820 --> 00:04:00,240
 

56
00:04:04,560 --> 00:04:11,570
そしてここでは、垂直を選択して境界線を残して、今は1つのピクセルを黒くして、境界線についても同じことをやりましょう。

57
00:04:11,570 --> 00:04:12,530
右。

58
00:04:12,780 --> 00:04:18,280
私たちが救い、私たちが新鮮ならば、最初の広場が完成したことがわかります。

59
00:04:18,690 --> 00:04:23,520
だから今はその下にあるテレビとその下にあるテレビを追加する必要があります。

60
00:04:23,790 --> 00:04:29,020
それで私はクラスを複数回使用するので、クラスを作ったのです。

61
00:04:29,220 --> 00:04:34,800
 

62
00:04:34,800 --> 00:04:40,840
 

63
00:04:40,850 --> 00:04:45,730
だから、これをIDにしてから、この要素のIDをもう一度やって、これを完全に行うことができたIDをもう一度やっていれば、ID中間とその次にID中間のようなことができました。

64
00:04:46,530 --> 00:04:49,570
私はそこにスペースを置くことができますが、そのようなものです。

65
00:04:49,680 --> 00:04:51,760
それは実際には素晴らしいアイデアではありません。

66
00:04:51,780 --> 00:04:57,120
私たちは複数のIDを持っていけないので、私はクラスに与えようとしています。クラスは垂直です。

67
00:04:57,660 --> 00:05:01,350
だから私はこれもこれに与えようとしています。

68
00:05:01,560 --> 00:05:04,280
これはその真下の中間要素です。

69
00:05:04,440 --> 00:05:07,440
そして、その下にあるもう一つ。

70
00:05:07,440 --> 00:05:13,000
その3人は現在、クラスの垂直線を持ち、3つの垂直線を得ることができます。

71
00:05:13,650 --> 00:05:17,770
今度は、水平線で同じプロセスを繰り返すだけで済みます。

72
00:05:18,570 --> 00:05:20,740
そして、我々はこの要素をここで欲しい。

73
00:05:20,850 --> 00:05:26,250
このこことここの1つは、境界上端と境界下端を持っています。

74
00:05:26,670 --> 00:05:34,590
 

75
00:05:34,590 --> 00:05:43,080
 

76
00:05:43,080 --> 00:05:45,270
今度はクラスで始めるつもりですが、境界線の上端と境界線の境界線を残して、水平線を作成してコピーしてください。そして、この水平クラスに正しい要素で署名するだけです。

77
00:05:45,270 --> 00:05:52,260
だから私たちがそれを望んでいるのはここのものなので、これが最初のTになるでしょう。 T.

78
00:05:52,260 --> 00:05:54,500
2番目のTRで

79
00:05:54,870 --> 00:05:56,100
だから、私は先に進んでそれをするつもりです。

80
00:05:56,100 --> 00:06:01,420
クラスは等しいかTLにあり、それをコピーします。

81
00:06:01,440 --> 00:06:07,320
この中間のクラスではクラスを作成したいと思っています。既にクラスを作成しています。

82
00:06:07,320 --> 00:06:09,910
 

83
00:06:09,930 --> 00:06:10,910
それは本当に簡単です。

84
00:06:10,920 --> 00:06:13,880
私たちがするのは、スペースを追加することだけです。

85
00:06:13,890 --> 00:06:16,350
したがって、これは垂直水平と呼ばれる1つのクラスではありません。

86
00:06:16,350 --> 00:06:19,780
それは2つの垂直かつ水平です。

87
00:06:20,190 --> 00:06:27,030
そしてこの最後のCDに同じことをやってみましょう。これがここにあります。私たちが保存してページを更新すると、完成したtic tac

88
00:06:27,030 --> 00:06:31,840
toeボードが完成します。

89
00:06:31,950 --> 00:06:36,930
だから私がここでやりたい最後のことは、これを中心にして、実際には本当に簡単だからです。

90
00:06:36,930 --> 00:06:38,800
 

91
00:06:38,910 --> 00:06:42,460
それは私たちのテーブルの成功の1つのラインです。

92
00:06:42,720 --> 00:06:47,820
私たちはそれに秩序のマージンを与え、そこに行くつもりです。

93
00:06:47,850 --> 00:06:49,820
そのマージンは自動的に計算されます。

94
00:06:49,830 --> 00:06:51,270
あなたは私がスクロールするのを見ることができます。

95
00:06:51,330 --> 00:06:57,140
私はマージンが増減するようにウィンドウのサイズを変更し、最後に1つの最後のものを追加したいと思うならば、ちょうどtic

96
00:06:57,150 --> 00:07:04,440
tacのつま先がそうすることができるということを各頂点に追加したいのです。

97
00:07:07,620 --> 00:07:08,520
 

98
00:07:08,550 --> 00:07:12,690
しかし、この要素が検査されたことに気付くでしょう。

99
00:07:13,200 --> 00:07:16,480
さて、それはそれがすべての道を越えていることを調べなくても見ることができます。

100
00:07:16,650 --> 00:07:22,900
私が真ん中に行きたいのであれば、要素は実際には画面全体にわたっています。

101
00:07:23,150 --> 00:07:24,620
この青い部分はここで見ることができます。

102
00:07:24,870 --> 00:07:31,710
だから私はテキストを中央に置くことができ、それはH-1が実際に真ん中にあるという効果を与えるだろう。

103
00:07:31,980 --> 00:07:40,720
だから私はちょうどH-1の文字列の中心と私は保存します。

104
00:07:41,130 --> 00:07:43,230
そして、そこに我々はチックタックつま先ボードを持っている行く