このチャプターの目次
Chromeのデベロッパーツール!
さあ、前回の続きですけど、今度は、デベロッパーツールを使って、HTML/CSSのを学習して行きましょう! HTMLページを開いて、F12を押すと出てくる、やや複雑な情報が詰まったウィンドウーは、ぱっと開いた瞬間、頭も気持ちも混乱してしまうのは、なんと、いまの私でさえ、そうなりますからね~ それぐらい、ぎっしり詰まっているってことでもあるのですけどね。(^^ゞ とうことで、まずは、基本的なところから、とういうか、私も一部しか分かりませんので悪しからず。あくまでも、初心者対象を想定していますので、私よりスキルや経験値が、Web開発に関して上の方は、どうぞ、逆にアドバイスを頂ければ幸いです。(o^―^o)ニコ
動画解説(Vol.1)
いきなり分からず、オーバーライド機能とは?!
動画解説(Vol.2)
機能を簡単にまとめると・・・
- リモート上にある公開されているファイルを更新したいときに使う機能
- まずは、ローカルに編集したいファイルの一部だけをコピーする。
- ファイルを編集したら確認(デバッグ)したいので、プレビューが可能
- 問題なければ、編集したファイルをアップロード(※[1]別ソフトで実行)
動画解説(Vol.3)
編集後の右クリックでも、上書き保存は可能ですけど・・・名前を付けてからとか、面倒ですね。
編集ファイルのウィンドーを選択して、Ctrl + S
動画解説(Vol.4)
自己学習「CSSファイルも試して見ましょう!」
Github で、作ったファイルをWeb公開が可能!
Githubにサイト上で公開
リモート環境について
- 有料のレンタルサーバーなどに、WebコンテンツをUPする。
- Githubなど、無料のサイトにUPする。
- Virtual BOXなどを使って仮想サーバーに、Webサーバーを立てる。
- XAMPなどで、ローカルPCにWebサーバーを立てる。
まとめ
今回は、いきなりのchromeデベロッパーツールを使って、しかも、オーバーライド機能を試すことになりましたけど、みなさんの理解は如何でしょうか? 本来なら、もっと基本的なところから始めた方が良いのですが、、、この講座では大胆に、どんどん奥深く、突っ込んで行きますね。ということで、基礎的なスキルUPは、各自、日々の中で積み重ねてくださいね。勿論、この講座の午後の時間を使ってもOKですから、不足していると思われるスキルがあれば、各自で自習して行きましょう!
補足事項(学習方法)
脚注
-
FFFTPとか、WinSCPなどが一般的なソフトですね。 ↩︎