※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【Web開発初心者向け】ChromeDeveloperToolsでのCSSのスタイルの確認方法

javascript chrome DevTools css ChromeDevTools js スタイルシート 初心者向け

投稿日：2019年11月23日

このエントリーをはてなブックマークに追加
GoogleDeveloperToolsはWebのフロント開発者にとって必須ツールと言っても過言ではないでしょう。この記事ではGoogleDeveloperToolsでのCSSの基本的なデバッグ方法について解説します。

はじめに

この記事ではGoogleDeveloperToolsについて解説します。

ChromeのDeveloperTools（基礎）

DeveloperToolsとは？

ChromeDeveloperTools は、Google Chromeに組み込まれたWeb作成およびデバッグツールのセットです。 このツールセットはChromeに機能として組み込まれているものです。Chromeをまだインストールしていない方はまずChromeをインストールしてください。

はじめに

次のURLにサンプルがおいてあるので、それをベースに説明していきます。

https://storage.googleapis.com/explanation/blog_chrome/index.html

これを開くとサンプルのページが表示されます。

開いてみよう

DevToolsの開き方はいくつかあるのですが、そのひとつがページのどこかの要素を右クリックして『検証』（または『Inspect』）をクリックする開き方です。ページのタイトル『MarsQuaiの好きな食べ物まとめ』と書いてあるところを右クリックして開いてみましょう。

▲DevToolsを開いた状態

ツールのElementsのウィンドウではHTMLのソースとその要素がどこに対応するのかを確かめることができます。

▲ソースがわかりやすく色分けされて表示される

下のStyleでは選択した要素に適用されているスタイルを確認することができます。

▲Styleでスタイルを確認できる

これで作成したスタイルがちゃんと適用されているのか、どのようにスタイルの上書きをされているのかを確認することができます。

スタイルを変更

Stylesのelement.styleに新しいスタイル定義を加えることで選択した要素にスタイルを追加することができます。この追加されたスタイルは実際にページのソースに追加されているわけではなくあくまでブラウザ上でシミュレーションされているだけなので、Ctrl+Rなどで再読込すればもとに戻ります。まずはタイトルの背景を赤くしてみましょう。以下の定義を追加して背景を赤くしてみましょう。

background-color: red;
▲Styleのシミュレーション

element.styleで適用されるスタイルは要素のインラインスタイルと同じレベルのスタイルとしてシミュレーションされます。定義場所が指定されていれば、そこで指定することでそのスタイルシートで定義した時のシミュレーションができます。

▲スタイルシートも確認できる（赤く囲った部分）

クラスの追加

Stylesの.clsからクラスを追加することができます。今回のソースではsample.cssというスタイルシートにcoloredというクラスが用意されています。このクラスを追加してみましょう。

▲classの追加

CSSでコンポーネントを作ってページに適用させていく際には結構便利そうですね。

疑似クラスの追加

DevToolsでは疑似クラスの追加をシミュレーションすることもできます。Stylesの:hovから追加することができます。ページ下部の「記事が面白かった」というボタンはマウスをホバーさせた時、ボタンの色が変わる仕組みになっています。このボタンのhoverされた時のスタイルを確認してみましょう。

▲hover時の色を確認

とりあえず基本的な使い方はここまでにしておきましょう。

参考書籍

このエントリーをはてなブックマークに追加
関連記事
記事へのコメント
　　　　
検索
カテゴリ
Web開発
機械学習
プログラミング
その他
サーバー開発
Linux
目次