デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう

CSS編集で困ったときの強力な味方!デベロッパーツールの使い方

サイトを作る際、テンプレートから作る場合でも、CSSを編集して自分好みのデザインにすると、オリジナリティがぐっと上がります。

しかし、CSSをきちんと編集したはずなのに、思ったようなデザインにならなかったり、編集が反映されていないように見えたりする場合もあります。

そんなときに使いこなせると便利なのがデベロッパーツール。Google ChromeやFirefoxなどのブラウザに備えられた開発者向けの機能で、CSS関連では主に次のようなことができます。

  • 現在閲覧しているページのCSSの検証
  • 選択した要素にどんなCSSが適用されているかチェック
  • およびCSSの編集、書き足しをした場合のプレビュー
  • スマホから見た場合の画面プレビュー
デベロッパーツールを使っているところ
Chromeでデベロッパーツールを使っているところ

自分で作っているサイトのCSSを編集・即プレビューできるのはもちろん、他の人のサイトに適用されているCSSを覗いて、コードを参考にする、なんて使いかたもできる優れものです

CSSを編集する場合には、デベロッパーツールを使うのと使わないのとでは、快適さが全く違います。最初は難しく感じるかもしれませんが、ぜひ使ってみてください!

この記事では、Google ChromeおよびFirefoxでの使い方を紹介します。他のブラウザでの使いかたには触れていませんので、ご自分で調べてみてください。また、デベロッパーツールはPCでしか使えません。スマホやタブレットからは利用できませんのでご了承ください。

デベロッパーツールの起動方法・終了方法

Google Chromeの場合は、F12キーを押すか、サイトのチェックしたい要素を右クリックして「検証」を選択すると、デベロッパーツールが起動します。

Firefoxでは、同じくF12キーか、右クリックから「要素を調査」を選択で起動します。

デベロッパーツールを立ち上げます
Google Chromeの場合
デベロッパーツールを立ち上げます
Firefoxの場合

すると画面下にデベロッパーツールが現れます。

Google Chromeの画面
Google Chromeの画面です

最初は、デベロッパーツール内の最上部のバーのうち、Google Chromeの場合は「Elements」、Firefoxの場合は「インスペクター」が開いていると思います。CSSおよびHTMLを検証するだけなら、他のタブは使用しません。

デベロッパーツールを終了したいときは、再度F12キーを押すか、デベロッパーツール右上の×アイコンをクリックして終了します。

デベロッパーツールの画面の見かた

デベロッパーツールの見かたを簡単に紹介します。文章で読むより自分で触ってみる方が理解できるので、恐れずいろいろ触ってみてください。

以下はGoogle Chromeの画面ですが、Firefoxでもおおむね同じ画面になっていますので、参考にしてください。

デベロッパーツールの見かた

①検証したい要素を選択できるボタン

エリア左上のこのボタンをクリックすると、検証したい要素をクリックで選択できるようになります。

②適用されているCSS

要素を選択すると、その要素にどんなCSSが適用されているかが、右側に表示されます。また、どのCSSファイルの何行目あたりに記述があるかも確認できます。

このスクリーンショットでは、ol, ul のCSSが表示されているエリアの右上に、 style.css:39 と書かれていますが、これは「style.cssの39行目あたりに、ol、ulについての記述がある」という意味です。

③HTMLが表示されるエリア

ここにページのHTMLが表示されます。各行の左側にある横向き三角形マーク▶をクリックすると、要素が展開し、中に書いてあるHTMLも表示されます。編集したい箇所をダブルクリックすることで、HTMLを編集・プレビューすることもできます

また、HTMLが表示されているエリアの、CSSを検証したい行をシングルクリックすると、その行に適用されているCSSが右側のエリアに表示されます。

CSSを詳しく見てみよう

では、早速modernデモサイトを例に、デベロッパーツールを使ってCSSを詳しく見ていきます。

まずはタイトル部分のCSSを見ます。

デベロッパーツールの使いかた解説

選択したタイトル部分にハイライトが表示されました。CSSが表示されるエリアにいろいろな記述が出てきましたが、取り消し線が付いている行もありますね。

取り消し線が付いている行は、CSSに記述されてはいるけど、現在は適用されていないという意味です。CSSが書かれているけど適用されない理由はいくつかありますが、この場合には「どんなブラウザで見てもCSSが有効になるように、複数の値が書かれている」ことが理由で、いくつかの行が無効になっています。

デベロッパーツールの使いかた解説

また、要素を選択すると3色の異なるハイライトがつきます。青い部分は要素そのものの領域、緑はpaddingによる余白、橙はmarginによる余白を表しています。

borderによる枠線は、marginとpaddingの境界線になっています。

デベロッパーツールでCSSをいじってみよう

では次はデベロッパーツールの目玉ともいえる機能、CSSの編集とプレビュー機能を使ってみます。

CSSをいじってみます

今回は、黄色の枠線がついている .box02 をいじってみます。「枠のみボックスも使えます。これらのボックスは……」というテキストが入っているほうですね。

右下のCSSエリアにいろいろな記述があると思いますが、デベロッパーツールではこの記述の一部を削除したり、書き足したりして、実際にブラウザ上でどのような表示になるかを確認することができます。

CSSを無効にしてみよう

上のスクリーンショットの、ピンク色の点線で囲ったエリアにカーソルを重ねると、CSS各行の左側にチェックマークが現れます。試しに一番上の border: 1px solid #fbe125; の行のチェックマークを外してみましょう。

チェックマークを外してみました

すると、選択しているdivボックスの黄色い枠が消えました。このように、デベロッパーツールではCSSを無効にするとブラウザではどう見えるのか、即座にプレビューすることができます。もちろんプレビューするだけなので、実際のCSSファイルに変更が加えられたりすることはありません。

CSSを書き足してみよう

次はCSSを書き足してみます。.box02 { ~ } の中の適当な余白をクリックすると、1行空白が追加されます。

CSSを書き足してみます

試しに、背景をピンク色にしてみます。 background と入力し、プロパティ(コロン : の左側)を確定したら、値(コロン : の右側)に pink と入力し、Enterキーで確定します。

CSSを書き足した結果

すると、選択しているdivボックスの背景が pink になりました。

さらに、デベロッパーツールでは既存のCSSを書き換えることもできます。試しに一番上の行のborder: 1px solid #fbe125; をクリックしてみます。

CSSを上書きしてみます

すると、行が編集できるようになりました。この値を 2px dashed deeppink に変更してみましょう。

CSSを変更した後

ボックスの枠のデザインが変わりました。このように、CSSを編集して即プレビューすることができるため、CSSをバリバリ編集したい場合には、とても便利です。

ただし、デベロッパーツールで加えた変更は元のファイルには反映されません。さらに、タブをリロードすると加えた変更は消えてしまいます。デベロッパーツールで加えた変更を保存したい場合は、編集箇所のCSSをコピーし、実際に適用したいCSSファイルに追記してください。

レスポンシブ対応デザインを検証してみよう

デベロッパーツールでは、スマートフォンやタブレットからページを閲覧した場合のデザインも検証することができます

レスポンシブ対応を検証

最初にデベロッパーツール最上部の左から二番目にある、モバイルのアイコンをクリックします。するとページのプレビューエリアが小さくなります。

さらにプレビューエリア上部にあるプルダウンから検証したいデバイスを選択すると、プレビューエリアのサイズがそのデバイスの画面サイズになります。「Responsive」を選択すると、画面サイズを自由に変更することができるようになります。

ただし、このレスポンシブ対応プレビューは、実際のブラウザでの表示とは少し異なる部分もありますので、あくまで参考程度にしてください

終わりに:使いこなせば強い味方に!

デベロッパーツールはブラウザ上でCSSを編集・プレビューすることができる、サイト制作者にとってはとても便利なツールです。慣れないうちは扱うのが大変かもですが、ぜひ使いこなせるようになって、味方につけてください。

CSS編集にあたっては、こちらの記事も参考にしていただければ幸いです。

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較