1
00:00:00,730 --> 00:00:05,820
さて、別のエクササイズの時間ですので、ここではシンプルなミニマリストブログサイトを構築しようとしています。

2
00:00:05,880 --> 00:00:07,450
 

3
00:00:07,590 --> 00:00:12,930
 

4
00:00:12,930 --> 00:00:19,110
 

5
00:00:19,350 --> 00:00:21,920
この演習では、実際にはほとんどすべてに焦点を当てる予定ですが、実際にはボックスモデルの多くのものに当てはまるので、パディングや余白、枠線、ポリゴンのタイプなどは新しいGoogleフォントとその他のフォントを取得しますもの。

6
00:00:22,080 --> 00:00:25,050
そこで私たちはこれを構築します。私はあなたにいくつかの指示を与えるつもりです。

7
00:00:25,050 --> 00:00:30,120
あなた自身で最初に試してみたいと思ったら、次のビデオではいつものように最初からやり直すつもりです。

8
00:00:30,120 --> 00:00:31,890
 

9
00:00:32,430 --> 00:00:34,020
だから私はあなたにいくつかのヒントを与えるでしょう。

10
00:00:34,020 --> 00:00:37,200
最初に気づくのは、この灰色のボックスです。

11
00:00:37,860 --> 00:00:44,850
それは実際には身体の周りにある境界線なので、ボディにはこの20ピクセルの境界線があり、その周りにはすべてがあります。

12
00:00:44,850 --> 00:00:45,470
 

13
00:00:45,480 --> 00:00:50,670
そして、それは身体が画面上でずっと進んでいないことを明示していますが、ここからそこに行くことを意味します。

14
00:00:50,700 --> 00:00:52,900
 

15
00:00:53,310 --> 00:00:57,790
私がここで言及する別のことは、いくつかの色です。

16
00:00:58,440 --> 00:01:00,730
だからあなたは色を推測する必要はありません。

17
00:01:00,750 --> 00:01:05,370
実際にカラーピッカーを使用して、自分でこれを見つけようとすると、あなたにとっては良い練習になります。

18
00:01:05,370 --> 00:01:05,920
 

19
00:01:06,270 --> 00:01:11,640
しかし、どのようにして品質がビデオを通して引き継がれ、どのように変化するかはわかりません。

20
00:01:11,640 --> 00:01:12,450
 

21
00:01:12,480 --> 00:01:16,340
私はあなたに色をつけて、ここに入力します。

22
00:01:16,560 --> 00:01:21,510
これらを参照するか、自分の色を自由に使うことができますが、ここでは身体の周りの色がこのグレーの色です。

23
00:01:21,510 --> 00:01:24,500
 

24
00:01:24,630 --> 00:01:28,720
日付はこの青色で、これは青色の色です。

25
00:01:28,920 --> 00:01:34,300
そして、ブログタイトルの見出しの色は青みがかった灰色です。

26
00:01:34,740 --> 00:01:40,160
そしてもう一つのことは、ここにフォントとこのフォントを含める必要があることです。

27
00:01:40,380 --> 00:01:43,410
私は間違いなくあなたの頭の上を推測することを期待していないでしょう。

28
00:01:43,410 --> 00:01:50,280
これはSource sense proと呼ばれ、Googleのフォントで利用できるので、Googleのフォントを使う必要があります。

29
00:01:50,730 --> 00:01:51,950
それをダウンロードしてください。

30
00:01:51,950 --> 00:01:52,600
それを含める。

31
00:01:52,600 --> 00:01:56,830
私たちはそれをダウンロードしなければなりませんが、あなたの老人に正しくCSSAファイルを含める必要があります。

32
00:01:57,180 --> 00:02:00,760
だからここにいくつか他のものがあります。

33
00:02:01,170 --> 00:02:04,650
このエフェクトは、オンになっている左端の境界です。

34
00:02:04,800 --> 00:02:07,580
だから、私たちがここに持っているのと同じ灰色で、もっと薄いです。

35
00:02:07,680 --> 00:02:09,410
だからそれは左の境界です。

36
00:02:09,570 --> 00:02:14,190
私が注意を払う必要があることは、これらがすべて同じに整列されていることを確認することです。

37
00:02:15,060 --> 00:02:19,410
ちょっとしたマージンやパディングなどがあることに注目してください。

38
00:02:19,410 --> 00:02:25,410
私がここで指摘する次のことは、日付がすべて大文字であることです。

39
00:02:25,560 --> 00:02:27,600
だからあなたの成功でそれを行う方法があります。

40
00:02:27,660 --> 00:02:28,730
大文字にします。

41
00:02:29,070 --> 00:02:33,720
また、ここには少しの文字間隔があります。

42
00:02:33,720 --> 00:02:37,790
これは通常の文字間隔ではなく、少し離れて配置されています。

43
00:02:38,400 --> 00:02:41,900
そして、最後の1つの記事の間に。

44
00:02:41,910 --> 00:02:47,370
この行があり、これは水平要素を表すH要素です。

45
00:02:47,370 --> 00:02:53,100
そして、あなたはこれをスタイリングするためにH Rを追加することができます。この細い線を縮小することができます。

46
00:02:53,820 --> 00:02:54,910
私は何かをオンラインで見つけました。

47
00:02:54,930 --> 00:02:56,560
私はちょうどあなたに次のビデオでそれを示すつもりです。

48
00:02:56,670 --> 00:03:03,030
しかし、ちょうど私たちのスタイルを研究すると、あなたはただコピーすることができます非常に多くの素晴らしい記事やコードペンがあります。

49
00:03:03,030 --> 00:03:03,950
 

50
00:03:04,020 --> 00:03:08,490
だから私はあなたがこれ以外のところでこれを正当化するとは思わない。

51
00:03:08,640 --> 00:03:11,580
任意のテキストを自由に使用してください。

52
00:03:11,670 --> 00:03:15,720
私はこれがベーコンのipsumだと思ったが、あなたが望むテキストを置いた。

53
00:03:15,720 --> 00:03:20,460
2つ以上の投稿を自由に持ち、色とフォントで狂って自分のものにしてください。

54
00:03:20,460 --> 00:03:20,990
 

55
00:03:21,330 --> 00:03:22,730
OKですので、次のビデオでお会いしましょう。

56
00:03:22,740 --> 00:03:23,960
私たちは最初から始めます。