などの上記疑問や悩みを解決してまいります。
検証ツールの代表的な機能の１つとしてWebページのCSSを確認したり編集したりすることができます。
Web開発において欠かせない機能の１つになるので是非覚えていきましょう。
今回は例として自身のポートフォリオサイトを検証ツールで確認していきます。
本記事の目次
余白を確認しよう
検証ツールを使えばその要素に余白（padding、margin）がかかっているかすぐにわかります。
「Webサイト」より少し上にあるクラス名「c-container」にフォーカスを合わせます。
すると、左側を見ると緑色とオレンジ色の部分が増えました。
これがこの要素にかかっている余白部分です。
緑色部分が「padding」を示し、オレンジ色部分が「margin」を示しています。
ポイント
青色部分 ⇒ 要素
緑色部分 ⇒ padding
オレンジ色 ⇒ margin
それでは実際にCSSがかかっているのかどうか確認していきましょう。
CSSを確認してみよう
要素に指定しているCSSはコード下の青枠部分で確認ができます。
c-containerにかかっているCSSはここで確認することができます。
ありました。緑枠がpadding関連、オレンジ枠がmargin関連です。
このように余白のCSSを簡単に確認することができました。
また一番下までスクロールするとボックスモデルが出てきます。
ここで現在見ている画面上でのボックスモデルに関係する各数値が確認できます。
CSSを編集してみよう
CSSの確認方法が分かったところで、CSSの編集をしてみます。
今回は「Webサイトで課題解決しませんか？」の下にあるCONTACTボタンを編集していきます。
CONTACTボタンにカーソルを合わせて右クリック ⇒ 「検証」をクリックして検証ツールを開きます。
元々適用されているCSSを外してみよう
検証ツールを開くとCONTACTボタンに元々適用されているCSSが表示されていますね。
CSSにカーソルを合わせるとCSSの左側にチェックボタンが表示されます。
このチェックを外すと簡単にCSSを外した状態を確認することができます。
このようにチェックを外すことでCONTACTボタンの角の丸みが変化しました。
これがborder-radiusが外れた状態です。
CSSを編集してみよう
次はCSSを編集してみましょう。
今回は例としてCONTACTボタンの色を変更したいと思います。
現在のボタンの色を指定しているCSSは以下ですね。
.smb-btnの枠内（テキスト部分以外）をクリックします。するとCSSを追記することができます。
以下を記述しましょう。
background-color: gray;
CSSは入力を確定しなくてもWebページ側ではその内容が反映されます。
記述を確定すると元々あったbackground-colorに線が引かれました。
これは後に書いたbackground-colorのCSSが優先されるため前の記述が上書きされているということになります。
また値をそのまま編集することもできます。
先ほど編集したborder-radiusの値を変更してみます。
値の部分（30pxの辺り）をクリックします。すると編集ができるようになるので今回は値を「0」としてみましょう。
border-radiusの値が「0」となったためボタンが角ばったことが確認できました。
このように直接値を編集することもできます。
右クリックでHTMLと同じように編集メニューが表示されます。
ここでもすべては紹介せず抜粋して解説します。
Copy declaration ⇒ CSSの宣言をコピー
Copy declarationをクリックするとそのCSSの宣言をコピーします。
border-radiusに合わせて右クリック ⇒ Copy declarationを選択します。
枠内をダブルクリックして、編集できるようにしたらペーストしてみましょう。
するとborder-radius: 30px;という記述が複製できました。
このようにCSSの宣言をコピーすることができますので、一つだけ編集してその内容をコピーしてCSSファイルなどにコピペできるので便利です。
Copy propertiy ⇒ プロパティをコピー
Copy propertiyをクリックするとそのCSSのプロパティをコピーします。
border-radiusに合わせて右クリック ⇒ Copy propertiyを選択します。
枠内をダブルクリックして、編集できるようにしたらペーストしてみましょう。
するとプロパティのborder-radiusがペーストできました。
Copy value ⇒ 値をコピーする
Copy valueをクリックするとそのCSSの値をコピーすることができます。
border-radiusに合わせて右クリック ⇒ Copy valueを選択します。
枠内をダブルクリックして、編集できるようにしたらペーストしてみましょう。
するとborder-radiusの値である30pxがペーストできました。
Copy rule ⇒ CSS全体をコピー
Copy ruleをクリックすることでそのCSS全体をコピーすることができます。
つまり指定セレクターからその宣言、値まですべてをコピーすることができます。
わかりやすいように複数のCSSが宣言されている部分でCopy ruleをクリックします。（今回は.l-bodyクラスを例としています）
コピーしたらメモでもエディターでも何でもいいのでペーストします。
.l-body {
font-family: trajan-pro-3, serif;
font-weight: 400;
font-style: normal;
}このようにコピーした内容と同じ内容がペーストできれば成功です。
Copy all declaration ⇒ すべての宣言とその値をコピー
Copy all declarationをクリックするとそのCSSの全体のうち宣言と値のみをすべてコピーができます。
検証ツールでCSSを編集して編集した後の内容をコピーして、そのままCSSファイルにコピペできるので便利です。
わかりやすいように複数のCSSが宣言されている部分でCopy all declarationをクリックします。（今回は.l-bodyクラスを例としています）
コピーしたらメモでもエディターでも何でもいいのでペーストしてみましょう。
font-family: trajan-pro-3, serif;
font-weight: 400;
font-style: normal;このようにセレクター以外のプロパティと値の部分だけがコピーできます。
以上が検証ツールCSSを確認、編集する方法でした。
その他にも機能はありますが、今回の記事では説明しませんので自身で確認してみてください。
