【DAY9】Chromeの検証を使ってみよう＋LiveServerをインストールしようをやってみた（30DAYS トライアル）
むぎです。
本日はデイトラ10日目の課題をやります！
DAY10. 『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』
— ショーヘー@バンコク (@showheyohtaki) January 16, 2019
今日でローカル開発の準備は完了します。明日からはローカル環境でコーディングする課題を出すので、しっかり環境整えといてくださいね👍
課題👉https://t.co/6O03CD3Nsp#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/vSUr7CX880
紹介されているグーグルドキュメントのURLはこちら。
https://docs.google.com/document/d/1ZvIFlkuvEXTnqykN--BfXUTIhd96LF-BXKv2-VlisDg/edit
まずはChromeのDLと検証ツールの使い方。
この辺は、progateの道場編でも出てきましたし、ドットインストールでも丁寧に解説してくれていたので、すんなりとできました。
デイトラの課題ではこちらのサルワカさんの記事を参考にするよう紹介されています。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
検証ツールの立ち上げ方
私はWindowsをしようしているのでこちらのショートカットキーを使っています。
ctrl＋shift＋I
もしくは
F12
ちなみにMacでは
コマンド＋opt＋I
わたしもいずれMacにしたいです…！
続いて、以下のSTEPをやってみましょう！のところ。
~~~~~~~
①昨日つくった『Practice』フォルダをVScodeで開く
（フォルダごとVScodeのアイコンにドラッグ&ドロップで開けます）
②test.pngにホバーした際、opacity:0.7になるようcssに追記
③chromeでindex.htmlを開いて検証を開く
④検証画面からh1のテキストを「30DAYSトライアル 10日目達成！」に変更
⑤検証画面からh1の文字色を赤に変更
⑥検証画面からtest.pngのホバー時のアクションをopacity:0.1に変更
⑦検証画面からiPhoneXのサイズでindex.htmlを見てみる（とりあえず見るだけでOK）
~~~~~~~~
①昨日つくった『Practice』フォルダをVScodeで開く
（フォルダごとVScodeのアイコンにドラッグ&ドロップで開けます）
→すんなりできました！
②test.pngにホバーした際、opacity:0.7になるようcssに追記
→あれ？できない。
imgタグではだめなのだろうか…。
figureタグで囲ってみるか…。
HTML
.figure: hover {
opacity: 0.7;
}
ダメだ…。
ググります。
はにわさんやサルワカさんの記事発見。
https://haniwaman.com/notice/day10/
https://saruwakakun.com/html-css/basic/opacity
あらあら…。
ググってもよくわからない…！
初心者向けの記事が少ないから…！
結局、なにかしかのクラスを与えてみたらいけた。
HTML
.example img:hover {
opacity: 0.7;
}
imgタグはクラスを与えないとCSS反映できないのかな。
ちなみに読み方は、以下の通り。
hover…「ホヴァー」
opacity…「オパシティ」
タグの正しい読み方もじんわり覚えていこう…。
③chromeでindex.htmlを開いて検証を開く
→カーソルを当て、ダブルクリックするとできました！
④検証画面からh1のテキストを「30DAYSトライアル 10日目達成！」に変更
→そのまま編集してできた！
⑤検証画面からh1の文字色を赤に変更
→文字色赤にしてたので、「green」で変更！
⑥検証画面からtest.pngのホバー時のアクションをopacity:0.1に変更
→hoverにチェックいれるのよね、できたよ～！！
⑦検証画面からiPhoneXのサイズでindex.htmlを見てみる（とりあえず見るだけでOK）
→左上のスマホみたいなマークをクリックして画面左上に表示される「Responsive」をクリックすると「iphone X」がでてくる。
おお～できました！
続いて、LiveServerのインストールです。
インストールは指定のURLから簡単にできました。
実際に開くところで少しつまずきました。
HTMLの編集画面で右クリックすると「Open with Live Sever」と表示されますが、クリックしても何も変わりません。
おかしいなと思い、再起動してから再度同じ操作をしてみました。
どうやら、ファイアウォールが操作を勝手にブロックしていたようです。
「許可」をクリックすると、無事黒^むと同じようなブラウザが開きました。
良かった。
今日の作業報告
デイトラ１０DAYは1時間25分で終了！
残りの1時間半はprogateをやりたいと思います。
作業時間：2時間
累計作業時間：24時間
今まではノートに手書きで勉強したことを記していましたが、今後はこちらのブログにまとめようと思います～。
