30DAYSトライアル1st

30DAYSトライアルのまとめ【DAY10】

DAY10の課題は「Google Chromeの検証を使う+LiveServerをインストールする」になります。

DAY10課題

Google Chromeの検証(デベロッパーツール)を使う

模写コーディングをやったあとに模写元のソースを確認するためになんとなくで使用してましたが、東京フリーランスのサイトに貼られているリンクの初心者向け!Chromeの検証機能(デベロッパーツール)の使い方でしっかりと使い方、できることを確認。

そしたらGoogle Chromeの検証ってソースを確認するだけじゃないんですね。

ページ開いたままHTML、CSSを直接編集してリアルタイムに結果を確認できて且つ修正内容の保存もできるなんて・・・。しかも特定のプロパティを一旦外してみるとかいうのが、チェックボックスの選択だけでできるのは効率が良いですね。いままでCSSで一旦コメントにして・・・とかしてたのがアホらしいです。

あとはCSSで取り消し線が入ってるプロパティは優先度の関係で適用されていないというのが分かったりと、ほんと便利です。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方内にリンクが貼られているjQueryで設定されたクリックイベントなどを定義している場所を調べる方法ではJavaScriptのデバッグ方法も紹介されています。

こういうのは習うより慣れろだと思うんで、今後の課題をこなして行く際にフル活用して自分のものにしていきます。

LiveServerをインストールする

これは模写コーディングですでにフル活用してます。これがないとブラウザのリロードがめんどくさすぎてやってられないです。

HTMLのリアルタイムプレビューはLive HTML Previewerなども試しましたが、実際にブラウザでプレビューできるLive Serverのほうが圧倒的に良いと思います。 Live HTML PreviewerはHTMLの量が多くなると重くなる感じでしたし。

Live Serverのインストール方法、設定内容ともに過去記事で自分なりにまとめてます。

初心者が模写コーディングを開始するための準備まとめProgateのHTM&CSSコースは一通りやったので、Webページの模写コーディングに取り掛かりました。 参考にさせて頂いたサイ...
VSCode拡張機能Live Server設定内容まとめ先日紹介したVSCodeの拡張機能の各設定内容をまとめました。 とはいっても自分のPCをサーバーにして、ブラウザでプレビューする場...

まとめ

  • Google Chrome(デベロッパーツール)で直接HTML、CSSの編集が可能
  • Yahooなどのすでに存在しているサイトのプログラムも確認できる
  • Live Serverでのリアルタイムプレビューはマジで便利
  • Live Serverで作り込んで、最終的な微調整をデベロッパーツールでやる感じかな
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す