【Macユーザー】Chromeの”デベロッパーツール”をショートカットで瞬時に開く方法

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

  • デベロッパーツールを瞬時に開きたい
  • 効率よくデベロッパーツールを使いたい
  • ショートカットキーがあるの?

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

サイトのデザインや、簡単な機能を表示するために必要となる言語として、CSSとHTMLが挙げられます。これらのコードをうまく駆使して、自分のサイトやブログをカスタマイズしていくのですが、他のサイトのソースコードを表示して、参考にするための機能が、Google Chromeには最初から備わっています。

それが、「デベロッパーツール」です。

このデベロッパーツールを利用することによって、自分が参考にしたい他サイトのデザインや、簡単な機能のソースコードを表示させる事ができます。

本記事では、このデベロッパーツールを瞬時に呼び出すショートカットキーをご紹介。効率的に他サイトを分析しながら、自分のサイトやブログをどんどん理想のものに近づけていただけると幸いです。

スポンサーリンク

Chromeのデベロッパーツールをショートカットで瞬時に開く方法

⌘(Control)+⬆︎(Shift)+C

Chromeのデベロッパーツールを瞬時に開くショートカットキーは上記の通りです。
ControlとShftとCを同時に押す事で表示する事ができます。

これだけを覚えておくだけで、簡単にデベロッパーツールを表示する事ができます。

Chromeのメニューから開く

もちろん、Chromeのメニューから表示することもできます。

Chromeを開いた画面の右上にある3点ドットの「設定」をクリック

そこをクリックすると、メニュー画面が開きます。
その中の「その他のツール」→「デベロッパーツール」を開くと、デベロッパーツールの画面を表示する事ができます。

これで、ショートカットキーを忘れてしまっても、デベロッパーツールを表示する事が可能ですね。

実際の画面の見方

デベロッパーツールを開くと、以下のような画面になりまして、そのサイトやブログで使用されているCSSやHTMLのソースコードを表示させる事ができます。

こんな感じで、右上の赤枠部分にHTMLのソースコード
その下の青枠部分にCSSのソースコードが表示されます。

HTMLは文字関係の表示に関するコード
CSSは見た目に関する表示のコード

CSSとHTMLに関してよくわからない方は、こんなイメージで捉えてもらえれば大丈夫かと思います。自分の用途や求めたいデザインに合わせて、それぞれのコードを見比べながらカスタマイズしてみてください。

気になる要素を選択できる

デベロッパーツールは、気になる要素を個別に選択して表示させる事ができます。

中央よりちょっと右寄りの部分にある矢印のマークをクリック。

すると、カーソルが出て来て、個別に選択する事ができます。

あとは、自分で気になる箇所を選択して、詳しいソースコードを表示すればOKです。この場合選択されている要素は、トップページの記事カードに表示されている画像に関するコードです。

ここから、気になるコードを自分のサイトやブログと見比べてみて、どこが違うのかな?とか、この表現はどういうコードが使われているのだろう?とひたすら試行錯誤していけば、自分おサイトにも生かす事ができますよ!

デベロッパーツールのショートカットを活用しよう

⌘(Control)+⬆︎(Shift)+C

デショートコードは、改めて上記の方法になります。

デベロッパーツールをうまく活用する事で、カスタマイズする事がすごく楽しくなりますし、コードに関する抵抗もかなり少ないものになります。

CSSやHTMLは一見、かなりめんどくさそうなものですが、何度も触れていくうちに慣れてくるものです。デベロッパーツールもうまく活用しながら、少しでも触れて、慣れる作業をしてみることをオススメします。

  1. デベロッパーツールで他サイトを検証
  2. 自分でも実践
  3. 成功or失敗
  4. ダメなところをデベロッパーツールで再確認

こんなイメージで、トライアンドエラーを繰り返して、自分の理想にどんどん近づけていきましょう!

Twitterアカウント始動

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

いま、はじめよう。

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