1
00:00:00,390 --> 00:00:01,650
よろしくお願いします。

2
00:00:01,660 --> 00:00:05,770
このビデオでは、今私たちのサイトのスタイリングに取り組んでいきます。

3
00:00:05,850 --> 00:00:09,530
終わりのように見えるものの近くにはどこにもない場所です。

4
00:00:09,810 --> 00:00:12,960
では、実際にそれらを並べて比較しましょう。

5
00:00:13,530 --> 00:00:14,840
ここに私たちのものがあります。

6
00:00:15,030 --> 00:00:21,280
そこで、コーナーを四捨五入するために必要な大きな変更のいくつかは、ここで上にスペースを追加しています。

7
00:00:21,360 --> 00:00:23,260
ここのボタンのスタイリングを変更する。

8
00:00:23,490 --> 00:00:27,750
だから、これらのボタンは、あなたがそれらの上にマウスを置くと、ホバー効果を得るまでボタンのようには見えません。私たちのボタンは間違いなく恐ろしいもので、ホバー効果はありません。

9
00:00:28,470 --> 00:00:32,370
 

10
00:00:32,370 --> 00:00:35,200
また、彼らの位置は少し間違っています。

11
00:00:35,550 --> 00:00:43,130
私がここで推測するとわかるように、私はテキストを手に入れることができますが、新鮮であれば、テキストが私たちのバージョンと比べてすでに取り上げられているのではないかと思います。

12
00:00:43,200 --> 00:00:48,310
 

13
00:00:48,470 --> 00:00:51,480
ここにアニメーションもあります。

14
00:00:51,510 --> 00:01:00,360
ですから、私が正しくクリックしたときに私たちがゆっくりとどのようにフェードアウトするかを通知をクリックすると、間違ったものをクリックするとただちに削除されます。

15
00:01:01,170 --> 00:01:02,990
 

16
00:01:03,000 --> 00:01:05,790
だから我々はそれに移行を加えたいと思う。

17
00:01:05,790 --> 00:01:09,200
また、私たちはH-1を持っています。

18
00:01:09,390 --> 00:01:10,920
それはより多くのスペースを取る必要があります。

19
00:01:11,130 --> 00:01:12,930
背景色を変更する必要があります。

20
00:01:12,930 --> 00:01:14,520
フォントを変更したい

21
00:01:14,910 --> 00:01:21,240
私たちの色の範囲が正しくフォーマットされていることを確認して、それがそれ自身の行にあり、より大きなフォントになるようにする必要があります。

22
00:01:21,240 --> 00:01:22,610
 

23
00:01:22,710 --> 00:01:25,910
また、本文全体のフォントを変更する必要があります。

24
00:01:25,950 --> 00:01:28,020
したがって、これらはすべて同じフォントです。

25
00:01:28,080 --> 00:01:32,970
最後に、ストライプとボディーの端の間に少しスペースがあることに気づくでしょう。ソリューションバージョンではスペースがまったくありません。

26
00:01:32,970 --> 00:01:37,470
 

27
00:01:38,030 --> 00:01:38,490
OK。

28
00:01:38,550 --> 00:01:41,580
最初にこのH-1に取り組んで始めましょう。

29
00:01:41,990 --> 00:01:49,740
だから、私たちはサブラインのテキストに行き、H-1に行きます。最初に行うことは、ソリューションの中で見ているように、物事を真ん中に整列させることです。

30
00:01:49,740 --> 00:01:52,700
 

31
00:01:52,890 --> 00:01:54,170
物事は中心に整列しています。

32
00:01:54,210 --> 00:02:03,070
だから、テキストアラインメントセンターを追加し、保存して更新するだけです。

33
00:02:03,360 --> 00:02:06,520
ちょっと改善。

34
00:02:06,540 --> 00:02:14,010
次は、背景色を変えて色がまだ青色に変わるようにしましょう。しかし、私は今すぐページをリフレッシュするとうまくいきます。

35
00:02:14,010 --> 00:02:17,280
 

36
00:02:17,400 --> 00:02:23,010
しかし、私は再びリフレッシュしてゲームに勝つか、新しい色をクリックします。

37
00:02:23,010 --> 00:02:28,230
それは黒に戻ります。なぜなら、私たちのjavascriptコードは、javascriptで暗い灰色の黒い色に戻っていることを上書きしているからです。

38
00:02:28,230 --> 00:02:31,970
 

39
00:02:32,010 --> 00:02:37,320
2 3 2 3 2 3という色にリセットする場所を見つける必要があります。

40
00:02:37,320 --> 00:02:38,040
さあ。

41
00:02:38,100 --> 00:02:40,820
これをまだ青色に変更したいだけです。

42
00:02:41,340 --> 00:02:44,690
そしてそれは私がそれをリフレッシュするときにも、それはまだ青です。

43
00:02:44,850 --> 00:02:45,970
私は新しい色を得る。

44
00:02:45,990 --> 00:02:47,870
まだ青いままです。

45
00:02:48,360 --> 00:02:48,810
OK。

46
00:02:48,870 --> 00:02:49,830
そうです。

47
00:02:49,830 --> 00:02:54,430
さあ、私たちのH-1の両側にあるすべての黒いスペースを取り除きましょう。

48
00:02:54,870 --> 00:03:02,230
だから私たちのH-1では上下左右の余白マージンゼロを取り除くつもりです。

49
00:03:02,250 --> 00:03:04,820
そうするときに何が起こるか注意してください。

50
00:03:04,820 --> 00:03:10,590
この黒いスペースは、左上と右上のこのわずかな間隔を除いて、すべての面で消え去る。

51
00:03:10,830 --> 00:03:14,870
そして、それは実際に身体から来ているH-1から来ていません。

52
00:03:14,940 --> 00:03:19,420
だから、私たちは身体に行って余裕ゼロを与えることができるように修正する。

53
00:03:19,680 --> 00:03:24,230
そして今、この小さな隙間に気をつけて、私はリフレッシュし、それは消え去ります。

54
00:03:24,390 --> 00:03:30,040
だから私たちの白いストライプは、ここのこのバージョンでそうであるように、すべての方法で側面に向かっています。

55
00:03:30,150 --> 00:03:30,970
OK。

56
00:03:31,080 --> 00:03:33,080
次は、楽しみに焦点を当てましょう。

57
00:03:33,450 --> 00:03:36,180
だから楽しさはすべての要素で同じになるでしょう。

58
00:03:36,180 --> 00:03:41,690
ボタンとH-1は、ここではすべて同じフォントで、少し異なるフォントウェイトです。

59
00:03:41,850 --> 00:03:46,660
そして、我々はAvenirと呼ばれるシステムの誇りを持っている組み込みのフォントのうちの1つだけを使うつもりです。

60
00:03:46,920 --> 00:03:52,730
だからそれはフォントファミリーAvenirになるだろう。

61
00:03:53,430 --> 00:03:56,440
それはそこにあるすべてのシステムで動作しないかもしれないフォントです。

62
00:03:56,580 --> 00:04:03,930
だから我々はモンである別のオプションを追加するつもりです。 それと同じようにSerat。

63
00:04:04,740 --> 00:04:10,050
だから私たちはここでは、まったく同じに見えないこの楽しいところで終わります。

64
00:04:10,170 --> 00:04:12,460
それがフォントの重みになります。

65
00:04:12,540 --> 00:04:16,040
だから、H1だからこのフォントの重みを変える必要があります。

66
00:04:16,050 --> 00:04:21,520
デフォルトでは、太字にしたり、700または800、または900のフォントの太さにすることができます。

67
00:04:21,600 --> 00:04:24,350
私たちがやりたいことは、フォントの太さを普通にすることです。

68
00:04:24,420 --> 00:04:32,230
だから私たちのH-1はフォントウェイトを追加して保存することができます。

69
00:04:32,400 --> 00:04:33,400
リフレッシュ。

70
00:04:33,710 --> 00:04:34,700
それはもっと近づいている。

71
00:04:34,700 --> 00:04:37,550
今私たちが変える必要があるいくつかのことがあります。

72
00:04:37,590 --> 00:04:44,030
まず第一に、これはすべて大文字で、RCSSを使って大文字変換と大文字変換を使用して行うことができます。これで近づいて見えますし、私たちの色が独自の行にあり、それをする。

73
00:04:45,330 --> 00:04:52,580
 

74
00:04:52,700 --> 00:04:56,510
 

75
00:04:56,570 --> 00:05:00,950
私たちはここでチームに入り、実際には老人を少し編集します。

76
00:05:00,950 --> 00:05:01,340
 

77
00:05:01,700 --> 00:05:04,120
これが私たちがこの仕事をする最初の方法です。

78
00:05:04,160 --> 00:05:09,350
私たちはPearcey

79
00:05:09,350 --> 00:05:12,590
SSでそれをやる別の方法を見ていきますが、私たちは、これをスタイリングして1行で素晴らしいものを見つけてから、休憩を追加することから始めます。

80
00:05:12,590 --> 00:05:19,070
私たちはabrタグを使うことができますが、実際にはスタイルに関しては少し悩まされていますが、リターンや改行を追加するのはすばやく簡単な方法です。改行

81
00:05:19,070 --> 00:05:24,080
 

82
00:05:24,080 --> 00:05:26,440
 

83
00:05:26,620 --> 00:05:33,200
だから私たちは偉大な後に欲しい、僕らは休憩をしたい、そして僕らのスパンを欲しがってから、別の休憩をして、そしてゲームの色を下にして、リフレッシュすればもっと近づいていくのを見ることができます。

84
00:05:33,200 --> 00:05:37,970
 

85
00:05:38,060 --> 00:05:41,280
今度は、スパンをもっと大きくすることに焦点を当てる必要があります。

86
00:05:41,660 --> 00:05:44,160
だから、このバンドはカラー表示のアイデアを持っています。

87
00:05:44,300 --> 00:05:49,730
だから私たちはR C S Sに行き、このようにカラーディスプレイを選択するつもりです。

88
00:05:49,900 --> 00:05:58,200
Idの色を表示して、フォントサイズがH-1のフォントサイズの200％だと言うでしょう。

89
00:05:58,550 --> 00:06:01,860
また、リフレッシュすると、フォントサイズがはるかに大きくなります。

90
00:06:02,210 --> 00:06:03,630
そして近づいてきています。

91
00:06:03,680 --> 00:06:05,210
私たちはここに休憩を取っています。

92
00:06:05,330 --> 00:06:10,040
また、行間にはここよりも多くのスペースがあることに気付きました。

93
00:06:10,280 --> 00:06:12,970
だからこそ私たちができることがいくつかあります。

94
00:06:12,980 --> 00:06:15,780
最初の行は、行の高さを変更することです。

95
00:06:16,280 --> 00:06:21,580
そこで、行の高さを1にします。 1を保存します。

96
00:06:22,190 --> 00:06:27,040
もう一度バージョンを見てみましょう。ちょっと縮小しています。

97
00:06:27,290 --> 00:06:30,440
しかし今、私たちは上部と下部のスペースを失いました。

98
00:06:30,440 --> 00:06:32,190
そこには少しスペースが必要です。

99
00:06:32,210 --> 00:06:35,050
だから私たちがやることは、パディングを加えることです。

100
00:06:35,450 --> 00:06:40,610
 

101
00:06:40,610 --> 00:06:47,050
したがって、上下左右にはパディングを追加し、上と下には20ピクセルを必要とします。したがって、このパディングのように20ピクセルとゼロを行うことができます。

102
00:06:47,300 --> 00:06:54,980
トップ20ピクセルとパディングボトムをパディングすることもできましたが、これはリフレッシュするのがより簡単な方法であり、現在ほぼ完成しています。

103
00:06:54,980 --> 00:06:58,590
 

104
00:06:58,880 --> 00:07:00,670
だから私たちのヘッダーは上手く見える。

105
00:07:00,880 --> 00:07:05,830
私たちは正しいフォントを正しいフォントの形にしています。それは大文字の正しい背景色です。

106
00:07:05,870 --> 00:07:11,240
私がプレーしている間、正しい表情をすべて残しておくようにしましょう。

107
00:07:11,300 --> 00:07:14,800
次は、このナビゲーションバーのボタンです。

108
00:07:15,130 --> 00:07:18,080
だから我々は間違いなくそれらを改善するための道のりを持っている。

109
00:07:18,080 --> 00:07:23,000
私たちが最初にやりたいことは、境界線を取り除くことです。そのため、ボタンの周りにはっきりとした境界線がありません。

110
00:07:23,000 --> 00:07:23,840
 

111
00:07:23,870 --> 00:07:27,230
我々はまた、背景色を取り除きたい。

112
00:07:27,320 --> 00:07:29,290
だから、ここで見られるような背景はないはずです。

113
00:07:29,330 --> 00:07:33,210
私たちが動かすまで、または選択するまで待ちます。

114
00:07:33,250 --> 00:07:37,790
また、ここでフォントファミリがこのフォントと同じであることを確認したい。

115
00:07:37,790 --> 00:07:39,230
だから始めましょう。

116
00:07:39,230 --> 00:07:48,620
そして私はすべてのボタンを選択するつもりですので、ボタンを押して、境界なしと言うだけで保存します。

117
00:07:48,800 --> 00:07:50,850
私がリフレッシュするとき、ボタンに注意を払う。

118
00:07:51,170 --> 00:07:51,790
OK。

119
00:07:51,980 --> 00:07:53,520
だから我々は今、国境がない。

120
00:07:53,720 --> 00:07:55,600
しかし、私たちはまだその背景色を持っています。

121
00:07:55,850 --> 00:08:02,760
だから今は同じ背景なしと保存してリフレッシュし、我々は近づいている。

122
00:08:02,950 --> 00:08:04,800
だから今私たちは平易なテキストを持っています。

123
00:08:05,120 --> 00:08:09,520
そして、ここから始まるようにすべてのテキストを大文字にすることから始めます。

124
00:08:09,740 --> 00:08:16,330
だから私たちはテキストの変換を再度使用するだけで、その行をペーストしてそこにコピーしてリフレッシュします。

125
00:08:16,400 --> 00:08:18,840
今、私たちのボタンはすべて大文字です。

126
00:08:18,920 --> 00:08:23,240
次は、ボタンがdivストライプコンテナの上端から下端まで確実に移動するようにします。

127
00:08:23,260 --> 00:08:25,370
 

128
00:08:25,400 --> 00:08:31,580
今はスペースの一部しか占めていないので、高さを100％に設定することでそれを行うことができます。

129
00:08:31,750 --> 00:08:37,490
そしてそれは、私たちがもっと近づくことがわかるように、含有元素の100％を占めることを意味します。

130
00:08:37,490 --> 00:08:38,900
 

131
00:08:38,930 --> 00:08:44,870
我々は今、いくつかの色を変更する必要がありますフォントサイズをフォントの重量を変更し、我々はまだセットアップしていないホバー効果を変更します。

132
00:08:44,870 --> 00:08:47,540
 

133
00:08:48,010 --> 00:08:54,050
次のことは、フォントを少し重くして、青色に変えることです。

134
00:08:54,050 --> 00:08:54,980
 

135
00:08:55,040 --> 00:09:02,350
だから、フォントの重量は700色になり、色も青色になります。

136
00:09:02,650 --> 00:09:05,370
そしてそれをリフレッシュしてみましょう。

137
00:09:06,020 --> 00:09:11,180
だから少し古くなってきて、ここに戻ってきたのと同じ色がまだ青色に変わっているのを見ることができます。

138
00:09:11,240 --> 00:09:14,750
 

139
00:09:14,760 --> 00:09:21,740
文字の間隔を1ピクセルに変更することができます。

140
00:09:21,830 --> 00:09:27,260
私がリフレッシュするときに注意を払うと、各文字の間にちょっとした間隔があることが分かります。

141
00:09:27,260 --> 00:09:28,390
 

142
00:09:29,090 --> 00:09:31,690
レスリーはフォントサイズに注目しましょう。

143
00:09:31,700 --> 00:09:33,690
彼らは少し小さすぎるようです。

144
00:09:33,980 --> 00:09:39,340
だから、フォントサイズを使用して継承するように設定します。

145
00:09:39,500 --> 00:09:44,750
私がリフレッシュすると、フォントサイズが継承されていることがわかります。明示的にフォントサイズを継承する必要はありません。

146
00:09:45,620 --> 00:09:47,120
だから今見てみましょう。

147
00:09:47,620 --> 00:09:51,380
大きな相違点の1つは、現在は別々に配置されていることです。

148
00:09:51,670 --> 00:09:55,490
ページが読み込まれるとすぐに、ここにスペースがあります。

149
00:09:55,490 --> 00:09:59,460
しかし、ボタンをクリックするまで、そのスペースはありません。

150
00:09:59,480 --> 00:10:08,860
それで、私たちがする必要があるのは、実際にはここのスパンをスタイルすることです。そのスパンはメッセージと呼ばれ、私たちはそのスペースを占めるようにいくつかのプロパティを与え、それを与えたいと思っています。実際にプロパティ。

151
00:10:08,870 --> 00:10:14,480
 

152
00:10:14,480 --> 00:10:17,220
 

153
00:10:17,360 --> 00:10:24,980
そこで、このファンである私たちのメッセージを表示するように選択し、表示プロパティを変更することにします。

154
00:10:24,980 --> 00:10:28,830
 

155
00:10:28,830 --> 00:10:34,880
 

156
00:10:34,880 --> 00:10:41,790
BLOCKそれでは、私がリフレッシュすると、すぐに大きな違いに気付かないでしょうが、20％の値を与えて保存して更新する必要があるからです。

157
00:10:42,230 --> 00:10:48,530
この画面の20％を占めるものはそれに含まれていないにもかかわらず、このスパンを持っています。

158
00:10:49,000 --> 00:10:52,920
それは、これらの要素を私たちが求めているものと正確に反対側に押し付けます。

159
00:10:53,500 --> 00:10:55,690
見てみましょう、それらを比較してみましょう。

160
00:10:55,700 --> 00:10:56,960
そうですね。

161
00:10:56,960 --> 00:11:03,340
今度は、選択したクラスを適切な色に合わせ、ホバー効果を持たせることです。

162
00:11:03,350 --> 00:11:05,450
 

163
00:11:05,450 --> 00:11:10,460
だから私たちのボタンの下になるだろうし、最初にホバー効果を追加するつもりです。

164
00:11:10,460 --> 00:11:15,970
ですから、Colan

165
00:11:18,920 --> 00:11:27,140
Hufferボタンを追加するだけで、フォントの色を白く、背景の色をスチールブルーに変更します。

166
00:11:27,130 --> 00:11:31,370
基本的には色を反転させて保存してリフレッシュします。

167
00:11:31,630 --> 00:11:34,090
私がホバリングしたら、私はその効果を得ることができます。

168
00:11:34,670 --> 00:11:35,550
完璧。

169
00:11:35,600 --> 00:11:39,920
私たちが選んだクラスは、まったく同じように見えます。

170
00:11:39,950 --> 00:11:42,360
ちょうどスタイルをコピーするつもり。

171
00:11:42,530 --> 00:11:45,980
選択されたときと比較して何かを乗り越えるときに違いはありません。

172
00:11:45,980 --> 00:11:47,260
彼らは同じように見えるはずです。

173
00:11:47,420 --> 00:11:52,790
だから、私はあなたがホバリングしている間だけ右に見え、私はホバーしているのを見ることができます。

174
00:11:52,850 --> 00:11:55,270
その青い背景と白のテキストの色を取得しますか？

175
00:11:55,340 --> 00:11:57,410
そして私が動くとき、それは遠ざかります。

176
00:11:57,680 --> 00:11:59,010
若干の違いがあります。

177
00:11:59,300 --> 00:12:04,470
ソリューションボタンの上にカーソルを置くと、その色が消えることがわかります。

178
00:12:04,550 --> 00:12:08,390
私のバージョンではただのスイッチではありません。

179
00:12:08,650 --> 00:12:10,550
それは即座にトグルするだけです。

180
00:12:10,820 --> 00:12:16,440
ボタンセレクタの内部でC Sのトランジションプロパティを使って修正できます。

181
00:12:16,670 --> 00:12:19,720
我々は移行を書き、それを渡すつもりです。

182
00:12:19,720 --> 00:12:26,150
2つの引数は2つの値で、最初のものは遷移したいものです。この場合、すべてのプロパティにそれを追加するだけです。次の引数は、どれくらい長くしたいのかです。

183
00:12:26,140 --> 00:12:30,610
 

184
00:12:30,710 --> 00:12:34,390
だから私は最初に2秒でそれを誇張するつもりです。

185
00:12:34,390 --> 00:12:41,210
もう一度、トランジションプロパティは、カラー変更やフォントサイズの変更とプロパティ間のトランジションをアニメートする方法をCSXに伝える方法です。

186
00:12:41,210 --> 00:12:43,790
 

187
00:12:43,790 --> 00:12:49,730
だから私がここで言ったことは、私たちの場合は本当に色と背景になるボタンのプロパティがいつでも変わるということです。

188
00:12:49,730 --> 00:12:51,900
 

189
00:12:52,070 --> 00:12:57,680
だから色が変わって背景色が変わるたびに2秒かかります。リフレッシュすると表示されます。

190
00:12:57,680 --> 00:12:59,190
 

191
00:12:59,420 --> 00:13:00,410
そして私は立ち向かう。

192
00:13:00,560 --> 00:13:01,880
ああ、まだ動作していません。

193
00:13:01,900 --> 00:13:04,750
私はここに私の行方が見当たりません2。 00秒。

194
00:13:04,850 --> 00:13:12,140
そして、リフレッシュしてホバーすると2秒間フェードインし、選択したクラスをクリックして追加すると2秒かかります。フェードアウトするには2秒かかります。

195
00:13:12,130 --> 00:13:17,520
 

196
00:13:17,750 --> 00:13:20,140
2秒は間違いなく長すぎます。

197
00:13:20,560 --> 00:13:23,580
私は約3秒間を目指していると思う。

198
00:13:23,750 --> 00:13:25,950
それを試してみましょう。

199
00:13:25,970 --> 00:13:26,630
そこに行く。

200
00:13:26,650 --> 00:13:28,990
それは私にはかなり良く見えます。

201
00:13:29,060 --> 00:13:35,570
最後の大きなことは、これらの四角形の丸みを帯びたコーナーを得ることです。丸みを帯びたコーナーを得るには、Border

202
00:13:35,570 --> 00:13:38,550
radiusというプロパティを使用しています。

203
00:13:38,690 --> 00:13:41,990
あなたが見たいと思えば中央のドキュメントを開いています。

204
00:13:42,130 --> 00:13:42,970
それは良い読書です。

205
00:13:43,100 --> 00:13:46,760
しかし、彼らはあなたが半径をボードで行うことができる様々な事例についていくつかの例を示しています。

206
00:13:46,900 --> 00:13:52,000
だから私たちがやろうとしているのは、わずかなボーダー半径を与えることです。ここは四角です。

207
00:13:52,150 --> 00:13:54,340
私たちが目指しているものを見てみましょう。

208
00:13:54,350 --> 00:13:56,140
そういうものが私たちが欲しいものです。

209
00:13:56,180 --> 00:13:58,810
だからそれはやや微妙なカーブでした。

210
00:13:59,500 --> 00:14:06,740
私たちのスクエアクラスに上がって、ボーダー半径を割り当てましょう。まず始めに誇張したことをしてみましょう。私たちが50％行ったら何が起こるかを示します。

211
00:14:06,740 --> 00:14:10,130
 

212
00:14:10,490 --> 00:14:13,850
サークルを取得すると、実際にサークルを使用する方が好きかもしれません。

213
00:14:13,850 --> 00:14:20,230
私はそれらを使用することを検討していたが、最終的に私はこれらの丸い角の四角を好み、私が使用した数字は15パーセントです。

214
00:14:20,240 --> 00:14:22,780
 

215
00:14:23,510 --> 00:14:25,590
そして、それらを2倍にチェックして比較します。

216
00:14:25,850 --> 00:14:27,060
OKだからいいよ。

217
00:14:27,080 --> 00:14:32,900
15％だが、もし望むなら、私たちが5％のようなことをしてリフレッシュしたら何が起こるかを見せてくれるだろう。

218
00:14:32,890 --> 00:14:33,770
 

219
00:14:34,010 --> 00:14:36,160
我々は非常にわずかに角を丸くする。

220
00:14:36,290 --> 00:14:43,430
だから私は私の15リフレッシュに戻って、私たちは素敵な丸みを帯びたコーナーを持っていますが、アニメーション効果を得るためには、これらのいずれかをクリックするときに作業する必要もあります。

221
00:14:43,420 --> 00:14:47,810
 

222
00:14:47,810 --> 00:14:54,740
ホバー効果がフェードインまたはフェードアウトしたように、色がどのように変化するかに注目してください。

223
00:14:54,740 --> 00:14:59,920
これを実現するには、遷移プロパティを使用する必要がありますが、やや異なる方法で行う必要があります。

224
00:14:59,990 --> 00:15:06,170
だから私は正方形に行きます。私たちが変えたいのは、背景色か背景だけです。

225
00:15:06,160 --> 00:15:07,170
 

226
00:15:07,220 --> 00:15:12,470
もう一度、2のような長い時間を過ごしましょう。 0秒と見える方法を参照してください。

227
00:15:12,500 --> 00:15:16,160
だから私はリフレッシュし、私はこれらのいずれかをクリックします。

228
00:15:16,250 --> 00:15:19,710
フェードアウトするまでに2秒間かかることがわかります。

229
00:15:19,940 --> 00:15:21,940
だから私たちは長い間何かを持続させたくありません。

230
00:15:22,120 --> 00:15:26,290
おそらくおそらくゼロ点6になるでしょう。

231
00:15:26,750 --> 00:15:27,970
それを試してみましょう。

232
00:15:28,420 --> 00:15:28,850
OK。

233
00:15:28,850 --> 00:15:31,610
それは妥当と思われる。

234
00:15:32,500 --> 00:15:36,680
その背景が変わるたびに0がかかります。 6秒。

235
00:15:36,670 --> 00:15:42,460
しかし、違うところは、他のプロパティが変更されたときに、プロパティが変更されたときに私たちが言ったボタンのようにアニメーション化しないと、3秒間かかるはずです。

236
00:15:42,560 --> 00:15:46,710
 

237
00:15:46,900 --> 00:15:49,790
私たちは背景だけをターゲットにしており、その変化があります。

238
00:15:49,810 --> 00:15:52,450
0になるはずです。 6秒。

239
00:15:52,490 --> 00:15:58,010
私たちが気づいてほしいことの一つは、移行プロパティはすべてのブラウザで今のところ書かれているように、できるだけブラウザに優しいとは言えません。

240
00:15:58,040 --> 00:16:02,140
 

241
00:16:02,140 --> 00:16:07,770
実際には、2つのプロパティを追加する必要があります。これらのプロパティは、機能の違いに気付くことはありませんが、ブラウザサポートのためだけにあります。

242
00:16:08,600 --> 00:16:10,650
 

243
00:16:10,660 --> 00:16:19,460
最初のものはWeb Kit Daschへの移行です。ちょうどそれと同じ正確な値を追加します。

244
00:16:19,460 --> 00:16:20,250
 

245
00:16:20,360 --> 00:16:26,550
そして、私たちはこれがもう一つのダッシュMoz Mであるべきであるもう一つを必要とします。 オジー。

246
00:16:26,600 --> 00:16:30,070
したがって、これらは実際にはブラウザの接頭辞です。

247
00:16:30,230 --> 00:16:36,020
Web KitはWeb Kitのためのもので、ブラウザがSafariのように使うエンジンです。

248
00:16:36,200 --> 00:16:41,700
そして、私たちはMozを持っていて、短い形式のMozyはFirefoxが構築しているZilahです。

249
00:16:42,050 --> 00:16:47,300
つまり、トランジションプロパティはすべての単一のブラウザにまだ組み込まれていないため、サポートを追加するだけです。

250
00:16:47,300 --> 00:16:48,650
 

251
00:16:48,640 --> 00:16:49,790
だから我々はリフレッシュします。

252
00:16:50,060 --> 00:16:51,850
何も違って見えるはずはありません。

253
00:16:51,860 --> 00:16:56,660
 

254
00:16:56,870 --> 00:17:05,210
私たちのゲームは同じように動作しますが、同じアニメーションが得られます。すべてをトランジションしてトランジションに変更し、すべて0にすると、同じアニメーションが得られます。

255
00:17:05,200 --> 00:17:08,660
MOOC移行のための3秒。

256
00:17:08,650 --> 00:17:15,040
ここで解決できる最後のことは、ストライプとグリッドの開始点との間の間隔です。

257
00:17:15,050 --> 00:17:15,630
 

258
00:17:15,800 --> 00:17:18,950
だから、私たちがここにないスペースがもう少しあることが分かります。

259
00:17:19,150 --> 00:17:25,740
そして今、私たちが検査すれば、私たちはグリッドの周りにある要素を持っています。

260
00:17:26,140 --> 00:17:34,210
私たちには正方形があり、div IDのコンテナがあり、コンテナdivは6つの四角形のすべてを囲んでいます。

261
00:17:34,390 --> 00:17:40,400
だから我々はそれを使用することができますし、ちょうどそのコンテナのdivにいくつかのスペースを追加するだけで、上下に余白を追加します。

262
00:17:40,390 --> 00:17:41,950
 

263
00:17:42,110 --> 00:17:44,540
だから私はすでにそれを少しスタイリングしたと思う。

264
00:17:44,540 --> 00:17:45,550
さあ。

265
00:17:45,590 --> 00:17:47,510
だから、マージンはゼロだと言った。

266
00:17:47,650 --> 00:17:54,770
代わりに、私たちがやることは、マージンが上下に20ピクセル、左右にオートがどのようにセンタリングされているかということです。

267
00:17:54,770 --> 00:17:57,020
 

268
00:17:57,050 --> 00:18:01,820
だから私はそれが左と右に自動であることを願っていますが、一番上のリフレッシュでは20ピクセルです。

269
00:18:02,330 --> 00:18:03,590
私たちには間隔があります。

270
00:18:04,120 --> 00:18:05,940
これでスタイリングが完了しました。