1
00:00:00,270 --> 00:00:01,530
お帰りなさい。

2
00:00:01,530 --> 00:00:07,350
To Doリストアプリケーションの基本機能が完成したので、このように見えるようにするための時間です。

3
00:00:07,350 --> 00:00:08,580
 

4
00:00:08,880 --> 00:00:11,430
だから我々は間違いなくかなりの方法を持っている。

5
00:00:11,550 --> 00:00:14,220
そして、我々は一度にこの1つを攻撃するつもりです。

6
00:00:14,280 --> 00:00:17,080
私はこれを最も論理的に可能な順序で試してみます。

7
00:00:17,220 --> 00:00:22,800
 

8
00:00:22,800 --> 00:00:27,210
背景色やフォントのような大きな部分から始めて、この大きなコンテナに正しいマージンとパディングがあることを確認してから、ニュアンスのいくつかに焦点を当てます。

9
00:00:27,210 --> 00:00:28,740
 

10
00:00:28,760 --> 00:00:30,460
さあ、ここで始めましょう。

11
00:00:30,480 --> 00:00:33,200
私たちが最初にやることは、全画面表示です。

12
00:00:33,720 --> 00:00:35,670
これを押すだけで始めましょう。

13
00:00:35,670 --> 00:00:37,120
これは私たちのコンテナ部門です。

14
00:00:37,440 --> 00:00:41,630
私たちはここにスペースを増やすために、上部にマージンを追加します。

15
00:00:41,910 --> 00:00:47,180
だから私たちはC Sに戻り、現在はJavaScriptやJavaScriptを閉じることができます。

16
00:00:47,670 --> 00:00:52,520
私たちの部門はコンテナのアイデアを持っています。そして、あなたがすでに行っていることをここで選択します。

17
00:00:52,860 --> 00:00:59,550
OTTOゼロのマージンよりもむしろ上下に100ピクセルを与えます。

18
00:00:59,820 --> 00:01:05,690
そして、xが必要なことを忘れないでください。ゼロがある場合、Xは必要ありませんが、番号があればそれができます。

19
00:01:05,880 --> 00:01:07,230
今見てみましょう。

20
00:01:07,650 --> 00:01:10,100
今すぐ同じ場所から出発しています。

21
00:01:10,200 --> 00:01:12,400
彼らはそこに同じマージンを持っています。

22
00:01:12,420 --> 00:01:18,090
次に行うのは、このコンテナに背景色を追加することです。

23
00:01:18,090 --> 00:01:22,830
見るのが少し難しいですが、私が何かを削除すると、それは背中に見えます。

24
00:01:22,950 --> 00:01:24,570
ここはこの色です。

25
00:01:24,630 --> 00:01:25,700
そう、もう一度。

26
00:01:26,080 --> 00:01:28,190
だから私たちは先に進んでそれを追加します。

27
00:01:28,830 --> 00:01:34,680
だからコンテナの代わりに背景と色をよく言う。

28
00:01:34,680 --> 00:01:39,680
私はちょうどそれを読んでいますF 7 7後7です。

29
00:01:39,960 --> 00:01:41,210
ちょうどそれのように。

30
00:01:41,850 --> 00:01:43,570
それがどのように見えるかを確認しましょう。

31
00:01:44,000 --> 00:01:44,400
OK。

32
00:01:44,490 --> 00:01:50,430
だから我々はここにあるのと同じ灰色をしている。

33
00:01:50,430 --> 00:01:52,790
それは同じライトグレーです。

34
00:01:52,830 --> 00:01:54,990
次は国境での作業です。

35
00:01:55,230 --> 00:01:57,460
そして、実際には境界線がありません。

36
00:01:57,540 --> 00:02:00,840
それは非常にわずかなボックスの影です。

37
00:02:00,840 --> 00:02:02,870
だから我々はまだ箱の影を見ていない。

38
00:02:02,940 --> 00:02:09,820
私はここでそのことを実証し、MT-NWに入ります。それは影の効果を加える単なる方法です。

39
00:02:09,870 --> 00:02:15,240
だから私が下にスクロールすると、ここにいくつかの異なるボックスの影があることがわかります。そして、非常に軽いものを持っていますが、これを気付くと本当にわずかな影があります。

40
00:02:15,240 --> 00:02:19,750
 

41
00:02:20,220 --> 00:02:28,380
したがって、使用するシンタックスとシャドウは境界線をなくします。ボックスダッシュシャドウ0 0

42
00:02:28,500 --> 00:02:39,020
3ピクセル、次に色と色は基本的には黒ですが、Rです。 G. そして、それを本当に透明にするつもりです。

43
00:02:39,180 --> 00:02:43,260
だからちょっと目立つ。

44
00:02:43,560 --> 00:02:45,380
私はリフレッシュしてください。

45
00:02:45,400 --> 00:02:46,890
今は国境はありませんが、この要素の周りにわずかな影があります。

46
00:02:46,890 --> 00:02:52,090
OK。

47
00:02:52,710 --> 00:02:53,170
それは今のところコンテナに行うことだけです。

48
00:02:53,250 --> 00:02:55,460
H-1を攻撃しよう。

49
00:02:55,770 --> 00:02:57,480
これはここに向かっている。

50
00:02:57,480 --> 00:02:59,490
だから私たちの年齢で彼はちょうどH1と考えていました。

51
00:02:59,580 --> 00:03:04,320
それはIDや何も持っていないし、それは問題ありません。

52
00:03:04,320 --> 00:03:06,710
CSSAファイルに行き、背景色で追加してみましょう。

53
00:03:06,960 --> 00:03:12,120
そこで、それぞれを選択し、バックグラウンドは2

54
00:03:12,390 --> 00:03:25,950
9 8 0となる色です。それらは保存されリフレッシュされ、青の正しい色合いになります。

55
00:03:27,270 --> 00:03:30,010
そこで、フォントの色を白に変更し、すぐにそれを表示します。

56
00:03:31,210 --> 00:03:33,930
 

57
00:03:36,660 --> 00:03:38,890
大丈夫。

58
00:03:38,970 --> 00:03:39,450
ここでゆっくりと近づく。

59
00:03:39,510 --> 00:03:42,890
私たちがやることは、余裕を持たないことです。そして今、私たちがここにあったこの空間を取り除くだけです。

60
00:03:43,050 --> 00:03:50,790
ここに見られるように、マージンはありません。

61
00:03:51,420 --> 00:03:53,220
これは私たちのH-1です。

62
00:03:53,220 --> 00:03:54,440
ここにパディングがあります。

63
00:03:54,510 --> 00:03:55,970
だから、テキストはここのように端に向かって右に上がらない。

64
00:03:56,340 --> 00:03:59,550
しかし、青い箱の外側に余裕はありません。

65
00:03:59,700 --> 00:04:03,330
これはテキスト入力であり、パディングも増加していますが、その周りに余白がありません。

66
00:04:03,360 --> 00:04:09,360
そこでTo Doリストの周りにいくつかのパディングを追加することから始めます。

67
00:04:10,200 --> 00:04:13,360
 

68
00:04:13,370 --> 00:04:22,740
H-1ここでは、上下に10ピクセル、左右に20ピクセルを追加して保存します。

69
00:04:22,740 --> 00:04:24,240
私たちが近づいているのを見ることができます。

70
00:04:25,260 --> 00:04:27,150
フォントサイズを変更する必要があります。

71
00:04:27,480 --> 00:04:29,000
フォントを変更する必要があります。

72
00:04:29,070 --> 00:04:30,350
私たちもそれをすべて大文字にしています。今はこれを行うことができます。

73
00:04:30,420 --> 00:04:34,900
あなたは私のお気に入りの一つがテキスト変換大文字であることを知っておくべきです。

74
00:04:34,980 --> 00:04:40,010
私はそれがかなりクールだと思う。

75
00:04:40,320 --> 00:04:42,480
 

76
00:04:42,480 --> 00:04:53,910
ここではすべて大文字にする必要があります。フォントサイズは24ピクセルにする必要があります。フォントサイズは24 xで保存してください。最後に行うのは、通常のフォントウェイトであることです。

77
00:04:53,900 --> 00:04:56,840
だから、デフォルトでH1は実際に太字になっていて、私たちはそれを望んでいません。

78
00:04:57,020 --> 00:05:00,970
だから私たちはFunt way normalをやるか、フォントウェイト400を書くこともできます。

79
00:05:01,290 --> 00:05:09,310
そこに行く。

80
00:05:09,320 --> 00:05:10,290
 

81
00:05:10,350 --> 00:05:14,960
今では、あなたが取り組んでいる次のものに戻ってくるフォントを変更することは、これらの箇条書きを取り除くことです。

82
00:05:15,380 --> 00:05:17,510
私たちがここで何か弾丸ポイントを持っていないかどうかを見ることができます。

83
00:05:17,510 --> 00:05:20,240
これらの箇条書きポイントはデフォルトのブラウザスタイルと見なされます。

84
00:05:20,250 --> 00:05:23,430
だから私たちはそれを上書きします。

85
00:05:23,510 --> 00:05:25,360
私たちは彼らが入っているULを選択し、リストスタイルnoneと言うつもりです。

86
00:05:25,400 --> 00:05:32,270
私たちが戻ってリフレッシュすると、今や弾丸ポイントはありません。

87
00:05:32,370 --> 00:05:37,790
 

88
00:05:37,800 --> 00:05:44,270
私がしようとしているもう一つのことは、マージンをゼロに設定し、パディングをゼロにして、ここでリフレッシュして、井戸の両側のスペースを取り除くだけでなく、しかし、それはUL自身ではなく、うそです。

89
00:05:45,240 --> 00:05:51,350
 

90
00:05:51,360 --> 00:05:56,240
だから我々はそれに戻ってくるだろう。

91
00:05:56,250 --> 00:05:58,440
さて、正しいフォントを追加しましょう。このフォントの名前はrubatoであり、Googleのフォントの一部です。

92
00:05:58,440 --> 00:06:04,400
だから私はここでそれを開き、私はただそれをrubatoのために検索します。

93
00:06:04,880 --> 00:06:09,400
さあ、いくぞ。

94
00:06:09,620 --> 00:06:10,720
コレクションに追加してから使用してください。

95
00:06:10,770 --> 00:06:14,230
そして、我々は正常な方法を望むつもりです。

96
00:06:14,510 --> 00:06:16,490
私たちは太字でも中位でも追加します。

97
00:06:16,800 --> 00:06:20,660
さあ、このリンクをHMOにコピーして、このウィンドウを閉じることができます。

98
00:06:20,660 --> 00:06:25,620
 

99
00:06:25,980 --> 00:06:33,650
各チームの場所をここに戻って、上のペーストを上にして保存してから、私たちが評価を見るために行って、体にいくつかのスタイルを追加します。

100
00:06:33,650 --> 00:06:37,520
すべてがこのフォントを使用するので、フォントファミリをロボットで追加するだけです。

101
00:06:37,740 --> 00:06:44,780
ちょうどそれのように。

102
00:06:45,530 --> 00:06:46,680
そして、もし私たちが今戻って私たちのリフレッシュするなら、H-1はかなりそこにあります。

103
00:06:47,390 --> 00:06:53,650
このボタンを除いて、私たちはすべてのフォントで同じ色を触れていませんでした。

104
00:06:53,660 --> 00:06:58,810
 

105
00:06:58,860 --> 00:06:59,960
そして、我々の同盟国はそこに着いている。

106
00:06:59,970 --> 00:07:01,970
彼らは正しいフォントを持っています。

107
00:07:01,980 --> 00:07:03,060
スペーシングとパディングの問題のいくつかを解決する必要があります。

108
00:07:03,140 --> 00:07:06,680
次に取り組むのは、嘘の背景色です。

109
00:07:06,690 --> 00:07:10,660
だから他のすべての嘘。

110
00:07:11,250 --> 00:07:12,750
それは、純粋な白い白から、この灰色の色へ、私たちはその背景として持っています。

111
00:07:12,930 --> 00:07:19,280
だから私たちはSSを使って他の同盟国にスタイルを追加することができます。

112
00:07:19,470 --> 00:07:24,340
それでは、今やってみましょう。

113
00:07:24,380 --> 00:07:25,450
最初に行うことは、すべての同盟国を選択して、白の背景を与えることです.F

114
00:07:25,500 --> 00:07:32,610
F Fまたは白またはR-GA 255 255〜55でそれを行うことができます。その後、他のすべての嘘を実行します。

115
00:07:32,610 --> 00:07:43,520
そしてその文法は嘘と終わりの子供です。

116
00:07:43,740 --> 00:07:50,080
そしてそれもあまりにもよく、お互いのパターンをよく定義しました。

117
00:07:50,360 --> 00:07:53,970
そして、もし私たちが3人をしたら、それは3分の1を言いますが、他のすべての人がほしいと思うのです。

118
00:07:54,140 --> 00:07:58,670
背景色は、コンテナの背景とリフレッシュに使用したのと同じf7

119
00:07:59,000 --> 00:08:08,310
f7 f7にします。

120
00:08:08,390 --> 00:08:08,880
彼らは少し小さいので、今は難しいですが、他のすべての嘘は今この灰色です。

121
00:08:08,880 --> 00:08:16,500
だから、もう少し追加すると、彼らは完全に交互に見ることができます。

122
00:08:16,700 --> 00:08:21,030
今度は、嘘の高さと詰め物の問題を取り上げましょう。

123
00:08:21,020 --> 00:08:25,370
最初にやるべきことは、40ピクセルの高さを与えて、すべての同盟者の高さを40

124
00:08:25,760 --> 00:08:35,240
xにして、リフレッシュすることです。

125
00:08:35,660 --> 00:08:36,540
彼らが正しい量のスペースを占めるようにOK。

126
00:08:36,950 --> 00:08:39,000
ここでそれらを比較するとフォントに問題があります。

127
00:08:39,000 --> 00:08:42,620
また、パディングを追加する必要があります。

128
00:08:42,620 --> 00:08:44,600
次に、テキストが縦にセンタリングされるように、嘘の行の高さプロパティを変更します。

129
00:08:44,970 --> 00:08:51,050
今、ラインは基本的にこの高さです。

130
00:08:51,570 --> 00:08:55,050
 

131
00:08:55,080 --> 00:09:05,550
40ピクセル全体を使って、行の高さ40 xを表示させるようにします。これは、フォントのサイズを変更しないだけで、行のサイズを変更します。

132
00:09:05,540 --> 00:09:09,510
今は40ピクセルです。

133
00:09:09,540 --> 00:09:10,880
だからこのラインはこの全領域を占めています。

134
00:09:10,880 --> 00:09:13,850
次の小さなことは、私たちが純粋な黒を持っている色です。私が使った色は、正確に黒ではありません。

135
00:09:14,150 --> 00:09:21,020
それは少し軽いです。

136
00:09:21,060 --> 00:09:22,820
そこで色を設定し、それを6 6 6リフレッシュし、次に入力に対処しましょう。

137
00:09:23,070 --> 00:09:33,530
だから私たちはあなたがする必要があるいくつかのことがあります。

138
00:09:33,540 --> 00:09:35,260
最初のものは、それが正しい量のスペースを占めることを確認することです。

139
00:09:35,490 --> 00:09:39,660
だから、この入力ははるかに大きく、フォントのサイズが大きいほど余白や余白だけではありません。

140
00:09:39,770 --> 00:09:45,740
私たちは新しい背景色も持っています。

141
00:09:45,750 --> 00:09:47,420
そしてクリックすると境界があります。

142
00:09:47,750 --> 00:09:49,700
ですから、それらのすべてを作業しましょう。より大きなフォントサイズを追加することから始めます。

143
00:09:49,740 --> 00:09:54,610
そこで、入力フォントサイズを選択し、フォントサイズを18ピクセルに設定します。

144
00:09:54,840 --> 00:09:59,370
 

145
00:10:02,270 --> 00:10:05,420
私たちがここにいる間、我々は背景色と背景色を行い、それは同じf 7

146
00:10:05,960 --> 00:10:11,570
7 1/2 7です。

147
00:10:11,610 --> 00:10:14,570
ちょうどそれのように。

148
00:10:14,730 --> 00:10:16,350
そしてリフレッシュしましょう。

149
00:10:16,760 --> 00:10:18,040
OK。

150
00:10:18,770 --> 00:10:19,510
私たちは近づいています。

151
00:10:19,700 --> 00:10:21,180
次の作業は幅を追加することです。これに与える幅は100％です。

152
00:10:21,170 --> 00:10:29,880
だから今はコンテナを横切る途中でしかありません。

153
00:10:29,880 --> 00:10:33,590
私たちがリフレッシュすれば、それは今や全面的に進む。

154
00:10:33,600 --> 00:10:36,820
しかし、我々はいくつかの小さな問題があります。

155
00:10:37,050 --> 00:10:39,200
私たちが世話したい最初のことは、そこにいくつかの詰め物です。

156
00:10:39,210 --> 00:10:42,970
そこで、右側の13ピクセルに13ピクセルのパディングを追加します。

157
00:10:43,400 --> 00:10:50,320
下側に13ピクセル、左側に20ピクセル。

158
00:10:50,370 --> 00:10:54,960
だから、これを見ることができます。

159
00:10:54,950 --> 00:10:56,250
我々は上部と下部が13です。

160
00:10:56,550 --> 00:10:58,770
左には20ピクセルあります。

161
00:10:59,000 --> 00:11:01,550
だから私は新鮮だった今、私たちは今、より多くのスペースを取るより多くの入力を持っています。

162
00:11:01,590 --> 00:11:07,430
私たちには、入力が長すぎるという問題があります。

163
00:11:07,590 --> 00:11:11,670
 

164
00:11:11,790 --> 00:11:18,540
 

165
00:11:18,540 --> 00:11:24,460
それが100％になるべきだと言ったとき、それは実際にはちょうど内容であり、それはパディングを含まず、マージンを含んでいませんでした。つまり、入力がdivの最後を過ぎて、パディングと。

166
00:11:24,450 --> 00:11:27,710
私はそれを変更する別の方法を示すことを意味します。これはBoxサイジングと呼ばれるプロパティです。

167
00:11:27,770 --> 00:11:33,820
したがって、ブロックサイジングではいくつかのオプションがありますが、基本的にボックスモデルのボックスサイズの制御方法を制御します。

168
00:11:33,840 --> 00:11:39,420
 

169
00:11:39,760 --> 00:11:41,400
そしてそれをDaschの境界線に変更します。

170
00:11:41,390 --> 00:11:44,100
 

171
00:11:44,270 --> 00:11:50,570
そしてこれは私がちょうどそれを読むだろうと言う幅と高さのプロパティは、余白ではなく、パディングと境界線が含まれています。

172
00:11:50,750 --> 00:11:52,740
 

173
00:11:52,800 --> 00:12:02,760
だから私がここで行う境界ボックスに変更すれば、移動する前にボックスサイズの順序ボックスを追加して保存するだけです。

174
00:12:02,750 --> 00:12:05,170
私が指摘しておきたいのは、これはプレフィックスを持つプロパティの1つです。

175
00:12:05,310 --> 00:12:10,250
Web KitとMozyはMozであり、Microsoftの混乱です。

176
00:12:10,250 --> 00:12:15,170
私は今それをするつもりはない。

177
00:12:15,540 --> 00:12:16,850
それはソリューションコードになります。

178
00:12:16,910 --> 00:12:18,250
しかし、入力には時間がかかります。

179
00:12:18,410 --> 00:12:20,330
それで、少なくとも今はChromeをどのように更新しているのかは分かりません。

180
00:12:20,660 --> 00:12:25,940
私たちの箱はボーダーにパディングを含んでいますが、余白はありません。

181
00:12:26,040 --> 00:12:32,180
だから我々は完璧なフィット感で終わる。

182
00:12:32,180 --> 00:12:34,820
次に、私がそこに入力するときにフォントに色を付けるつもりです。

183
00:12:34,880 --> 00:12:39,220
だから私たちはすべてする必要があります。

184
00:12:39,620 --> 00:12:41,130
 

185
00:12:41,330 --> 00:12:48,740
私はちょうどH-1から同じ色を取り、私たちの入力に行き、ちょうどその色だと言うでしょう。

186
00:12:48,750 --> 00:12:49,920
私たちが今リフレッシュしたら、私たちは入力し始めます。

187
00:12:49,910 --> 00:12:54,400
さて、その効果に焦点を当てましょう。

188
00:12:54,410 --> 00:12:56,290
あなたがここで見ることができる入力に焦点を当てるものをクリックすると、その周りに境界線ができます。

189
00:12:56,580 --> 00:13:03,860
だから我々はそれに取り組む必要がある。

190
00:13:03,920 --> 00:13:05,060
現在、デフォルトのフォーカス効果があります。

191
00:13:05,120 --> 00:13:08,050
したがって、ホバー擬似セレクターのように入力コロンのセレクターがあります。

192
00:13:08,120 --> 00:13:17,590
これらのセルは、入力に集中したときにのみ実行されます。

193
00:13:17,650 --> 00:13:21,510
だから私はそれに焦点を当てて、背景を白にするつもりです。

194
00:13:21,920 --> 00:13:27,310
 

195
00:13:27,570 --> 00:13:35,960
 

196
00:13:36,570 --> 00:13:45,830
私はまた3ピクセルの境界線をつけていきます。私たちが作業してきた青い色は、アウトラインではないアウトラインを与えます。この邪魔なハイライトをブラウザー自体から取得します。

197
00:13:45,840 --> 00:13:47,180
 

198
00:13:47,180 --> 00:13:53,670
入力に焦点を当てると、この新しい青い枠線が得られ、背景色も変更されて灰色になり、白です。

199
00:13:53,660 --> 00:13:56,610
 

200
00:13:57,570 --> 00:14:01,850
だからこそ入力用に行う必要がありますが、ここにあるプレースホルダテキストを追加してください。

201
00:14:01,860 --> 00:14:02,850
だから私はHTLのインデックスに行き、入力の隣にまたは入力でプレースホルダ属性を追加します。

202
00:14:03,030 --> 00:14:10,410
そして、これはあなたが望むものでもかまいません。

203
00:14:10,910 --> 00:14:12,270
私はそれを一致させるだけです。

204
00:14:12,470 --> 00:14:13,460
だからそれは新しいものを追加し、リフレッシュすることです。

205
00:14:13,490 --> 00:14:18,800
そこに行く。

206
00:14:18,840 --> 00:14:19,490