開発者ツールについて説明します。

開発者ツール

Googleが作成したWebブラウザChromeは、基本的に開発を支援するツールを提供しています.これを開発者ツールと呼びます.開発者ツールを使用すると、HTML、CSS、JavaScriptの生産性を最大限に高めることができます.

HTML開発関連

Elements:HTMLコードとリアルタイム修正を解析するためのツール

リソース:

ツールで、現在ロードされているWebページで使用されているリソース(画像、スクリプト、データ)を表示します.

ネットワーク:サーバとの通信履歴を表示するツールで、存在しないリソースの検索に役立ちます.

アプリケーション:

ツールWebアプリケーションのパフォーマンスを向上させる方法を問い合わせることができます

[要素](Elements)パネル

私たちのチームのテーマはElements Panelです.
左側:html右側:cssが確認できます.
特定の要素にアクセスするか、タグをクリックして確認できます.

Instargramシードの幅は?

種をつかんだ時

Styles部分の順序は何を意味しますか?

これは,開発者が記録したCSSの順序とは異なり,最上位のタグhtml,ID,CLASS,TAGの順序で並べられている.

user agent sheet(ユーザーagent sheet)とは?

これは、

ディボル図スタイルシートを意味します.

フォントは異形体で、背景は浅い灰色です.

の優先度は、作成者の図面よりも低いため、作成者が書いた図面に上書きされます.

reset.css宣言ですべてリセットすることもできます.

reset.css ?

reset.cssでは、すべてのブラウザで統一された画面を表示できます.
これは、最初からデフォルト値を初期化することを意味します.
bodyラベルのmarginのデフォルト値が違います...最初からbodyのmarginとpadding値を0に初期化します.
タグを付けると、両方の画面に同じ結果が表示されます.

すなわち,cssを記述する際には,以下のように最初からリセットする.

body
{
margin:0px;
padding:0px;
}