ブラウザ上で簡単CSS編集!Chromeのデベロッパーツールの使い方

Chrome Developer Tools

ブログをカスタマイズする時に、管理ページから編集するのはわかりづらいですよね。毎回プレビューするのも面倒です。そういう時はブラウザの機能を使って編集すると、カスタマイズの作業が楽になります。

今回は、ブログをカスタマイズする時に便利なGoogle Chromeのデベロッパーツールの使い方をご紹介します。

デベロッパーツールとは

デベロッパーツールとはGoogle Chromeに標準でついている機能で、ブラウザ上でリアルタイムに表示の確認をしながらCSSの編集などができる、とても便利なツールです。

デベロッパーツール画面

その他のブラウザでも同じような機能がついていますが、Chromeのデベロッパーツールがわたしの中では1番使いやすいです。

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

デベロッパーツールを使うには、Chromeの「表示 > 開発/管理 > デベロッパーツール」を選びます。Windowsでしたら、キーボードの[Ctrl]+[Shift]+[ I ]、Macでしたら[command]+[option]+[ I ]でも表示する事ができます。

何やら英語で難しそうな画面がでてきたな、とちょっと引いてしまう方もいるかもしれませんが、使い方を覚えてしまえば便利なので、積極的に使っていきましょう。

ツールの環境設定

デベロッパーツールの環境設定は、右下の歯車のアイコンをクリックすると表示されます。

デベロッパーツール環境設定

環境設定では、OverrldesメニューからUAを変更できたり、Disable JavaScriptからJavaScriptを無効にしてみたり、Dock to rightからツールの表示位置を変えたりなど、色々できます。

わたしのようにパソコンの画面が小さい方は、ツール画面の左下にある別ウィンドウをクリックするとツール部分を別ウィンドウで開くことができるので、広々と使うことができます。

簡単にブラウザ上でCSSを編集する方法

デベロッパーツールでは、ブラウザ上で簡単にCSSの編集ができます。

編集したい部分を選択する

まず、編集したい部分の上で右クリックをして「要素の検証」を選びます。

要素の検証

すると、選択した部分のHTMLがハイライトされて、ツール右側のフレームに、現在適用されているCSSが表示されます。

選択された要素

ちなみに、ツール左下にある虫眼鏡をクリックした後、編集したい部分をクリックしても要素を選択することができます。

CSSの値を変更する

例として、「<h3>デベロッパーツールとは</h3>」の文字の大きさを変えてみます。右側のCSSのフレーム部分のfont-size:1.35em1.35em部分をクリックすると、値を編集することができます。

試しに文字の大きさを3emにしてみました。ものすごく大きな文字の見出しになりました。このように、CSSを編集するとリアルタイムで画面に反映されます。

CSSの値の変更

値が選択された状態でキーボードの[↑]や[↓]を押すと、1em、1pxごとなど、数値の微調整をすることもできます。

新しいスタイルを追加する

次は「<h3>デベロッパーツールとは</h3>」の文字の色を変更することにします。現在h3にはcolorのスタイルが無いので、追加します。

font-size:1.35emの横をマウスでクリックすると、その下に新しいスタイルが書き込めるようになります。

プロパティ追加

入力をすると、予測変換機能が発動します。英語が苦手なわたしも、これで楽々CSS編集ができます。

エディタでCSSを編集する方法

Google Chromeのデベロッパーツールでは、いつも使っているエディタで作業する時のようにCSSを編集する事ができます。

エディタを使うには、ツール上のパネルメニューの「Source」からと、右側のCSSのフレームの中のCSSファイル名のリンクからでもエディタの画面に行けます。

CSS編集エディタ

ソースの色分けもされているので、わかりやすいです。編集が終わったらコピペしてアップするだけなので簡単にブログカスタマイズなどができるようになります。

ツール左上の矢印をクリックすると、ファイルが一覧で表示されます。CSSファイル名の上で右クリックして「Save」を選ぶと、編集したCSSファイルを自分のパソコンに保存する事もできます。

HP&ブログ作りには必須のツール

デベロッパーツールにはまだまだ便利な機能が沢山あります。これからオリジナルブログやホームページを作りにチャレンジしようと思っている方は、デベロッパーツールの使い方も合わせて覚えておくと今後の作業効率が断然よくなるので、是非使ってみて下さい。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。