HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利!

13 9 2

Chrome

google chrome

時々、ブログのデザインを無性に変えたくなることがあります。と言っても、CSSをちょこちょこいじる程度なのですが、あまりCSSに詳しくない私には「この部分をこう書き換えるとこう変わる!」という経験値みたいなのがなくて、いつも試行錯誤しています。

本ブログはWordPressで構築しているので、例えば「style.css」を書き換えて保存して、ブラウザで確認したら「うわ!全然予想と違う!デザイン崩れまくっとる!」ということがよくあります。

一瞬だけとは言え、デザイン崩壊したブログにアクセスいただいた方には迷惑な話なので、極力こういう事態は減らしたいところ。

そこで私がやることにしたのが、Chromeの標準機能である「デベロッパーツール」を使って、実際に修正する前にCSSやHTML修正のシミュレートすることです。

デベロッパーツールを使えるようになると非常に便利なので、皆さんにもご紹介したいと思います。

SPONSORED LINK

Chromeの「デベロッパーツール」とは?

Chromeのデベロッパーツールをご存じない方もいるかもしれないので簡単に説明しますと、単語から想像できるとおり「開発者向けのデバッグツール」です。同じような機能を有しているものとしては、Firefoxのプラグイン「Firebug」なんかが有名ですね。

開発者向けというくらいなので、非常に多くの便利な機能(JavaScriptのデバッグとかネットワーク通信のやりとりだとか)を備えています。

ただ、高機能ゆえに使いこなすのは結構大変です。私も全然使いこなせていません。

今回ご説明するのはほんのさわりの部分だけですが、それだけでも便利ですよ!

デベロッパーツールを使ってCSSを仮修正してみる

では実際にデベロッパーツールを使って、CSSを仮修正してみましょう。

ここで注意なのが、あくまで「仮」という点です。これをやったからってCSSが修正されるわけではなく、「ここをこう直せばこういう見え方をする」という修正指針の一助として使うことを目的としています。

デベロッパーツールの起動

まずはデベロッパーツールを起動しましょう。Chromeブラウザ右上の「三」みたいな記号をクリック→「ツール」→「デベロッパーツール」をクリック。

201310_0005[2]

ショートカットキーは「Ctrl+Shift+I」または「F12」です。私はいつも「F12」を使っています。

▼すると、画面下部にデベロッパーツールが表示されます。要素を見ていきましょう。「Elements」タブになっていることを確認して、虫眼鏡アイコンをクリックします。

201310_0004[3]

▼見出しのCSSを(仮)変更してみます。見出し(下の例だと「設定関連」の文字)をクリックします。

201310_0003[5]

すると、見出しの要素が選択されます。選択箇所がh2タグであり、そのh2タグに適用されているCSSが右下に表示されます。

見出しの黄緑色は「padding」を、オレンジ色は「margin」を示しています。

ちなみに、見出し部分を右クリックして「要素を検証」を選択しても同様のことができます。こちらのほうが早いかもしれません。

▼「padding-left」のチェックをはずしてみます。

201310_0002[8]

そのスタイルが取り消し線で除外され、ブラウザ上もそれに対応して左側余白がなくなったのがわかります。

▼フォントサイズを変えてみましょう。「font-size:24px;」の「24px」をクリックします。

201310_0001[36]

100pxに変更してみました。思いっきり枠線からはみ出ちゃいましたが、まあ気にしない。

▼色を変えてみましょう。

201310_0006[1]

カラーパレットから視覚的に色を選択できます。もちろん、カラーコードやカラーネームを指定することもできます。

どうでしょうか?こんな感じでCSSの反映をリアルタイムでチェックできるのがおわかりいただけましたか?

HTMLについては触れませんでしたが、CSS同じようにHTMLタグ部分を修正することで反映確認できます。

繰り返しますが、これは「仮修正」なので、実際のCSSファイルやHTMLファイルの修正を行う必要があることに注意してくださいね。

CSSファイルを修正したのにブラウザ上で反映されない…そんなときは以下の記事を参考にしてみてください。

【WordPress】CSS修正したけど反映されないときに確認すべきこと

まとめ

いかがだったでしょうか。デベロッパーツールの基礎の基礎部分だけですが、これだけでも十分役に立つと思うので、Chromeを利用している人はぜひ使ってみてください!

<関連記事>

【WordPress】CSS修正したけど反映されないときに確認すべきこと

パソコンのChromeで拡張機能なしでUser Agentを変更してスマホ表示を確認する方法

【WordPress】CSSでナンバリング!人気記事のランキング順位を表示する方法

SPONSORED LINK

: 2013/10/23: Chrome

  • メールアドレスを記入して購読すれば、更新をメールで受信できます。現在、36 人が購読中です!
    ※メールアドレスは管理人には知られません

  • ラブグアバが更新されたらプッシュ通知でお知らせします。

  • おっさん管理人グアバが執筆しています。ミスチル好き。
    私が気になったこと(主にスマホ/Webサービス/生活/ミスチル/たまにトイレ)について書いています。2016年7月時点で月間36万PV。
    詳細はコチラ

    フォローはこちらから!