このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 キャラ診断アプリを作ってみよう (02:39) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面遷移の仕組みを理解しよう (01:52) 無料公開中
- 画面遷移の仕組みについて
-
#03 必要な要素を配置しよう (02:51) 無料公開中
- HTMLのマークアップ
- おおまかなスタイリング
-
#04 要素のスタイルを整えよう (02:49) 無料公開中
- 画面遷移のためのクラス設定
- JavaScriptの読み込み
-
#05 画面遷移を完成させよう (02:16)
- 要素の取得
- クリックイベントの設定
- 動作確認
-
#06 カードの大きさを整えよう (01:48)
- カードの大きさ調整
-
#07 カードの中身を作り込んでいこう (02:44)
- カードのおおまかなマークアップ
- カード全体のスタイリング
-
#08 診断前画面のマークアップをしよう (02:30)
- 診断前画面のマークアップ
-
#09 ボタンのスタイルを整えよう (02:50)
- フォームのスタイリング
- 診断ボタンのスタイリング
-
#10 診断結果画面のマークアップをしよう (02:47)
- 診断結果画面のマークアップ
-
#11 診断結果のスタイルを整えよう (02:43)
- テキストのスタイリング
- ツイートボタンのスタイリング
-
#12 必要なデータを揃えよう (02:52)
- 診断結果データの用意
- getRandomElement()の作成
-
#13 診断結果を表示しよう (02:45)
- setTextContent()の作成
-
#14 背景画像を設定しよう (02:34)
- 背景画像の表示
-
#15 入力した名前を表示させよう (02:53)
- 入力した名前の表示
- フォーカスの設定
- 名無し設定
-
#16 ツイート機能を実装しよう (02:49)
- ツイート機能の実装
- 公式ドキュメントの確認
-
#17 診断結果をツイートに反映させよう (02:14)
- ツイート機能の完成
2017年9月22日
