1
00:00:00,630 --> 00:00:05,120
このビデオでは、この写真家のポートフォリオサイトを最初から作成します。

2
00:00:05,310 --> 00:00:10,830
そして、通常、私はあなた自身でこれをやろうとして、それに続いてあなたに解決策のビデオを与えるように依頼します。

3
00:00:10,830 --> 00:00:11,550
 

4
00:00:11,640 --> 00:00:14,050
しかし今度はそれに沿った意図的なコードです。

5
00:00:14,070 --> 00:00:19,590
だから私は一緒にコード化しようとしたい、あなたが好きな場合は一度それを見て、次回に沿ってコードすることができます。

6
00:00:19,590 --> 00:00:20,650
 

7
00:00:20,850 --> 00:00:26,220
しかし、ここでの目標は、それを一緒にやろうとしており、そこから抜け出したいことが2つあります。

8
00:00:26,220 --> 00:00:26,940
 

9
00:00:26,940 --> 00:00:33,270
最初のものは、フロートと呼ばれる新しいプロパティがあります。もう1つは、あなたが少し誇りに思うことができるようなものを少し経験してもらいたいということです。

10
00:00:33,270 --> 00:00:37,190
 

11
00:00:37,200 --> 00:00:41,970
それはこれまでにやってきた本当に明るいひどい色です。

12
00:00:41,970 --> 00:00:43,160
 

13
00:00:43,170 --> 00:00:47,210
だから、これは私たちがやることのできる、本当に最小の写真ブログです。

14
00:00:47,280 --> 00:00:49,160
だから始めましょう。

15
00:00:49,230 --> 00:00:50,610
昇華してください。

16
00:00:50,880 --> 00:00:54,330
HMOというフォトグリッドと呼ばれるファイルが1つあります。

17
00:00:54,960 --> 00:01:00,480
私は最初にイメージを表示するか、それ以外は作業しています。

18
00:01:00,480 --> 00:01:07,410
だから、これらは、私がFlickrで見つけた3人の異なる写真家の画像9枚の画像3枚の画像です。

19
00:01:07,410 --> 00:01:08,390
 

20
00:01:08,700 --> 00:01:10,920
すべての写真はクリエイティブコモンズの下でライセンスされています。

21
00:01:10,920 --> 00:01:13,030
ここでライセンスを取得できます。

22
00:01:13,050 --> 00:01:19,800
 

23
00:01:19,800 --> 00:01:27,180
 

24
00:01:27,180 --> 00:01:34,360
だから私たちはこれらのイメージで何かをする前に、私は実際にそれらを取り除くつもりです。私は写真のブログで私の年配のスケルトンad-Dinを追加するつもりです。こんにちはと言う人と、さよならと言う人を追加すると、この部分と一緒にコーディングする必要があります。そして、私はそれらを保存します。そして、スタイルシートを追加します。 SSと私のdivをスタイルするつもりです。

25
00:01:34,410 --> 00:01:42,150
 

26
00:01:43,350 --> 00:01:46,750
 

27
00:01:46,770 --> 00:01:53,890
だから私は実際に彼らに私を与えるつもりです。 D. ちょうどそれを1と呼ぶ。

28
00:01:54,270 --> 00:02:06,810
 

29
00:02:06,900 --> 00:02:10,020
 

30
00:02:14,040 --> 00:02:25,980
 

31
00:02:25,980 --> 00:02:27,630
もう一度これは何かを実証するだけです。ここで私は1つと2つを選択します。私はすべて、それらに異なる背景色を赤色にし、次に背景色を紫色にしますそれらの両方にすべてのdivと100ピクセルの幅を与えます。

32
00:02:27,630 --> 00:02:32,430
だから、私がこれを行うと、私はブラウザでそれを開きます。

33
00:02:33,540 --> 00:02:36,970
私たちには次々と2つの部門があります。

34
00:02:36,990 --> 00:02:39,020
私たちが検査すれば、彼らを覚えています。

35
00:02:39,480 --> 00:02:44,280
彼らは基本的に彼ら自身の行をブロックレベルの要素とするように設定されています。

36
00:02:44,280 --> 00:02:50,400
ですから私がイメージグリッドのためにやっていることが起こることを望まないのであれば、イメージがグリッドまたは複数のものを形成することを同じライン上にしたいのです。

37
00:02:50,400 --> 00:02:54,490
 

38
00:02:54,540 --> 00:02:59,850
もしそうなら、私がdivを使ってそれをしたいのであれば、私はfloatというプロパティを使う必要があります、それは私がそれを達成できる方法の1つです。

39
00:02:59,850 --> 00:03:01,690
 

40
00:03:01,740 --> 00:03:06,780
だから私がしているのは、安全なフロートが残っていて、それが何をするのかです。

41
00:03:06,780 --> 00:03:11,390
ドキュメントの通常の流れからすべての要素を取ります。

42
00:03:11,580 --> 00:03:14,730
だから、それぞれ別々の行にスタックがあります。

43
00:03:15,000 --> 00:03:22,200
そして、起こることは、彼らが左に浮動して、重力がドキュメント内でほとんどなくなると考えることです。

44
00:03:22,200 --> 00:03:23,090
 

45
00:03:23,280 --> 00:03:26,380
そして、このdivは浮き上がって左に押し出されます。

46
00:03:26,400 --> 00:03:27,580
これに対して

47
00:03:27,990 --> 00:03:32,200
だから私がここで新鮮ならば、彼らは今、同じ行にいることがわかります。

48
00:03:32,280 --> 00:03:38,190
だから、画像を使っているときにこの原則を使って、基本的に画像を取得してグリッドを作ることができます。

49
00:03:38,550 --> 00:03:41,840
 

50
00:03:41,970 --> 00:03:48,600
だから私はこれをすべて取り除いて、私たちが持っているデバイスを取り除き、私はこのようにイメージに追加するつもりです。

51
00:03:48,600 --> 00:03:49,910
 

52
00:03:50,280 --> 00:03:55,770
だから私はこのフルスクリーンを作り、このビデオに含まれているそのファイルにあるこれらの画像リンクに貼り付けます。

53
00:03:55,770 --> 00:03:57,040
 

54
00:03:57,810 --> 00:04:04,920
このような9つのイメージタグを作成してイメージタグを作成し、それをコピーして9回貼り付けて、非常に遅くする必要があります。

55
00:04:05,190 --> 00:04:08,230
 

56
00:04:08,490 --> 00:04:15,660
ここで私は少しずつ魔法を使うつもりです。ここでコマンドを使ってすべての行の先頭を選択してから、イメージソースを入力して行の最後に移動します。

57
00:04:15,660 --> 00:04:22,530
 

58
00:04:22,800 --> 00:04:28,650
 

59
00:04:28,710 --> 00:04:35,380
だから私はコマンドを使用しました。右矢印コマンド左矢印は最初のコマンドに移動します。右に行くと、引用符で終わり、次に閉じ括弧で終わります。

60
00:04:35,400 --> 00:04:40,550
それはあなたがエルフであるすべての人をイメージタグとして囲む、本当に簡単で素早い方法でした。

61
00:04:40,920 --> 00:04:46,340
したがって、これを保存してブラウザに移動すると、更新すると表示されます。

62
00:04:46,530 --> 00:04:47,960
今は9つの画像があります。

63
00:04:48,090 --> 00:04:49,680
もちろん、統合されていません。

64
00:04:49,890 --> 00:04:53,890
彼らは多くのスペースを占めています。

65
00:04:54,060 --> 00:05:01,230
だから今私たちはスタイルシートに行き、すべての画像を選択します。

66
00:05:01,230 --> 00:05:05,520
私たちが最初にやりたいことは、それらをあきらめるだけです。

67
00:05:06,090 --> 00:05:13,280
だから、開始するには100ピクセルのようなものを与えましょう。これはあまりにも小さくなるでしょう。

68
00:05:13,710 --> 00:05:21,540
しかし、私はあなたに何が起こっているかを見て、リフレッシュすると、これらのイメージすべてが一緒に並んでいることに気づくでしょうが、指定しなかったイメージの間隔があります。

69
00:05:21,540 --> 00:05:26,360
 

70
00:05:26,430 --> 00:05:29,780
マージンやパッディングなど何も設定しません。

71
00:05:29,790 --> 00:05:34,590
そこで、実際に追加されている白いスペースがあり、スチーム・フクロウではちょっと変わったことが起こっています。

72
00:05:34,590 --> 00:05:36,040
 

73
00:05:36,050 --> 00:05:41,850
しかし、他に何もない画像があるときは、空白または空白が1つだけあります。

74
00:05:41,850 --> 00:05:42,870
 

75
00:05:43,140 --> 00:05:49,710
だから私たちがそれを取り除きたいのであれば、floatを使うことができ、floatがドキュメントの流れから物を取り除くことを思い出してください。

76
00:05:49,710 --> 00:05:51,540
 

77
00:05:51,570 --> 00:05:58,170
だから、もし私がリフレッシュすると、あなたはイメージがお互いに突っ込んでいることが分かります。そして、基本的にそれらの間にスペースは全くありません。

78
00:05:58,170 --> 00:05:59,800
 

79
00:06:00,150 --> 00:06:04,120
そして、私たちは戻って自分の空間にそのスペースを追加することができます。

80
00:06:04,170 --> 00:06:07,020
だから私たちは明らかに、彼らがこの小さなスペースを占めないようにしています。

81
00:06:07,020 --> 00:06:13,700
我々は3つが行き渡ることを望んでおり、それらの間にいくらかのマージンが必要だが、それを制御したい。

82
00:06:14,160 --> 00:06:20,610
 

83
00:06:20,610 --> 00:06:27,320
したがって、それらをフローティングすることによって、ブラウザが私たちのために追加した空白を取り除き、実際の空白ではなくmarginプロパティを使用して独自のカスタム間隔で入ることができるようになりました。

84
00:06:28,920 --> 00:06:33,670
今は幅を変更して30％から始めましょう。

85
00:06:33,720 --> 00:06:39,180
だから、イスラエルの割合は身体の親要素に比例していることに注意してください。

86
00:06:39,180 --> 00:06:41,910
だから、それぞれが体の30％を占めるでしょう。

87
00:06:41,910 --> 00:06:46,800
そして私が30から始める理由は、それらがすべて1行に収まるか、3つが収まるかを確認することです。

88
00:06:46,830 --> 00:06:52,120
私の心の中で、あなたは3人の人の間に隙間なしに行くことがわかります。

89
00:06:52,260 --> 00:06:58,370
そして、私たちが取り上げているのはわずか90％だからです。

90
00:06:58,470 --> 00:07:06,390
したがって、実際にマージンを分割し、それらの間にスペースを追加するために、他のパーセンテージを使用します。

91
00:07:06,390 --> 00:07:06,790
 

92
00:07:07,020 --> 00:07:09,460
すでに3つのグリッドがあります。

93
00:07:09,650 --> 00:07:12,550
私たちが次にやりたいことは、このように見えるようにすることです。

94
00:07:12,750 --> 00:07:15,000
または、それらの間に間隔を均等にします。

95
00:07:15,180 --> 00:07:17,870
だから、私たちは実際に数学をやる必要があります。

96
00:07:18,060 --> 00:07:18,860
だから私はすでにそれをやった。

97
00:07:18,870 --> 00:07:26,210
しかし、基本的にこれを計算すればここにマージンがあります。ここにもマージンがあります。

98
00:07:26,570 --> 00:07:28,430
ここに3つのマージンがあります。

99
00:07:28,600 --> 00:07:32,400
そして、この1つのことについては、この上に5つ。

100
00:07:32,670 --> 00:07:34,910
そして、この1つまたは6つ。

101
00:07:34,920 --> 00:07:45,570
だから私たちは10％を持っており、6と10を6で割った値を6で割り算する必要があります。

102
00:07:45,570 --> 00:07:52,810
だから我々がやることは、マージン1ポイント6 6パーセントと言うだけです。

103
00:07:52,950 --> 00:07:58,440
したがって、ブラウザに戻って結果をチェックしてみると、間隔が空いている3つの均等な間隔の画像が得られることがわかります。

104
00:07:58,440 --> 00:08:01,900
 

105
00:08:01,950 --> 00:08:04,850
だから、数学はそれをもう一度打つだけでした。

106
00:08:05,070 --> 00:08:06,570
これらはそれぞれ10％です。

107
00:08:06,570 --> 00:08:07,980
だから、彼らはわずか30％しか提供しません。

108
00:08:08,160 --> 00:08:12,370
それぞれのマージンは1です。 いずれにしても6％。

109
00:08:12,390 --> 00:08:19,700
だから両側を左右に1つずつ6つずつ2つプラス30％とし、それぞれに3つのポイントを3つ与えます。

110
00:08:19,690 --> 00:08:22,920
 

111
00:08:22,920 --> 00:08:29,330
だから、それは正確に、またはほぼ正確に私たちが四捨五入している3分の1ですが、ここでできることは最高です。

112
00:08:29,530 --> 00:08:30,800
だから三十三点三パーセント。

113
00:08:30,810 --> 00:08:35,200
これらのそれぞれを検証して確認することができます。

114
00:08:35,670 --> 00:08:36,670
そこに行く。

115
00:08:36,690 --> 00:08:39,360
あなたはそれがちょうど3分の1を占めることがわかります