1
00:00:01,440 --> 00:00:03,080
これはかなり速いビデオになるだろう。

2
00:00:03,090 --> 00:00:07,800
私はちょうどGoogle

3
00:00:07,800 --> 00:00:09,710
Chromeが私たちに各チームと協力して評価を見せるために提供している開発ツールのいくつかを強調したいと思います。

4
00:00:09,720 --> 00:00:12,260
これは最後のビデオで作ったTo Doリストです。

5
00:00:12,360 --> 00:00:16,950
それは当時と同じくらい醜いですし、私は2つのことを強調したいと思います。

6
00:00:17,130 --> 00:00:23,040
だから最初は他の人たちと同じようにページソースを実際に見ることができます。

7
00:00:23,040 --> 00:00:28,210
それぞれがこのコースの早い段階で出てきましたが、それはそれほど有用ではありません。

8
00:00:28,230 --> 00:00:35,400
これを変更することはできませんが、右クリックしてinspect要素をクリックするだけです。

9
00:00:37,110 --> 00:00:40,170
そしてこれが何をするかは、要素インスペクタを起動することです。

10
00:00:40,320 --> 00:00:43,170
だからあなたはこの新しいビューをここで見ることができます。

11
00:00:43,530 --> 00:00:47,080
だから、これらすべてのことについて私たちが学ぶつもりのタブがたくさんあります。

12
00:00:47,160 --> 00:00:50,270
今のところ、この要素のタブから始めています。

13
00:00:50,370 --> 00:00:56,700
つまり、これは実際にはすべての要素をインタラクティブに表現したものです。

14
00:00:56,700 --> 00:00:59,280
だから、私たちがdoctypeを持っているのを見ることができます。

15
00:00:59,370 --> 00:01:03,600
各チームは体の頭部を持っています。

16
00:01:03,840 --> 00:01:11,970
あるいは、それぞれの人、私たち、そして仲間、そしてインプットと、あなたが気づいてほしいものは、私がこれらの要素に乗るときです。

17
00:01:11,970 --> 00:01:13,650
 

18
00:01:13,710 --> 00:01:15,420
だからこのH-1の上にマウスを置いてみましょう。

19
00:01:15,690 --> 00:01:17,810
実際にここで強調表示されています。

20
00:01:18,000 --> 00:01:23,230
だから私はここに立ち寄り、あなたが話しているものがここにあることを示すために強調表示されています。

21
00:01:23,260 --> 00:01:27,960
ここにULがあります。ここに入力チェックボックスがあります。

22
00:01:28,290 --> 00:01:30,020
ここにテキストなどがあります。

23
00:01:30,120 --> 00:01:32,790
したがって、これはそれ自体では有用です。

24
00:01:32,790 --> 00:01:38,340
物事をデバッグして、要素がどのような空間を占めているのか、それが文書の流れのどこにあるのかを確認するだけです。

25
00:01:38,340 --> 00:01:39,100
 

26
00:01:39,360 --> 00:01:44,140
しかし、私が本当に焦点を当てたいのは、CSSAタブここのスタイルタブです。

27
00:01:44,190 --> 00:01:45,890
だから、これらの事の一つを選んでみましょう。

28
00:01:46,080 --> 00:01:51,600
一番上のクラスまたは二番目のクラスを完成させて、この同盟国を選択しましょう。

29
00:01:51,810 --> 00:01:53,000
そして私はそれをクリックします。

30
00:01:53,160 --> 00:02:00,600
ここでは、実際にこの要素が現在適用しているすべてのスタイルのインタラクティブなビューが実際に表示されています。

31
00:02:00,600 --> 00:02:01,700
 

32
00:02:02,070 --> 00:02:10,620
完成したクラスのために私はすべての同盟国のために書いたフライコードのためにこのテキスト装飾ラインを持っていることがわかります。

33
00:02:10,770 --> 00:02:12,540
 

34
00:02:12,540 --> 00:02:16,500
それは赤い枠線を持ち、実際にこれらをオンまたはオフにすることができます。

35
00:02:16,920 --> 00:02:21,360
だから私は今、すべての味方の赤い国境を切り離しました。

36
00:02:21,390 --> 00:02:29,800
私はそれらを元に戻すことができ、私はここで6ピクセルまたは10または1ピクセルになるように変更することができます。

37
00:02:30,210 --> 00:02:35,050
色をクリックして新しい色を選んで、青い枠線を付けます。

38
00:02:35,100 --> 00:02:38,900
これは私たちのファイルを実際に変更するものではありませんが、強調しておきたいことです。

39
00:02:38,910 --> 00:02:44,360
これは、このページをリフレッシュするか、変更が消えるウィンドウを閉じるとすぐにブラウザにのみ表示されます。

40
00:02:44,370 --> 00:02:47,340
これは本当に2つの異なる方法で便利です。

41
00:02:47,340 --> 00:02:54,150
1つは、独自のコードを自分のページでテストして物事をテストし、色を変更したり、境界線を変更したり、プロパティのいくつかの他の属性を変更してただちに視覚的に見ることができます。

42
00:02:54,420 --> 00:02:59,180
 

43
00:02:59,340 --> 00:03:01,320
 

44
00:03:01,320 --> 00:03:05,990
他のものは実際に誰かのコードを見ているのに便利です。

45
00:03:06,150 --> 00:03:09,570
だから私はMVNOをホームページだけ開いている。

46
00:03:10,200 --> 00:03:14,910
ここでこのテキストについてもっと知りたいとしましょう。

47
00:03:15,270 --> 00:03:20,790
私ができることは、実際にそれを右クリックしてinspect要素をクリックすることです。

48
00:03:21,360 --> 00:03:25,000
特に要素をクリックすると実際に強調表示されます。

49
00:03:25,350 --> 00:03:31,670
つまり、H-1の共通知識である正しいタグにすぐにジャンプしたことがわかります。

50
00:03:31,680 --> 00:03:33,430
そしてそこにもスパンがあります。

51
00:03:33,450 --> 00:03:34,920
それは開いているウェブのために言います。

52
00:03:35,240 --> 00:03:37,190
それでは、H-1を見てみましょう。

53
00:03:37,470 --> 00:03:40,530
そしてここで私はすべてのスタイルを手に入れます。

54
00:03:40,650 --> 00:03:41,980
だから最初のものは色です。

55
00:03:42,210 --> 00:03:46,630
私がそれを変えれば、そのH-1の色が変わります。

56
00:03:46,890 --> 00:03:54,390
だから、私がフォントを知りたければ、Mazolaがフォントを適用するスタイルを書いた人を何人か下方にスクロールさせたいとしましょう。

57
00:03:54,720 --> 00:03:57,360
 

58
00:03:57,360 --> 00:04:03,060
ここでは事があり、次のいくつかのビデオではこれが別のセレクターから継承される可能性があるということです。

59
00:04:03,060 --> 00:04:06,030
 

60
00:04:06,030 --> 00:04:11,200
だから、H-1だけでなく、全身に直接適用されているかもしれません。

61
00:04:11,250 --> 00:04:13,940
下にスクロールすると、ここにあるように見えます。

62
00:04:13,950 --> 00:04:21,640
フォントファミリが開いていると、ライトが非常に真実になります。

63
00:04:22,560 --> 00:04:25,010
だから、私たちが実際にフォントをどのようにしているかを示すことではありません。

64
00:04:25,020 --> 00:04:26,950
すぐに別のビデオが公開されます。

65
00:04:26,970 --> 00:04:31,800
これはちょうどページについて何かを見つけたいと思えば、私はこれらのボタンがどんなタイプの要素であるかを知りたかったと言いましょう。

66
00:04:31,800 --> 00:04:35,810
 

67
00:04:35,900 --> 00:04:45,330
私が選ぶことのできるアイコンの役割は、虫めがねと物事にカーソルを合わせてクリックすることです。

68
00:04:45,330 --> 00:04:47,250
 

69
00:04:47,340 --> 00:04:52,790
だから目はアイコンに使われている別のタグで、ここではすべてのスタイルを見ることができます。

70
00:04:52,880 --> 00:04:57,810
 

71
00:04:57,810 --> 00:05:03,080
これが何であるかを見たいのであれば、虫眼鏡があればそれをクリックすることができます。アンカータグであるとわかります。

72
00:05:03,090 --> 00:05:08,730
だからイメージタグではありません。それはアンカータグなので、どこかで背景イメージを設定して、それがどこにあるか見ていなければなりません。

73
00:05:08,960 --> 00:05:11,190
 

74
00:05:11,270 --> 00:05:11,850
さあ。

75
00:05:11,850 --> 00:05:14,860
彼らは背景イメージをこのイメージに設定しています。

76
00:05:15,090 --> 00:05:20,130
 

77
00:05:20,130 --> 00:05:26,550
 

78
00:05:26,550 --> 00:05:31,260
 

79
00:05:31,260 --> 00:05:33,100
だからこそ私はあなたがGoogleのChromeでこのInspektorを開くことができ、HMOを見ることができ、評価を見ることができるだけでなく、操作することができます物事を変えようとすることができ、あなたは自分のサイトでそれを行うことができますし、他の誰かのサイトでも行うことができます。

80
00:05:33,150 --> 00:05:37,740
そして、あなたが外に出て、あなたが効果的に複製したいところに誰かのデザインを複製したいとき、それは本当に便利です。

81
00:05:37,740 --> 00:05:39,130
 

82
00:05:39,150 --> 00:05:43,500
そして、私たちがJavascriptになると、実際にjavascriptのために同じことをすることができます。