このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 パスワードジェネレーターを作ってみよう (02:44) 無料公開中
- 完成版の確認
- 作業用フォルダの設定
- index.htmlの作成
-
#02 HTMLのマークアップをしよう (02:40) 無料公開中
- index.htmlのマークアップ
- 要素の確認
-
#03 CSSでスタイリングをしよう (01:53) 無料公開中
- 文字コードの指定
- style.cssの作成
- mainのスタイリング
-
#04 全体のスタイルを整えよう (01:45) 無料公開中
- box-shadow
- border-radius
- 余白の設定
-
#05 パスワードのスタイルを整えよう (02:09)
- スタイルのリセット
- パスワードのスタイリング
-
#06 ボタンのスタイルを整えよう (02:27)
- スタイルのリセット
- ボタンのスタイリング
-
#07 ボタンを押し込んでみよう (01:52)
- cursor
- button:hover
- button:active
- opacity
-
#08 フォームのスタイルを整えよう (02:24)
- fieldset
- フレックスボックス
- justify-content
-
#09 JavaScriptの実装をはじめよう (02:32)
- main.jsの作成
- idの付与
-
#10 スライダーを動作させよう (02:57)
- getElementById()
- addEventListener()
- inputイベント
- スライダーの範囲指定
- スタイルの調整
-
#11 ボタンを動作させよう (02:18)
- clickイベント
- idの付与
- textContent
-
#12 ランダムな1文字を取り出そう (01:56)
- アルファベットの準備
- 文字列へのアクセス
- Math.random()
- Math.floor()
-
#13 パスワードを生成しよう (02:57)
- パスワードの生成
- パスワードの長さ変更
-
#14 パスワードに数字を含めよう (02:52)
- 数字の準備
- checkedプロパティ
- lengthプロパティ
-
#15 パスワードに記号を含めよう (02:40)
- 仕様の解説
- 記号の準備
-
#16 関数にまとめてみよう (01:50)
- showPassword()
- 動作確認
-
#17 完成したアプリを振り返ろう (01:59)
- これまでのまとめ
- アプリ開発の振り返り
- 開発のコツ
2023年4月12日
2023年6月22日
