前回CSS編(PC)の初出の情報を抜き出しましたが、YouTubeみたいにチャプターごとに頭出しできたら便利かなと思いまして、チャプターごとにタイムスタンプをリストアップしました。大雑把だったり細かかったりうまく分けられてないかもしれないですがご参考に。直接動画にリンクできないので各自手動でスライダーを動かしてもらう形にはなりますがご利用ください。
目次
仕様説明
- 00: 05 headerの仕様
- 00:10 スムーススクロールの確認
- 00:15 フワッと表示の確認
- 00:25 Feature、Products、Newsの表示確認
- 00:40 「MORE」リンクの挙動確認
- 00:50 Contactの表示確認
- 01:12 footerの表示確認
- 01:22 ブレイクポイントの確認
ライブコーディング：XDからの画像書き出し編
- 00:00 カンプの各ページの説明
- 00:28 PCのカンプの説明
- 00:52 SPのカンプの説明
- 01:25 zipファイルの説明
- 02:04 スマホ用画像の分け方
- 03:08 PC用画像の分け方
- 04:28 Retina対応画像について
- 05:21 Macでの画像一括リネーム方法
ライブコーディング：HTML編
- 00:04 practice内ファイル作成
- 00:54 JS,CSSファイルの読み込み
- 01:21 HTMLのhead内の記述
- 05:46 mixin ブレークポイントの設定
- 06:34 Live Sass Compilerについて
- 07:01 CSSの文字コードの指定
- 07:17 変数の作成
- 07:39 PCだけ非表示/スマホだけ非表示にするクラスの作成
- 08:24 カラーコードの取得方法
- 09:23 LiveServerの開き方
- 09:32 コーディング開始
- 09:40 headerの作成
- 13:56 HTMLの大枠作成
- 16:20 top(ファーストビュー)の作成
- 17:44 Conceptセクションの作成
- 18:04 共通クラスの作成
- 20:03 Featureセクションの作成
- 22:15 aboutセクションの作成
- 23:52 Productsセクションの作成
- 26:22 Newsセクションの作成
- 30:42 Concept2セクションの作成
- 32:34 Contactセクションの作成
- 39:27 footerの作成
ライブコーディング：CSS編 PC
- 00:00 基本的なスタイルの指定
- 01:42 headerのスタイル指定
- 02:29 共通クラスの指定
- 04:02 headerのスタイル指定に戻る
- 08:38 footerのスタイル指定
- 13:35 mainコンテンツの共通クラスのスタイル指定
- 17:42 top(ファーストビュー)のスタイル指定
- 21:10 Conceptのスタイル指定
- 24:21 Featureのスタイル指定
- 27:52 aboutのスタイル指定
- 30:35 Productsのスタイル指定
- 33:31 Newsのスタイル指定
- 38:27 Concept2のスタイル指定
- 39:47 Contactのスタイル指定
ライブコーディング：CSS編 SP
- 00:09 Chromeの検証ツールを開いて表示確認
- 00:55 footerのスタイル指定
- 01:17 VS Codeのユーザースニペットの登録の仕方解説
- 02:17 footerのスタイル指定に戻る
- 02:31Conceptのスタイル指定
- 02:56 Featureのスタイル指定
- 03:15 Productsのスタイル指定
- 03:37 Newsのスタイル指定
- 04:02 Concept2のスタイル指定
- 04:20 Contactのスタイル指定
- 04:55 画面確認
- 05:10 Concept2少し修正
- 05:22 headerのスタイルの調整
- 05:51 mainのスタイル指定
- 06:01 sectionのスタイル指定
- 06:23 共通クラスのスタイル指定
- 06:46 footerのスタイル指定
- 08:53 mainのスタイリングスタート
- 09:08 topのスタイル指定
- 10:47 Conceptのスタイル指定
- 11:34 Featureのスタイル指定
- 12:38 aboutのスタイル指定
- 13:50 Productsのスタイル指定
- 15:15 Newsのスタイル指定
- 17:01 Concept2のスタイル指定
- 18:24 about少し修正
- 18:48 Contactのスタイル指定
- 22:17 ドロワーのスタイル指定(header)
- 28:19 アニメーションをつける
ライブコーディング：アニメーションやフォーム機能の実装編(jQuery)
- 00:00 スムーススクロールの実装
- 02:19 wow.jsの発火とクラス付け
- 04:29 Googleフォームとオリジナルフォームの連携
- 04:34 新規フォームの作成
- 06:03 検証ツールを開く
- 06:14 actionのpost先をコピー
- 06:37 nameの中身を拾う
- 08:38 フォームにIDをつける
- 08:47 script.jsにGoogleフォーム連携用のコードを書く
- 09:30 送信テスト1回目
- 10:09 実装後の表示デモ
- 10:37 サンクスメッセージの作成
- 13:50 フォームの入力チェック機能実装
- 16:28 送信テスト2回目
- 16:52 フォームの入力チェック機能実装の続き
コメント