30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY10 Chromeの検証機能を使おう+LiveServerをインストールしよう

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY10を進めていきました。気がつけば、すでに1/3の量をこなしているのだから驚きです。まだ10日間ですが「継続は力なり」という言葉を感じますね。今回の内容は、Chromeの検証機能を使おう+LiveServerをインストールしよう、です。

Chromeの検証機能は、WEBのエンジニアであれば誰しもが必ず利用する便利なものですので、どうやって使うのか覚えていきましょう。

 

->詳細な課題内容

今回のやることは、以下の2つ、

・Chromeの検証機能を利用する

・VSCodeにLiveServerをインストールする

です。

Chromeの検証機能を利用しよう

Chromeの拡張機能は本当に便利です。他のブラウザにも拡張機能はついていますが、Chromeが一番操作性に優れいていると思います。CSS、JavaScriptなどの検証がしやすいです。どこにどんなスタイルを当てると良いかを検討するときや、なぜか思った通りの結果にならない場合のデバックに必須と言っても過言ではありません。他にもスマホサイズやタブレットサイズの検証なども可能です。(このサイズ検証は、時々本物とは違う結果になることがあるので、最後は必ず実機で検証を行うことをお勧めします。)

とにかく検証機能を開いてみましょう。

Macの人は、Command+option+i

windowsの人は、F12

でひらけます。あるいは、右クリックで、表示されるオプションの中から「検証」をクリックして開きましょう。

右側あるいは、下側に何かなぞの画面が表示されると思います。これが検証に用いる画面です。画面の上側に、矢印と、スマホのアイコン、そしてその隣に英語が並んでいると思います。

矢印は、一度クリックして、調べたい要素(h1とかdivとか)をクリックするとそのHTMLとCSSを見せてくれます。

スマホのアイコンをクリックすると、ページの表示サイズを変更できます。スマホ〜PCサイズまで様々なサイズのものを表示することができます。

最後に英語の単語たちですが、これが非常に重要です。検証といっても、CSSの検証、JavaScriptの検証、ネットワークが遅い原因を調べる、セキュリティはどうなっているのか、など様々な検証があります。Chromeでは、画面上部の英語を選択することでどの検証機能を用いるかを選べるのです。

初めての方はとにかく、Elementsを使いこなせるようになりましょう!

Elementsとは、主にHTMLとCSSのコードを確認したり、スタイルを当ててみたりできる機能です。hoverやactive状態を維持したままスタイルの変更などもできるので便利です。

ショーヘーさんの課題にも載っていますが、サルワカさんの説明が非常にwかりやすいです。
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

 

LiveServerをインストールしよう

LiveServerとは、HTMLやCSSファイルを変更し保存した時に、自動で検知して、プレビュー画面を更新してくれるプラグインです。保存を自動保存に設定していると、本当に勝手に表示内容が変わっていくような感じになるので、プログラムを書くのが楽しくなること間違いなしです。

一言でいうとHTMLやCSSファイルの更新を勝手に検知してライブプレビューできる機能です。いちいち変更を加えたファイルを確認するときリロードする手間が省けます。

まとめ

だんだん、課題の内容がエンジニアチックになってきたと感じるのは僕だけでしょうか。30DAYSチャレンジですが、WEB制作で必要となるものが確実につまっているな、と感じます。今後どういった課題がでてくるのか楽しみですね。