1
00:00:00,840 --> 00:00:06,090
したがって、私たちがまだカバーし評価していない最も重要な概念の1つは、要素の位置付けです。

2
00:00:06,600 --> 00:00:10,290
では、ページをレイアウトしたり、divを右上に移動させるにはどうすればいいですか？

3
00:00:10,410 --> 00:00:15,720
または、アンカータグを広げたり、画像間にスペースを追加するにはどうすればよいですか？

4
00:00:15,780 --> 00:00:20,110
そのすべてが本当に重要であり、それはすべてボックスモデルと呼ばれるものに関連しています。

5
00:00:20,220 --> 00:00:26,820
だからボックスモデルは基本的なアイデアです.HDのすべての要素の中核をなすもので、基本的にどの要素もその周りに長方形のボックスがあります。

6
00:00:26,820 --> 00:00:31,190
 

7
00:00:31,680 --> 00:00:38,040
MDAのウェブページに行き、インスペクタを開いて、私は虫眼鏡を選択しました。

8
00:00:38,040 --> 00:00:39,620
 

9
00:00:40,010 --> 00:00:44,810
そして、すべての要素の上にマウスを置くと、その周りにボックスがあることがわかります。

10
00:00:44,910 --> 00:00:48,180
だから、このH2には青い箱があります。

11
00:00:48,180 --> 00:00:49,810
これは箱を持っています。

12
00:00:50,130 --> 00:00:53,370
特に箱根ではないものさえも。

13
00:00:53,490 --> 00:00:56,320
だから、この丸みを帯びた角のdiv。 それにはまだ周囲に箱があります。

14
00:00:56,490 --> 00:00:58,080
背後にある。

15
00:00:58,080 --> 00:00:59,310
 

16
00:00:59,520 --> 00:01:05,790
それで、こことこれは本当に丸いものではなく、これらの丸みを帯びたコーナーを持つように見えますが、まだ箱です。

17
00:01:05,820 --> 00:01:09,130
だから、これらのボックスは、それらの上で異なるプロパティをスタイルすることができるので、シーンの裏には本当に便利です。

18
00:01:09,240 --> 00:01:14,940
したがって、4つのプロパティまたは各ボックスの4つの異なる部分があります。

19
00:01:15,870 --> 00:01:19,350
プロパティはたくさんありますが、操作できるボックスの部分には多くのプロパティがあります。

20
00:01:19,350 --> 00:01:23,550
それで、この図はMDAから来たものであり、段落のものであるとしましょう。

21
00:01:23,610 --> 00:01:29,790
だから、段落にテキストがあり、それにオレンジ色や黄色の境界線を付けると、これはユーザーがテキストと境界線を見るものですが、実際には何か他のことが起こっています。

22
00:01:29,790 --> 00:01:35,010
 

23
00:01:35,010 --> 00:01:42,210
境界線とテキストの間には、パディングと呼ばれるものがあります。

24
00:01:42,360 --> 00:01:47,920
だから、パディングは境界線の内側のスペースだけです。

25
00:01:48,000 --> 00:01:51,040
 

26
00:01:51,190 --> 00:01:56,730
コンテンツと境界線の間にはパディングがあり、反対側にはマージンがあります。これは外側の境界線と他のものとの間にあります。

27
00:01:56,730 --> 00:02:01,060
したがって、要素間にスペースを追加するために頻繁にマージンを使用します。

28
00:02:01,170 --> 00:02:04,720
 

29
00:02:04,860 --> 00:02:10,470
だから、2つのパラグラフがあって、それらをもっと離れたいと思ったら、私はマージンを使い、それを増やします。

30
00:02:10,470 --> 00:02:11,340
 

31
00:02:11,880 --> 00:02:16,380
だから今私たちはそれを行う前にいくつかのプロパティの構文を深く掘り下げていくつもりです。

32
00:02:16,380 --> 00:02:18,700
 

33
00:02:18,720 --> 00:02:24,000
私は、あなたが最もエキサイティングなものの最初のものを作るのを楽しみにしている2つのことを見せてくれるだけですが、重要なことは今のようなものを作る方法を持っていることです。

34
00:02:24,330 --> 00:02:29,870
これまで、私たちは実際には、互いに結ばれたこれらのボックスを作る方法を持っていませんが、それらに割り当てられているが、そこにはテキストがありません。

35
00:02:29,880 --> 00:02:34,500
 

36
00:02:34,500 --> 00:02:39,330
 

37
00:02:39,330 --> 00:02:46,260
だから我々はボックスモデルについて学び、このチックタックトーボードを作るためにここに適用し、次に架空の写真家のためにこのポートフォリオサイトを作るつもりです。

38
00:02:46,260 --> 00:02:50,830
だからこれはいいです。

39
00:02:51,450 --> 00:02:52,350
画像は反応的なので、サイズを変えてウィンドウサイズとグリッドを変更します。

40
00:02:52,420 --> 00:03:00,690
このすべては、ここで学ぶコンセプトに基づいています。

41
00:03:00,750 --> 00:03:04,270
ですから、私は先に進んでここで昇華していきます。

42
00:03:04,710 --> 00:03:07,020
そして私は本当にシンプルな文書を作成しました。

43
00:03:07,560 --> 00:03:10,510
だから単純なHTMLです。

44
00:03:10,740 --> 00:03:12,600
それは接続されたスタイルシートを持っています。

45
00:03:12,660 --> 00:03:14,670
空っぽです。

46
00:03:14,700 --> 00:03:15,330
いくつかのコメントと2つの段落を除いて。

47
00:03:15,330 --> 00:03:18,930
 

48
00:03:18,930 --> 00:03:25,620
だから私がこれを開くと、それは非常に退屈な非常に基本的であることがわかります、私たちはちょうどボックスモデルで遊んでこれを使用するつもりです。

49
00:03:25,620 --> 00:03:27,660
 

50
00:03:28,860 --> 00:03:35,910
 

51
00:03:35,910 --> 00:03:41,940
だから私は成功に向かい、段落を選択してから、これらのコメントを内部にコピーして、私が何をしているのかを視覚的に伝えるためのコードを書くことができます。

52
00:03:41,940 --> 00:03:43,370
だから、これらの境界線を与えることから始めましょう。

53
00:03:43,380 --> 00:03:45,740
 

54
00:03:45,900 --> 00:03:54,450
だからこれは境界線を見直すべきであり、その青い線を画素の青にして、そのリフレッシュを保存して、コンテンツの周りに境界線があることがわかります。

55
00:03:54,450 --> 00:03:57,630
また、あなたが気づいていることは、ここのコンテンツが画面の向こう側にあることです。

56
00:03:57,630 --> 00:04:02,360
 

57
00:04:02,370 --> 00:04:08,460
私たちの国境はここでは止まらないし、それはデフォルトで段落を作るときに画面全体に行き渡るからだ。

58
00:04:08,460 --> 00:04:09,620
 

59
00:04:09,630 --> 00:04:20,210
したがって、テキストの段落自体の幅を変更したい場合は、widthプロパティを使用することができ、先に進んで1の幅を与えます。

60
00:04:20,220 --> 00:04:23,260
開始するのに200ピクセルを使ってみましょう。

61
00:04:23,490 --> 00:04:25,390
私がリフレッシュすると、幅が変更されたことがわかります。

62
00:04:25,890 --> 00:04:29,190
私が内容を調べるなら、青ではない。

63
00:04:29,190 --> 00:04:34,920
そして、その周りに国境があります。

64
00:04:35,940 --> 00:04:37,840
その内容は青です。

65
00:04:38,310 --> 00:04:39,700
そして、このダイアグラムでは、このボックスはこの要素ボックスです。

66
00:04:40,110 --> 00:04:45,350
そして、その周りには境界線があります。

67
00:04:45,630 --> 00:04:48,330
国境とコンテンツの間にはスペースがありません。

68
00:04:48,330 --> 00:04:52,020
幅のあるものと高さがあるもの。

69
00:04:52,020 --> 00:04:56,920
だから、300ピクセルの高さをしてみましょう。

70
00:04:57,060 --> 00:05:02,360
私はそれを取り除くつもりですが、私たちが好きなだけの高さがあります。

71
00:05:02,370 --> 00:05:06,620
パーセンテージを使用できるようにピクセルを使用する必要はありません。

72
00:05:06,930 --> 00:05:11,760
そしてそれらは本当に便利ですので、私にあなたを見せてください。

73
00:05:13,890 --> 00:05:15,780
50％をしようとすると、その50％が何であるか不思議に思うかもしれません。

74
00:05:15,810 --> 00:05:23,310
答えはそれが親要素の50％だということです。

75
00:05:23,310 --> 00:05:27,290
 

76
00:05:27,300 --> 00:05:34,230
この場合、段落の内側に段落がある本文は、本文の途中になります。

77
00:05:34,230 --> 00:05:35,240
私たちの場合、本文はページ全体です。

78
00:05:35,310 --> 00:05:37,390
それはすべての方法を横切っていた。

79
00:05:37,410 --> 00:05:38,240
だから我々はページの半分で終わる。

80
00:05:38,250 --> 00:05:40,620
 

81
00:05:40,800 --> 00:05:51,870
また、これについてもうれしいことは、ウィンドウのサイズを変更してもそれが変わるので、多くの人がこれを使用し、このイメージグリッドで実際に使用することになります。

82
00:05:51,900 --> 00:05:54,890
画像が幅を変えていることがわかります。それはパーセンテージです。

83
00:05:55,280 --> 00:05:59,490
私は今のようにそれを保つつもりです。

84
00:06:00,040 --> 00:06:04,590
 

85
00:06:04,770 --> 00:06:10,080
次に話すつもりのプロパティは、パディングです。パディングは、要素と境界の間のこのスペースです。

86
00:06:10,080 --> 00:06:11,600
そして今、私たちは境界線の上に右のスペースを持っていません。

87
00:06:11,750 --> 00:06:15,410
 

88
00:06:15,840 --> 00:06:21,570
したがって、パディングというプロパティがあり、それにピクセル数を与え、開始するのに10ピクセルを使ってみましょう。

89
00:06:21,570 --> 00:06:22,120
ファイルを更新して保存します。

90
00:06:22,230 --> 00:06:25,130
そして今、私たちはすべての面に10ピクセルのパディングを持っています。

91
00:06:25,410 --> 00:06:28,700
 

92
00:06:29,040 --> 00:06:36,660
 

93
00:06:37,080 --> 00:06:45,390
だから私が今調べてみると、この緑色のコンテンツが現れているので、青色のコンテンツを持っているので、周りと緑色の境界線とコンテンツの間にあるので、明らかにこれを増やすことができます。内部にはさらにスペースがあります。

94
00:06:45,380 --> 00:06:49,760
しかし、これはパディングを設定する唯一の方法ではありません。

95
00:06:50,490 --> 00:06:52,890
これは4つの側面すべてにまったく同じように設定します。

96
00:06:52,920 --> 00:06:57,250
しかし、たまには、境界線のように、片面または両面にのみパディングをしたい場合もあります。

97
00:06:57,380 --> 00:07:01,760
より長いバージョンのためのショートカットがあります。そこでは、ボーダートップ10ピクセルボーダーの下5ピクセルです。

98
00:07:01,800 --> 00:07:09,510
 

99
00:07:09,900 --> 00:07:17,940
詰め物と同じこと、それはそれをコメントし、詰め物のように40ピクセルと新鮮なものを残すことができます。

100
00:07:19,440 --> 00:07:20,270
そしてここでパディングを取得します。

101
00:07:20,520 --> 00:07:22,090
それがパディングの唯一の場所です。

102
00:07:22,320 --> 00:07:24,250
 

103
00:07:24,330 --> 00:07:29,640
そして、私はこの青い空の上のスペースが、ここからの彼女の実際の内容であるパディングではないことを覚えています。

104
00:07:29,630 --> 00:07:30,830
右にスペースがあるように見えますが、違います。

105
00:07:30,990 --> 00:07:33,610
それは別の場所から来ています。

106
00:07:33,620 --> 00:07:35,930
私たちがここでできるもう一つのことは、余裕をもって遊ぶことです。

107
00:07:37,170 --> 00:07:40,920
マージンはパズルの最後の部分です。

108
00:07:41,160 --> 00:07:43,780
国境の外側のスペースです。

109
00:07:43,860 --> 00:07:45,900
要素間には

110
00:07:45,900 --> 00:07:47,980
 

111
00:07:48,450 --> 00:07:54,620
ですから、このスペースをここで増やしたり、増やしたりしたいと思うかもしれないので、これは役に立つでしょう。ここでは、イメージ間のこのスペースはMarjanを使って設定されています。

112
00:07:54,620 --> 00:08:01,280
実際にはパディングのように見えますので、マージンを言うことができ、開始して更新するために100ピクセルのような明白なことをしましょう。

113
00:08:01,500 --> 00:08:07,090
 

114
00:08:07,110 --> 00:08:10,240
 

115
00:08:10,410 --> 00:08:15,810
そして、何が起こったのかは、境界線の外側にある要素のすべての側面に100ピクセルのスペースがあることです。

116
00:08:15,810 --> 00:08:17,100
だからアスペクトを見つける。

117
00:08:18,240 --> 00:08:19,360
 

118
00:08:19,980 --> 00:08:26,910
あなたは、橙色であると識別されたクロムの中に青色の内容があることがわかります。緑色は橙色のパディングです。

119
00:08:27,000 --> 00:08:28,710
ちょうど詰め物のように。

120
00:08:28,800 --> 00:08:30,030
 

121
00:08:30,030 --> 00:08:36,050
時にはマージンの片側を片側に設定したいので、マージントップが500ピクセルのようにすることができます。

122
00:08:36,690 --> 00:08:38,890
 

123
00:08:38,900 --> 00:08:45,000
そして、彼らが今ここに来て節約したとき、私たちは一番左のスペースには何もありません。

124
00:08:45,000 --> 00:08:46,070
そして、これ以上のスペース。

125
00:08:46,160 --> 00:08:48,180
左下または右下には何もありません。

126
00:08:48,170 --> 00:08:50,480
だからマージンだ。

127
00:08:50,610 --> 00:08:52,710
 

128
00:08:52,710 --> 00:08:58,500
時にはマージンのすべての面に値を追加することもありますが、4つの異なる線で行う必要はありません。

129
00:08:58,500 --> 00:08:59,510
 

130
00:08:59,660 --> 00:09:04,110
だから、もし彼らがここにいるならば、彼らはまったく同じであることを望んでいないが、すべてマージンの上マージンをマージン右マージンボトムと言うわけではない。

131
00:09:04,200 --> 00:09:06,500
だから、国境のような別のショートカットがあります。

132
00:09:06,570 --> 00:09:09,550
あるいは、私たちはすぐにこのマージンを行い、それに4つの価値を与えることができます。

133
00:09:09,570 --> 00:09:14,780
だから、最初のものは上のためのもので、次に右のもの、そして次に下のものです。

134
00:09:14,820 --> 00:09:21,300
 

135
00:09:21,750 --> 00:09:24,330
 

136
00:09:27,570 --> 00:09:35,550
500ピクセルを作ってから次に左を作ってみましょう。このようにすることで、値がすべて違っていても1行で済ませることができます。

137
00:09:35,550 --> 00:09:36,820
 

138
00:09:37,290 --> 00:09:44,190
ここでこれを調べて、500ピクセルを下に取得するかどうかを確認するには、上に20を、左に100を取得し、次に右に40を取得します。

139
00:09:44,180 --> 00:09:49,920
だから、マージンであることがよく見られる最後のものが1つあります。

140
00:09:50,010 --> 00:09:53,790
自動。

141
00:09:53,790 --> 00:09:54,480
だから私たちができるのは、左か右に自動でマージンを設定することです。

142
00:09:54,780 --> 00:09:59,340
それが実際に行うことは、私たちのための要素です。

143
00:09:59,370 --> 00:10:02,550
だから私はそれがどのように動作するかを見せてあげましょう

144
00:10:02,550 --> 00:10:04,570
 

145
00:10:04,710 --> 00:10:12,870
そして、これをもう一度コメントして、マージンを書くことができます。そして、左端または右端のゼロマージンとボトム、そして左端のオートでゼロマージンと言うことができます。

146
00:10:12,870 --> 00:10:18,390
私はこのフルサイズを作り、リフレッシュすると、それが私たちのために物事を集中させることがわかります。

147
00:10:18,510 --> 00:10:23,520
 

148
00:10:23,520 --> 00:10:30,740
 

149
00:10:30,750 --> 00:10:36,810
つまり、これが50％だと決めたのは、ここでは左が自動で右が自動であると分かりますから、それは必要なだけ実際にそれを中心にします。

150
00:10:36,810 --> 00:10:37,880
そして、頂点と底面にゼロがあるので、一緒に遭遇します。

151
00:10:37,980 --> 00:10:41,540
我々はまた、これを行うためのさらに短い方法があり、このマージンゼロのオットーのように見えます。

152
00:10:41,930 --> 00:10:47,940
そして、これは上下左右を0にして自動にします。

153
00:10:48,540 --> 00:10:53,470
 

154
00:10:53,580 --> 00:11:01,380
したがって、何も変わらず、topとautoに50ピクセルを追加したい場合や、50ピクセルと20ピクセルを追加したい場合は、この構文を使用することもできます。

155
00:11:01,380 --> 00:11:04,700
覚えておくべきことの1つは、数値がゼロでない限り、そこにxが必要なことです。

156
00:11:04,740 --> 00:11:09,830
だから私がこれを行うと、左右の上に20が追加され、上と下に50が追加されます。

157
00:11:10,430 --> 00:11:17,720
だからもう一度ここで要約しましょう。

158
00:11:18,780 --> 00:11:21,070
私たちはここにある内側のコンテンツを持っています。

159
00:11:21,120 --> 00:11:25,370
 

160
00:11:25,830 --> 00:11:31,290
私たちは国境の間にある詰め物を持っているので、私たちが持っているのはすべて詰め物が残っていて、国境と国境の間に余裕があります。

161
00:11:31,430 --> 00:11:33,440
基本的に要素の間に。

162
00:11:33,450 --> 00:11:35,530
次のビデオでは、これらのコンセプトを適用して、このコースで使用する予定です

163
00:11:35,610 --> 00:11:40,150