CSS

ChromeのデベロッパーツールでCSSを編集する方法【図解アニメーション】

どうも、つよぽんです!

今回はデベロッパーツールを使ったCSSの編集方法についてまとめた記事となります。

今回の記事は次のような方に向けて書きました。

想定読者
  • デベロッパーツールって何?
  • デベロッパーツールは知っているけど使い方がよくわからない
  • ブラウザ画面を見ながら効率よくリアルタイムにCSSの編集を行いたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
デベロッパーツールを使ってリアルタイムにスタイルを変更する方法CSSでスタイルの変更を行うときに便利なデベロッパーツールの基本的な使い方について学習します。デベロッパーツールを使うことで、ブラウザ上で直接スタイルの変更を行うことが出来るので、毎回CSSファイルを開いて修正する手間が省けます。...

デベロッパーツールを使うことで得られるメリットは次のようなものがあります。

  • CSSファイルの変更を行うたびに再読込をする必要が無い
  • ブラウザ画面を見ながら編集でき、Webページのスタイル変更がリアルタイムで行える
  • マージンやパディングなどの数値の微調整によるスタイルの変化を確認しやすい

それでは、今回話していく内容は次の順番で進めていきます。

今回の内容
  1. デベロッパーツールとは
  2. デベロッパーツールの使い方

上記のではアニメーション画像を使って使い方を解説しているので、実際にデベロッパーツールを試す際にアニメーションの動きを参考にしていただけたらスムーズに利用できるかと思います。

 

デベロッパーツールとは

デベロッパーツールは、次のような機能をもったWebブラウザに最初から用意されている機能です。

機能の一例
  1. HTML・CSS・JavaScriptなどのフロントエンド側のファイルの確認や編集ができる
  2. HTMLなどのテキストファイルや画像ファイルが正しく読み込まれたかの確認ができる
  3. JavaScriptを直接実行できる

今回はCSSの話なので、CSS以外の話は割愛しますが、の「JavaScriptを直接実行できる」については以前に別記事でまとめているのでそちらも参考にしていただけたらと思います。

あわせて読みたい
【デベロッパーツール・JS】まずはこの3つの使い方を覚えよう!
【デベロッパーツール・JS】まずはこの3つの使い方を覚えよう!フロントエンド開発で効率良く開発をするのにかかせない「デバッグツール」を使ったことはあるでしょうか?今回はデバッグツールを知らない、使ったこと無いという方に向けてこれだけは覚えておくとよい3つの使い方を説明します。...

今回の説明ではWebブラウザにChromeを使いますが、FirefoxSafariなど他のWebブラウザでもデベロッパーツールは存在するので、Chrome以外をお使いの方は、「こんなことができるのかー」と言った感じで読み進めていただけたらと思います。

デベロッパーツールの使い方

ここから先は、アニメーション画像を使ってどのようにデベロッパーツールを使うのか解説していきます。

Chromeをお使いの方は画像のアニメーションと解説に従って、実際にデベロッパーツールを使うことで、使い方を覚えられると思うのでぜひチャレンジしてみてください。

デベロッパーツールの開き方

下の画像をクリックするとアニメーション画像が別タブで開きます。

デベロッパーツールの開き方デベロッパーツールの開き方

画像クリックした後に表示されるアニメーション画像に従って、①②③の順番で選択していただけるとデベロッパーツールを開くことが出来ます。(動作をアニメーション画像で確認する)

デベロッパーツールを使ったCSSの編集方法

下の画像をクリックするとアニメーション画像が別タブで開きます。

デベロッパーツールを使ったCSSの編集デベロッパーツールを使ったCSSの編集

画像クリックした後に表示されるアニメーション画像に従って、①②③の順番で操作を行うことでCSSの値を変更できます。なで表示されているスタイル定義が記述されているCSSファイル名と行数を「CSSファイル名:行数」という形式で表示されています。

①②③の操作をまとめると次のとおりです。

  1. 要素選択ボタンをクリックする
  2. スタイルを編集したい要素をクリックする
  3. で選択した要素に関連するCSS定義が表示される

のCSS定義は直接編集できるので、ここの値を変更することでリアルタイムにWebページのスタイルが変更されます。(動作をアニメーション画像で確認する)

デベロッパーツールでボックスモデルの値の編集方法

下の画像をクリックするとアニメーション画像が別タブで開きます。

デベロッパーツールを使ったボックスモデルの値の変更デベロッパーツールを使ったボックスモデルの値の変更

上の画像のは指定した要素のボックスモデルの情報を表しています。

CSSのボックスモデルについては以下の記事で解説しているので、ボックスモデルがわからない方は以下記事を参考にしていただけたらと思います。

あわせて読みたい
CSSボックスモデルとは?4つの基本構成を理解する【図解】CSSのボックスモデルを理解することは、Webページの実装に大きな助けとなります。①コンテンツ境界・②パディング境界・③ボーダー境界・④マージン境界、これら4つはCSSのボックスモデルを構成する大事な概念となります。...

上の画像をクリックした際に表示されるアニメーション画像では、ボックスモデルのうちマージン境界の下の部分の値を「50px」にセットして、指定した要素()の下側にスペースができるのが確認できます。(動作をアニメーション画像で確認する)

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • デベロッパーツールは開発を便利にしてくれるツール
  • デベロッパーツールはChrome以外のWebブラウザでも最初から用意されている
  • デベロッパーツールを使ってCSSのスタイル定義を変更することでリアルタイムでデザインが変更されるのが確認できるから効率的

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
デベロッパーツールを使ってリアルタイムにスタイルを変更する方法CSSでスタイルの変更を行うときに便利なデベロッパーツールの基本的な使い方について学習します。デベロッパーツールを使うことで、ブラウザ上で直接スタイルの変更を行うことが出来るので、毎回CSSファイルを開いて修正する手間が省けます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です