Chrome開発者ツール超入門!CSSの書き換え方法

Chrome

Chrome開発者ツールを使ってCSSを編集する方法を紹介します。
簡単なCSSを用意した開発者ツール練習用ページもありますので是非使ってみて下さい。

[スポンサーリンク]

このページでやること

Chrome開発者ツールでCSSを書き換える方法を紹介します。

練習用ページ

今回は練習用ページを用意しました。
こちらのページを使ってChrome開発者ツールの使い方を解説していきます。

Chrome開発者ツールでCSS書き換え

まずは練習用ページを開きます。

chrome-css-update1

F12を押して開発者ツールを開きます。
画面左部分はHTMLコードが表示されて、右部分はCSSが表示されています。

chrome-css-update2

ルーペアイコンを選択します。

chrome-css-update3

今回はトップのタイトルの色を変更するので、ルーペを選択後トップのタイトルをクリックして下さい。

chrome-css-update4

画面右部分へトップタイトルのCSSが表示されますので、CSSのcolorを#ff0000(赤)から#000000(黒)へ変更します。
変更してリターンを押すとトップタイトルが赤色から黒色へ変わっています。
この流れがCSSを変更する方法です。

chrome-css-update5

さいごに

Webエンジニアであれば、CSSの書き換え程度であれば開発者ツールでサクッとお手軽に出来たほうがかっこいいですよね。
ぜひ開発者ツールを積極的に活用してみてください!
それでは!