開発者ツールを使うにあたって簡素なページで解説する方が分かりやすいと思うので、
こちらで解説を行っていきます。まずは開発者ツールとは何なのかを説明します。
開発者ツールとは、HTMLやCSSのコードをデバッグするツールです。
デバッグなどとカッコイイ用語が出てきましたが簡単に言うとブラウザで表示しながら
コードを直接変更できるもの。という感じです。
Edge、Chrome、Firefoxそれぞれで少し外観が違うのですが操作はほとんど同じなので
画像と開発者ツールをよく見比べて操作を行ってください。
まず開発者ツールを開くとこのような画面が現れます。
EdgeではDOM Exploerのみを使います。
ChromeではElementsのみを使います。表示位置を下に変えたい場合は右上の[...]を押して[Dock to bottom]
Firefoxではインスペクターのみを使います。
では開発者ツールを起動してみましょう。キーボードのF12を押してください。
開発者ツールが出てきましたね。閉じるときは開発者ツールの?ボタンを押すか、もう一度F12を押してください。
開発者ツールの出し方が分かったので今度は実際に使ってみましょう。
現在このページではbodyタグにCSSでfont-size:20px;が設定してあります。
これを28pxにしてみましょう。ついでに背景カラーも変更しましょう。
背景カラーの変更はbackgroundのプロパティを追加します。
開発者ツールを使い直接プロパティの値を変更できましたか？
文字が大きくて読みにくい場合はもう一度20pxに戻しましょう。単位もpxと記入しないとサイズは変わりません。
新たにプロパティを追加するには既にあるプロパティと括弧閉じ｛｝の間をクリックします。
新たに入力欄が出てくるので、正しいプロパティ名を入力して決定（エンター）
値を入力して入力して決定（エンター）で新たなスタイルが適用されます。