はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY4の押さえておきたいポイント
Live Serverの起動／終了方法
VS Codeのフッターにある「Go Live」をクリックするか、以下のショートカットを使う
- Mac編
Command + L を押してから Command + O で起動
Command + L を押してから Command + C で終了 - Windows編
Alt + L を押してから Alt + O で起動
Alt + L を押してから Alt + C で終了
またはindex.htmlを右クリックして「Open with Live Server」を選択もOK！
コードの変更がリアルタイムでブラウザから見れるようになり、開発が圧倒的に捗り、Web制作では必須の拡張機能といえる。
PCに負荷がかかるため使っていないときはこまめに停止したほうがよい。
CSS hover
擬似クラスと呼ばれるもののひとつ。
その要素の上にカーソルが乗っている場合のスタイルを定義する。
リンクの上にホバーした時の色を変えたい（少し透明にしたい）場合は以下の記述になる。
a:hover { opacity: 0.7; }ちなみに、opacity は不透明度のこと。
値が大きいほど不透明（透明ではない）になる。
ダミー画像を置く
「Lorem Picsum」を使うと簡単にダミー画像を用意することができる。
imgタグのリファレンスにURLを指定するとランダムで画像表示をしてくれる。
画像の表示確認をしたい場合などに活用できる。
ディベロッパーツール使いこなそう
デザイン変更のテスト、他のWebサイトのコードをチェック、複数サイズ（PC、スマホなど）での表示チェックなどができる。
起動方法
Mac コマンド＋オプション＋I
Windows F 12
※私はファンクションを有効にしているので、MacだがF12でひらく
ディベロッパーツールでのCSSの見方
右上に書かれている「◯◯.css」は、このCSSが書かれているファイル名を表している。
インラインに書かれたCSS（HTMLタグ内に書かれたCSS）があれば、１番上の「element.style」というところに表示される。
テスト的にプロパティの追加したり削除したり、新しいセレクタの追加変更も可能。
そのコードをそのままコピーも可能。
hoverやactive時のCSSチェックもできる。
Emmet（エメット）
EmmetとはHTML/CSSの超強力な入力補完プラグイン！
基本としては、h1などの要素を入力してTabキーを押すとHTMLタグとして保管されるような仕組み。
HTMLのemmetは要素と「>」「+」「*」の記号の組み合わせで記述する。
CSSは基本的にプロパティの頭文字を使うケースが多い。
※Visual Studio Codeで、Ctrl + Spaceでプロパティの候補が出る。
Emmetチートシート
https://docs.emmet.io/cheat-sheet/
初級編DAY4の追加で調べたいことメモ
- ディベロッパーツールの基本的な使い方、便利な使い方をまとめたい。
- Emmet覚えたい！
けどチートシートはちょっとみづらいな・・・参考サイト探そう。
初級編DAY4の感想と記録
Emmet含めて、各種ツールすごい！
すごすぎて全然使いこなせる感がない・・・
使ってみないと覚えられないので、PCのショートカットキーを順番に覚えていったように、
まずは「これできるのかな？」と考えてみる→調べてみる→使ってみるを繰り返して
だんだんと覚えていきたい！
しばらくは非効率だけど、「これできるのかな？できないのかな？」という自分の中の疑問を大事にしよう。
その疑問がないと効率化は生まれない！
おし、引き続きがんばろ。
