これはかなり速いビデオになるだろう。
私はちょうどGoogle
Chromeが私たちに各チームと協力して評価を見せるために提供している開発ツールのいくつかを強調したいと思います。
これは最後のビデオで作ったTo Doリストです。
それは当時と同じくらい醜いですし、私は2つのことを強調したいと思います。
だから最初は他の人たちと同じようにページソースを実際に見ることができます。
それぞれがこのコースの早い段階で出てきましたが、それはそれほど有用ではありません。
これを変更することはできませんが、右クリックしてinspect要素をクリックするだけです。
そしてこれが何をするかは、要素インスペクタを起動することです。
だからあなたはこの新しいビューをここで見ることができます。
だから、これらすべてのことについて私たちが学ぶつもりのタブがたくさんあります。
今のところ、この要素のタブから始めています。
つまり、これは実際にはすべての要素をインタラクティブに表現したものです。
だから、私たちがdoctypeを持っているのを見ることができます。
各チームは体の頭部を持っています。
あるいは、それぞれの人、私たち、そして仲間、そしてインプットと、あなたが気づいてほしいものは、私がこれらの要素に乗るときです。
だからこのH-1の上にマウスを置いてみましょう。
実際にここで強調表示されています。
だから私はここに立ち寄り、あなたが話しているものがここにあることを示すために強調表示されています。
ここにULがあります。ここに入力チェックボックスがあります。
ここにテキストなどがあります。
したがって、これはそれ自体では有用です。
物事をデバッグして、要素がどのような空間を占めているのか、それが文書の流れのどこにあるのかを確認するだけです。
しかし、私が本当に焦点を当てたいのは、CSSAタブここのスタイルタブです。
だから、これらの事の一つを選んでみましょう。
一番上のクラスまたは二番目のクラスを完成させて、この同盟国を選択しましょう。
そして私はそれをクリックします。
ここでは、実際にこの要素が現在適用しているすべてのスタイルのインタラクティブなビューが実際に表示されています。
完成したクラスのために私はすべての同盟国のために書いたフライコードのためにこのテキスト装飾ラインを持っていることがわかります。
それは赤い枠線を持ち、実際にこれらをオンまたはオフにすることができます。
だから私は今、すべての味方の赤い国境を切り離しました。
私はそれらを元に戻すことができ、私はここで6ピクセルまたは10または1ピクセルになるように変更することができます。
色をクリックして新しい色を選んで、青い枠線を付けます。
これは私たちのファイルを実際に変更するものではありませんが、強調しておきたいことです。
これは、このページをリフレッシュするか、変更が消えるウィンドウを閉じるとすぐにブラウザにのみ表示されます。
これは本当に2つの異なる方法で便利です。
1つは、独自のコードを自分のページでテストして物事をテストし、色を変更したり、境界線を変更したり、プロパティのいくつかの他の属性を変更してただちに視覚的に見ることができます。
他のものは実際に誰かのコードを見ているのに便利です。
だから私はMVNOをホームページだけ開いている。
ここでこのテキストについてもっと知りたいとしましょう。
私ができることは、実際にそれを右クリックしてinspect要素をクリックすることです。
特に要素をクリックすると実際に強調表示されます。
つまり、H-1の共通知識である正しいタグにすぐにジャンプしたことがわかります。
そしてそこにもスパンがあります。
それは開いているウェブのために言います。
それでは、H-1を見てみましょう。
そしてここで私はすべてのスタイルを手に入れます。
だから最初のものは色です。
私がそれを変えれば、そのH-1の色が変わります。
だから、私がフォントを知りたければ、Mazolaがフォントを適用するスタイルを書いた人を何人か下方にスクロールさせたいとしましょう。
ここでは事があり、次のいくつかのビデオではこれが別のセレクターから継承される可能性があるということです。
だから、H-1だけでなく、全身に直接適用されているかもしれません。
下にスクロールすると、ここにあるように見えます。
フォントファミリが開いていると、ライトが非常に真実になります。
だから、私たちが実際にフォントをどのようにしているかを示すことではありません。
すぐに別のビデオが公開されます。
これはちょうどページについて何かを見つけたいと思えば、私はこれらのボタンがどんなタイプの要素であるかを知りたかったと言いましょう。
私が選ぶことのできるアイコンの役割は、虫めがねと物事にカーソルを合わせてクリックすることです。
だから目はアイコンに使われている別のタグで、ここではすべてのスタイルを見ることができます。
これが何であるかを見たいのであれば、虫眼鏡があればそれをクリックすることができます。アンカータグであるとわかります。
だからイメージタグではありません。それはアンカータグなので、どこかで背景イメージを設定して、それがどこにあるか見ていなければなりません。
さあ。
彼らは背景イメージをこのイメージに設定しています。
だからこそ私はあなたがGoogleのChromeでこのInspektorを開くことができ、HMOを見ることができ、評価を見ることができるだけでなく、操作することができます物事を変えようとすることができ、あなたは自分のサイトでそれを行うことができますし、他の誰かのサイトでも行うことができます。
そして、あなたが外に出て、あなたが効果的に複製したいところに誰かのデザインを複製したいとき、それは本当に便利です。
そして、私たちがJavascriptになると、実際にjavascriptのために同じことをすることができます。