プログラミング

【プログラミング初心者】便利すぎるデベロッパーツール 徹底解説!

質問者
Nくん

・プログラミング初心者でも簡単に使える便利なツールを知りたい

・HTMLやCSSでかっこいいサイトやお洒落なサイトのデザインを作れるようになりたい

・模写コーディングの際に便利なツールを知りたい

プログラミング初心者でこのような疑問を持っている方も多いと思います。

 

そんな方に向けて、今回は模写コーディングをする際カッコ良いサイトやお洒落なサイトのデザインを真似したいという時に便利な「デベロッパーツール」を紹介したいと思います。

 

プログラミングで活躍している多くの人たちが利用しているツールなので、ぜひこの記事を機に使ってみましょう。

 

僕も今、プログラミング学習をしていますが、このデベロッパーツールを使うことで模写コーディングを効率的に行ったり、つまずいた時など問題を解決するときに役立っているので、ぜひ参考にしてみてください。

 

この記事を読むことで以下のことがわかります。

 

本記事の内容
  • デベロッパーツールとは
  • デベロッパーツールでできること
  • デベロッパーツールを利用してみる



デベロッパーツールとは

デベロッパーツールとは、Google Chromeに標準で搭載されているデバックツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認することができます。

 

今回は、プログラミング初心者に向けてということで、HTMLやCSSの構成を確認することを紹介したいと思います。

 

このデベロッパーツールはGoogle Chromeのツールなので、ブラウザはGoogle Chromeを前提とします。

 

デベロッパーツールでできること

プログラミング初心者は、このデベロッパーツールでどんなことができるのでしょうか。

 

結論からいうと、デベロッパーツールを使うことで以下のことができます。

 

デベロッパーツールでできること
  • かっこいいサイトのデザインを真似することができる
  • 模写コーディングを効率よくできる
  • レスポンシブデザインも確認できる
  • HTMLとCSSのテスト編集ができる

 

一つひとつ説明したいと思います。

かっこいいサイトのデザインを真似することができる

デベロッパーツールを使うことでかっこいいサイトやお洒落なサイトのデザインを真似することができます。

 

デベロッパーツールでは、全てのWebサイトのHTMLやCSSを確認することができるので、「このサイトのデザインお洒落だな」「このサイトのデザイン真似してみたいな」と思ったら、そのサイトのHTML&CSSをみることができます。

 

模写コーディングを効率よくできる

プログラミングを学習していて、一通りHTMLやCSSを理解したら模写コーディングというものをすると思います。

 

模写コーディングとは、HTMLやCSSの学習が一通り終わった後に、実際にネットに載っているサイトを見て、そのサイトをそっくりそのままHTMLとCSSを使って作っていくことです。プログラミング初心者にとっては結構難しく苦労するところです。

 

この模写コーディングの際に、そのサイトで使われているfont(文字の種類)やcolor(色)などの細かい部分を参照することができます

 

模写コーディングの際、デベロッパーツールを使って完全に丸写しはダメですが、文字の種類や色などはデベロッパーツールで参照してしまった方が効率よく行うことができます。

 

レスポンシブデザインも確認できる

現在では、スマートフォンの普及にともなって、レスポンシブデザインがとても重要になっています。

 

レスポンシブデザインとは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整するデザインのことです。

 

デベロッパーツールでは、レスポンシブデザインも確認することができるます。

 

HTMLとCSSのテスト編集ができる

デベロッパーツールでは、HTMLとCSSのテスト編集ができます。

 

実際のWebサイトの文字の大きさや色、位置など色々といじってどのように変わるかをテストすることができます。

 

ただ、テスト編集なので最終的にはリセットされて元の形に戻ります。

 

デベロッパーツールを使用してみる(画像付き)

デベロッパーツールを開く

 

デベロッパーツールを起動する方法は以下の2つがあります。

 

  1. ページ上で右クリック→検証
  2. ショートカットキー
    • Mac:Cmd+Opt+I
    • Windows:Ctrl+Shift+I

 

デベロッパーツール(1)

 

そうすると、以下のようなページがでてきます。

 

デベロッパーツール(2)

 

これがデベロッパーツールです。

 

HTMLとCSSの配置場所

デベロッパーツール(3)

 

左上にHTML、左下にCSSが配置されています。

 

このHTMLとCSSの配置位置は変えることができます。

 

デベロッパーツール(4)

 

HTMLの右上にある3つの点が縦に並んでいるボタンを押すと4つの配置位置がでてきます。

 

そこで自分が好きな配置位置を決めましょう。

 

カーソルアイコン

次にカーソルアイコンという便利な機能を紹介します。

 

画面の左上にある赤い四角で囲まれたカーソルアイコンをクリックして青色の状態にします。

 

デベロッパーツール(5)

そうすると、画面右側のWebページ上でカーソルを置いた部分のHTMLとCSSを左側に表示してくれます。

 

これでそのカーソルを置いた部分の文字の大きさや色、背景や余白の大きさなどを知ることができます。

 

これを使うことで、自分の気に入った部分のデザインのコードを知ることができます

 

HTMLとCSSをテスト編集してみる

それでは実際にHTMLとCSSをテスト編集してみましょう。

 

今回は、変化をわかりやすくするために大げさに変えてみたいと思います。

 

まずは、HTMLでh1(見出し1)のタイトルを「Write」から「Book」に変えてみたいと思います。

 

デベロッパーツール(8)

 

そうすると、右側のWebページのタイトルも変わりましたね。

 

次に、CSSを変えてみたいと思います。

 

タイトルである「Write」という文字のfont-size(文字の大きさ)を100px、color(文字の色)をredにしてみました。

 

デベロッパーツール(6)

 

左下にあるCSS部分のcolorとfont-sizeを変えると、右側のWebページのタイトルも変わりましたね。

 

もうひとつCSSを変えてみましょう。

 

次は、画像の大きさを変えてみたいと思います。

 

デベロッパーツール(7)

 

img(画像)のmax-widthを100%から50%に変えてみました。

 

すると、右側のWebページの画像も半分のサイズになりましたね。

 

このようにして、デベロッパーツールを使うことで模写コーディングを効率的に行ったり、自分好みのサイトのデザインを真似することができ流ようになります。

 

まとめ: デベロッパーツールを使ってプログラミング学習を効率的にやろう!

 

今回は、プログラミング初心者におすすめのツールであるGoogleChromeの「デベロッパーツール」を紹介しました。

 

  • デベロッパーツールとは
  • デベロッパーツールでできること
    • かっこいいサイトのデザインを真似することができる
    • 模写コーディングを効率よくできる
    • レスポンシブデザインも確認できる
    • HTMLとCSSのテスト編集ができる
  • デベロッパーツールを使用してみる(画像付き)
    • デベロッパーツールを開く
    • HTMLとCSSの配置場所
    • カーソルアイコン
    • HTMLとCSSをテスト編集してみる

 

これからプログラミングを始めようと思っている方や、始めたばかりという方は、ぜひ使ってみてください。



このエントリーをはてなブックマークに追加

-プログラミング
-

© 2022 なおブログ Powered by AFFINGER5