Chromeデベロッパーツールって何?ブログカスタマイズを加速させる「Chromeデベロッパーツール」

  • Chromeデベロッパーツールって何?
  • 何ができるものなの?
  • どういったことに使うといいの?

こういった方の気持ちにお答えします。

こんにちは〜!傘グラファーのKamitani(@umbrellaly)です。

「Chromeデベロッパーツール」って聞いたことがありますか?

恐らくこのページにこられた方は、ブログをやっていたり、WEBのデザインをいじいじしている方が多いかと思います。そのような方の中には、聞いたことがあるけれど、実際にどう使ったらいいのかわからない方もおられるのではないでしょうか?

今回は、冒頭にあるようなデベロッパーツールのハテナを解決していきます。このツールをうまく活用できるようになると、CSSやHTMLをほぼ思うがままに操れるようにもなりますので、サイトデザインが理想のものにぐっと近づくはずです。

少し中級者以上の方を対象にしてはいますが、うまく活用できるようになれば、自分のスキルの幅が広がりますので、ぜひトライしてみてください!

スポンサーリンク

Chromeデベロッパーツールって何?

Chromeデベロッパーツールとは、簡単に言うと、サイトのソースコードを表示させるツールです。

みなさんが普段、スマートフォンやPCなどで閲覧しているサイトは、全てCSSやHTMLといったコードを使って形になっています。僕のこのブログもそうです。

例えば、以下の記事。実際のコードを用いてカスタマイズをする方法を紹介している記事です。

[kanren postid=”1029″]

こんな感じのコードを組み合わせることによって、自分たちが求めるサイトやブログをデザイン面から作り上げていくわけです。

気になったサイトを簡単にチェック

自分が様々なサイトを閲覧していく中で、この影の感じいいな!とか、見出しのデザインがおしゃれだな〜!と思った時にデベロッパーツールを開くことで、実際に使われているソースコードを表示させることができます。

全て丸パクリはもちろんダメですが、気に入った要素を色々なサイトから抽出してくるように組み合わせることで、オリジナリティを出していくことができます。

実際の使用方法

ここからは、実際にChromeデベロッパーツールをどう使っていくかを解説していきます。
CSSやHTMLの知識が少し必要にはなるのですが、ある程度理解している方なら、問題なく使えるかと思いますよ。

ショートカットで開けます

下記の記事はMacユーザー向けの記事ですが、Chromeでサイトを閲覧している状態から、簡単にショートカットボタンで画面を呼び出すことができるんです。

[kanren postid=”1183″]

これがめちゃくちゃ便利。
ぜひこのショートカットも合わせて覚えてください。

デベロッパーツールを開くと、以下の形になります。

それぞれ表示場所によって、記されている内容が別れています。

右上の赤枠エリアにはHTMLのソースコードが。
右下の赤枠エリアにはCSSのソースコードが表示されています。

ここに全てのソースコードが表示されているので、気になった要素については、ここで検証をしていくようなイメージです。

要素の選択方法

例えば、記事内の見出しのソースコードを見たい時。
そういう時には、まず画面右上にある矢印をクリックします。

すると、個別の要素ごとに選択することができるので、気になっている見出し部分をクリックすれば、ソースコードを表示させることができます。

先日のこの記事であれば、この部分の見出しには「h2」の見出しを当てていることも見て撮っていただけるかと思います。こんな感じで、気になっている要素を検証していくのに使用していくことができます。

実際に要素を編集できる

このデベロッパーツールの最強な点として、それぞれ表示されたHTMLやCSSのソースコードを、変更したり、書き加えることができます

めちゃくちゃ便利な機能です。

具体例として、先に挙げた見出しの部分の色を変更するとします。

見出しの本来の色は薄い水色なのですが、これを真っ白にして、文字を黒に表示を変えてみます。

変更するソースコードは以下の部分になります。

CSSの「background」と「color」を変更していきます。

  • background:#fff
  • color:black

このようにコードを変更してあげることで、実際に見出しの表示が変わります。

きちんと見出しの色は白になって、文字色が黒になりました。
こういったような変更を加えていくことが簡単にできます。

色変更以外にも

今回は例として色の変更を加えてみましたが、他にもCSSのコードをうまく当てはめることができれば、文字サイズや影をつけることなんかも可能です。

この機能をうまく使うことで、自分のサイトで実際に実装せずとも、デザインを試しながら検証していくことができます。気になった他サイトのデザインを、自分のサイトで使っているベースカラーに当てはめたりしながら、雰囲気を確認することが可能なわけです。

めちゃめちゃ便利ですね!笑

更新すれば元どおり

これは、ブラウザ上で仮想的な感じで機能しているだけですので、更新ボタンを押せば元どおりになります。ですので、他の方のサイトのデザインを実際に変更しているわけではありませんので、安心してくださいね!笑

Chromeデベロッパーツールでカスタマイズを加速させよう

今回の内容をまとめると

  • サイトのソースコードを表示させるツール
  • 気になったサイトを簡単にチェック
  • ショートカットで開けます
  • 気になっている各要素を検証可能
  • 実際に要素を編集可能

このように、うまく活用することで、自サイトのデザインをもっといいものにしていくことが可能です。

丸パクリすることはダメですが、様々なサイトのいいところを吸収してきて掛け合わせることで、独自性を持った素敵なサイトを目指していくことができまので、デザインに迷っている人は、ぜひ試してみてください。

自分の理想のサイトデザインを目指しながら、楽しいブログライフを送っていきましょう!

Twitterアカウント始動

降り頻るNews・情報の雨 良くも悪くも明日は我が身!我が身を守るもまた我自身。
『貴方は傘をお持ちですか?』

いま、はじめよう。

最新情報をチェックしよう!