目次
はじめに
2024年10月からデイトラのWeb制作コースの受講をスタート。
現在は初級編を終えて、中級編に突入しました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
この記事はこんな人に参考になるかも？
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
中級編DAY5の押さえておきたいポイント
環境構築
- 最初にCSSの読み込み、JSの読み込みの設定を行う！
設定後は必ずきちんと読み込みがされていることをテストコードを書いて確認する。 - GoogleFontsを設定。
GoogleFontsはスタイルシート読み込みのうえに入れる。
フォントの読み込みを設定したあとは、必ずディベロッパーツールのRendered Fontsを確認すること。 - 最初に共通化できるものを変数として登録していく。
具体的に要チェックなポイントは以下。- フォント
- フォントサイズ
- ラインハイト
- ベースカラー（背景色）
- キーカラー
- グラデーションカラー
- コンテンツ幅
- ブレイクポイント
- reset.cssの読み込み
- body全体にベースとなるスタイル指定
body タグに指定してあげるとよい。（変数で定義したものを基本的には指定するとよい。）- フォント
- フォントサイズ
- 色
- 背景色
- ラインハイト
Reset.cssが読み込めているかの確認方法
- 方法その１
- Liveserverで開き、検証ツールからElementsを開く。
- linkタグのreset.cssを読み込む行を選択し、右クリックからopen in new tabで開く。
- 開いた時にCSSの中身がちゃんと見えていればOK。
- 方法その２
- Liveserverで開き、検証ツールからネットワークタブを開く。
- CSSを選択した状態で、キャッシュの消去とハード再読み込みを選択。
- ネットワークタブでrecet.cssの状態がステータスコードで200 OKになっていれば読み込みできている。
中級編DAY5の追加で調べたいことメモ
- 環境構築はパターン化して事前準備できそうなので、先輩コーダーさんがどうやっているか調べてみる。
中級編DAY5の感想と記録
でました！！mixin！！
今回はゆっくり動画解説聞いて、以前よりは理解できた気がします。
（ちゃんと本読んで勉強しよう・・・本予約した・・・！）
また、全体のコーディング準備もふむふむと勉強になることばかり！
明日からは本格コーディングスタート！
がんばるぞ！
