【DAY10.】30DAYSトライアル10日目をわかりやすく解説

パソコンに向かう男性

 

おはこんばにちは、ミヤビです。

 

さて今回で環境設定編を終了させ、次回からローカル環境でアウトプットしていきましょう。

 

 

✔︎本記事の内容

  • DAY10.『Google Chromeの検証を使う + LiveServerをインストールする』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

Google ChromeとLiveServerをインストールしよう

ローカル環境で効率的に開発を行うためにも、Google ChromeとLiveServerをインストールしましょう。

ブラウザのGoogle Chromeをダウンロードしよう

ブラウザとは、ザックリと「閲覧する」という意味であり、、、

 

  • IE
  • Chrome
  • Safari
  •  Firefox

 

などがあり、一度はなんとなく聞いたことがあると思います。

 

あっインターネットエクスプローラか…なるほどね、いつも使っているやつね…

 

ですが、Googleが神なので、Chromeが一番オススメで安定です。

 

標準で搭載されているのもありますが、ない場合は下記からダウンロードしてください。

 

 

Google Chromeの「検証」機能をマスターしよう【デベロッパーツールは神】

Google Chromeが神なのは、「検証」機能が搭載されているからです。

 

コーディングする際は、この検証が必要不可欠になります。

 

サルワカさんの記事がとても有益ですので、参考にどうぞ。

 

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

 

そして、デベロッパーツールの一つのテクニックをここで紹介します。

 

 

どこに何のHTMLやCSSがあてられているのかが簡単に分かります。

 

コーディングを行うときは、この検証機能を活用しながら進めましょう。

 

LiveServerもインストールしよう

ついでにVSCodeの拡張機能「LiveServer」もインストールしましょう。

 

HTMLフォルダをVSCodeで開き、右下の「Go Live」をクリックすると、打ち込んだコードが自動的に反映されます。

 

手動でブラウザを確認する手間が省けますので、メッチャ楽になりますね。

 

 

というわけで、今回で30DAYSトライアル環境設定編は終了です。

 

DAY11.から本格的にアウトプット作業に入りますのでお楽しみに。

 

今回、環境設定編で紹介した、、、

 

  • Emmet
  • ショートカットキー
  • LiveServer

 

などを使って、ちょっとしたストレスをなくすことがコーディングには重要です。

 

それでは楽しいコーディングライフを送っていきましょう。

 

Bootstrapに挑戦する画像 【DAY11.】30DAYSトライアル11日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】