新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 スロットマシンを作ってみよう (02:45) 無料公開中
- 完成版の確認
- index.htmlの作成
- imgフォルダの確認
- main.jsの作成
- styles.cssの作成
-
#02 マークアップをしていこう (02:58) 無料公開中
- スロットのアップ
- ボタンのマークアップ
- bodyのスタイリング
-
#03 画面のスタイリングをしよう (02:52) 無料公開中
- スロットのスタイリング
- ボタンのスタイリング
-
#04 ボタンのスタイリングを完成させよう (02:18)
- ボタンのスタイリング
-
#05 JavaScriptを書く準備をしよう (02:36)
- JavaScriptの読み込み
- 要素の取得
- 配列の作成
-
#06 SPINボタンを実装していこう (02:52)
- SPIN?ボタンの実装
- runSlot()の作成
-
#07 STOP機能を実装しよう (02:54)
- STOPボタンの実装
- data属性の使用
- clearTimeoutの設定
-
#08 結果判定機能を実装しよう (02:33)
- stopCountの用意
- checkResults()の作成
-
#09 揃わなかったパネルの色を薄くしよう (02:47)
- unmatchedクラスの作成
- 結果判定の実装
- 動作確認
-
#10 ボタンの見た目を変化させよう (02:57)
- inactiveクラスの作成
- ボタン変化の実装
- 動作確認
-
#11 スロットを完成させよう (02:56)
- SPINボタンの微調整
- STOPボタンの微調整
- 角丸の調整
