30DAYSトライアル 10日目

プログラミング

しばらくぶりになってしまった。

Macの到着と環境を整えるのに時間かかってしまった。
必要なものを一通りインストールして準備完了。
そして10日目に突入。

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

Goo

Google chromeはすでにダウンロードしているので検証機能を使って行きます。
検証からデザイン変更を確認したり、レスポンシブ表示(スマホやタブレットでの表示)した時の見え方を確認したりと、実務でもよく使う機能です。

Google Chromeの検証を使う

今回の課題内容は下記の通りです。

1.デスクトップに作った『Practice』フォルダをVScodeで開く(フォルダごとVScodeのアイコンにドラッグ&ドロップで開けます)
2.test.pngにホバーした際、opacity:0.7になるようcssに追記
3.Google Chromeでindex.htmlを開いて検証を開く
4.検証画面からh1のテキストを「30DAYSトライアル 10日目達成!」に変更
5.検証画面からh1の文字色を赤に変更
6.検証画面からtest.pngのホバー時のアクションをopacity:0.1に変更
7.検証画面からiPhoneXのサイズでindex.htmlを見てみる(とりあえず見るだけでOK)

https://tokyofreelance.jp/30daystrial-coding-1st/

んーと、まずは画像にホバー(マウスカーソルを乗せた状態)にしたら少し透明にすると。

ホバー前(前のブログ記事の時と画像は変更しています)
ホバー後(少し透明になりました)

で、Google Chromeを開いて検証でテキスト等を変更する。

文字色や内容を変えました。

今度は透明度をもっと上げる。

ホバー時のopacity(透明度)を変更。薄いw

最後に、iPhoneXのサイズでの表示を確認。

表示が小さくなりました!

これで検証の大まかな使い方はわかった。
もっと情報量の多いページとかになると混乱しそうだけど、とにかくいじって慣れるほかなさそうですね。

「LiveServer」をインストールしよう

これも作業の効率化に繋がります。
通常、コードに変更を加えた時に手動で更新して内容を確認しないといけないのですがこれがちょこちょこ繰り返していると結構時間を食います…。
変更を勝手に感知してプレビュー画面が更新されるのでめちゃめちゃ便利!
あるのとないじゃ大違いですね。

11日目の課題

DAY11.『Bootstrapの基本を学ぼう』

次回からプログラミング動画サイト「ドットインストール」を使って課題をこなしていく事になります。
動画って音声が聞き取りづらいのでどうなるかわかりませんが、文字起こし機能もあるみたいなので頑張ってやっていきましょうか。

****************** *****************
ニコ生【山小屋氷川んち】⇒こちら 氷川爽助Twitter⇒こちら

にほんブログ村 病気ブログ 難聴・聴覚障害へ
にほんブログ村 ライフスタイルブログ 田舎暮らしへ

にほんブログ村

にほんブログ村
************************************