Chapter 18

第三回「HTML/CSS講座::デベロッパーツール」(6.3up!)

shiozumi
shiozumi
2022.06.03に更新

Chromeのデベロッパーツール!

さあ、前回の続きですけど、今度は、デベロッパーツールを使って、HTML/CSSのを学習して行きましょう! HTMLページを開いて、F12を押すと出てくる、やや複雑な情報が詰まったウィンドウーは、ぱっと開いた瞬間、頭も気持ちも混乱してしまうのは、なんと、いまの私でさえ、そうなりますからね~ それぐらい、ぎっしり詰まっているってことでもあるのですけどね。(^^ゞ とうことで、まずは、基本的なところから、とういうか、私も一部しか分かりませんので悪しからず。あくまでも、初心者対象を想定していますので、私よりスキルや経験値が、Web開発に関して上の方は、どうぞ、逆にアドバイスを頂ければ幸いです。(o^―^o)ニコ

動画解説(Vol.1)

https://youtu.be/oyLNM6ziYjs

いきなり分からず、オーバーライド機能とは?!

https://laboradian.com/override-site-file-using-chrome/

動画解説(Vol.2)

https://youtu.be/S9BEFBzzHKk

機能を簡単にまとめると・・・

  1. リモート上にある公開されているファイルを更新したいときに使う機能
  2. まずは、ローカルに編集したいファイルの一部だけをコピーする。
  3. ファイルを編集したら確認(デバッグ)したいので、プレビューが可能
  4. 問題なければ、編集したファイルをアップロード(※[1]別ソフトで実行)

動画解説(Vol.3)

https://youtu.be/jOwaV295ssI

編集後の右クリックでも、上書き保存は可能ですけど・・・名前を付けてからとか、面倒ですね。

編集ファイルのウィンドーを選択して、Ctrl + S

動画解説(Vol.4)

https://youtu.be/93rFisBo0AA

自己学習「CSSファイルも試して見ましょう!」

Github で、作ったファイルをWeb公開が可能!

https://prog-8.com/docs/github-pages

Githubにサイト上で公開

https://shiozumi-esmile.github.io/2022web/jittai_sansho01.html

リモート環境について

  1. 有料のレンタルサーバーなどに、WebコンテンツをUPする。
  2. Githubなど、無料のサイトにUPする。
  3. Virtual BOXなどを使って仮想サーバーに、Webサーバーを立てる。
  4. XAMPなどで、ローカルPCにWebサーバーを立てる。

まとめ

今回は、いきなりのchromeデベロッパーツールを使って、しかも、オーバーライド機能を試すことになりましたけど、みなさんの理解は如何でしょうか? 本来なら、もっと基本的なところから始めた方が良いのですが、、、この講座では大胆に、どんどん奥深く、突っ込んで行きますね。ということで、基礎的なスキルUPは、各自、日々の中で積み重ねてくださいね。勿論、この講座の午後の時間を使ってもOKですから、不足していると思われるスキルがあれば、各自で自習して行きましょう!

補足事項(学習方法)

脚注
  1. FFFTPとか、WinSCPなどが一般的なソフトですね。 ↩︎