・プログラミング初心者でも簡単に使える便利なツールを知りたい
・HTMLやCSSでかっこいいサイトやお洒落なサイトのデザインを作れるようになりたい
・模写コーディングの際に便利なツールを知りたい
プログラミング初心者でこのような疑問を持っている方も多いと思います。
そんな方に向けて、今回は模写コーディングをする際やカッコ良いサイトやお洒落なサイトのデザインを真似したいという時に便利な「デベロッパーツール」を紹介したいと思います。
プログラミングで活躍している多くの人たちが利用しているツールなので、ぜひこの記事を機に使ってみましょう。
僕も今、プログラミング学習をしていますが、このデベロッパーツールを使うことで模写コーディングを効率的に行ったり、つまずいた時など問題を解決するときに役立っているので、ぜひ参考にしてみてください。
この記事を読むことで以下のことがわかります。
目次
デベロッパーツールとは
デベロッパーツールとは、Google Chromeに標準で搭載されているデバックツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認することができます。
今回は、プログラミング初心者に向けてということで、HTMLやCSSの構成を確認することを紹介したいと思います。
このデベロッパーツールはGoogle Chromeのツールなので、ブラウザはGoogle Chromeを前提とします。
デベロッパーツールでできること
プログラミング初心者は、このデベロッパーツールでどんなことができるのでしょうか。
結論からいうと、デベロッパーツールを使うことで以下のことができます。
一つひとつ説明したいと思います。
かっこいいサイトのデザインを真似することができる
デベロッパーツールを使うことでかっこいいサイトやお洒落なサイトのデザインを真似することができます。
デベロッパーツールでは、全てのWebサイトのHTMLやCSSを確認することができるので、「このサイトのデザインお洒落だな」「このサイトのデザイン真似してみたいな」と思ったら、そのサイトのHTML&CSSをみることができます。
模写コーディングを効率よくできる
プログラミングを学習していて、一通りHTMLやCSSを理解したら模写コーディングというものをすると思います。
この模写コーディングの際に、そのサイトで使われているfont(文字の種類)やcolor(色)などの細かい部分を参照することができます。
模写コーディングの際、デベロッパーツールを使って完全に丸写しはダメですが、文字の種類や色などはデベロッパーツールで参照してしまった方が効率よく行うことができます。
レスポンシブデザインも確認できる
現在では、スマートフォンの普及にともなって、レスポンシブデザインがとても重要になっています。
デベロッパーツールでは、レスポンシブデザインも確認することができるます。
HTMLとCSSのテスト編集ができる
デベロッパーツールでは、HTMLとCSSのテスト編集ができます。
実際のWebサイトの文字の大きさや色、位置など色々といじってどのように変わるかをテストすることができます。
ただ、テスト編集なので最終的にはリセットされて元の形に戻ります。
デベロッパーツールを使用してみる（画像付き）
デベロッパーツールを開く
デベロッパーツールを起動する方法は以下の２つがあります。
- ページ上で右クリック→検証
- ショートカットキー
- Mac：Cmd＋Opt＋I
- Windows：Ctrl＋Shift＋I
そうすると、以下のようなページがでてきます。
これがデベロッパーツールです。
HTMLとCSSの配置場所
左上にHTML、左下にCSSが配置されています。
このHTMLとCSSの配置位置は変えることができます。
HTMLの右上にある3つの点が縦に並んでいるボタンを押すと4つの配置位置がでてきます。
そこで自分が好きな配置位置を決めましょう。
カーソルアイコン
次にカーソルアイコンという便利な機能を紹介します。
画面の左上にある赤い四角で囲まれたカーソルアイコンをクリックして青色の状態にします。
そうすると、画面右側のWebページ上でカーソルを置いた部分のHTMLとCSSを左側に表示してくれます。
これでそのカーソルを置いた部分の文字の大きさや色、背景や余白の大きさなどを知ることができます。
これを使うことで、自分の気に入った部分のデザインのコードを知ることができます。
HTMLとCSSをテスト編集してみる
それでは実際にHTMLとCSSをテスト編集してみましょう。
今回は、変化をわかりやすくするために大げさに変えてみたいと思います。
まずは、HTMLでh1（見出し1）のタイトルを「Write」から「Book」に変えてみたいと思います。
そうすると、右側のWebページのタイトルも変わりましたね。
次に、CSSを変えてみたいと思います。
タイトルである「Write」という文字のfont-size(文字の大きさ)を100px、color(文字の色)をredにしてみました。
左下にあるCSS部分のcolorとfont-sizeを変えると、右側のWebページのタイトルも変わりましたね。
もうひとつCSSを変えてみましょう。
次は、画像の大きさを変えてみたいと思います。
img(画像)のmax-widthを100％から50％に変えてみました。
すると、右側のWebページの画像も半分のサイズになりましたね。
このようにして、デベロッパーツールを使うことで模写コーディングを効率的に行ったり、自分好みのサイトのデザインを真似することができ流ようになります。
まとめ： デベロッパーツールを使ってプログラミング学習を効率的にやろう！
今回は、プログラミング初心者におすすめのツールであるGoogleChromeの「デベロッパーツール」を紹介しました。
これからプログラミングを始めようと思っている方や、始めたばかりという方は、ぜひ使ってみてください。
