【旧版】JavaScriptでおみくじを作ろう (全9回)
最新版のレッスンはこちらから »
【最新版】JavaScriptでおみくじを作ろう (全8回)
JavaScriptを使っておみくじを作る方法について見ていきます。
このレッスンでは HTML5 / CSS / CSS3 / JavaScript を使用しています。
-
#01 おみくじを作ってみよう (02:14)
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 おおまかにスタイリングをしていこう (02:48)
- btnのマークアップ
- btnのスタイリング
-
#03 イベントを設定していこう (02:48)
- clickイベント
- mousedownイベント
- mouseupイベント
-
#04 ボタンのスタイルを整えよう (02:41)
- btnのスタイリング
-
#05 JavaScriptで乱数を扱ってみよう (02:00)
- ランダムな整数の生成
-
#06 ランダムな整数を表示させよう (01:07)
- ランダムな整数の表示
-
#07 おみくじ結果を表示させよう (02:11)
- おみくじ結果の表示
-
#08 配列を使ってみよう (02:06)
- 配列の活用
-
#09 確率を変更してみよう (02:58)
- 確率の変更
#01 おみくじを作ってみよう
#04 ボタンのスタイルを整えよう
2017年5月8日
補足情報 Chrome 以外で user-select: none; を使用する場合について
Chrome 以外のブラウザで user-select: none; を使用するときには、ベンダープレフィックスが必要な場合があります。
例) Internet Explorer や Edge の場合
-ms-user-select: none;
ブラウザによって記述方法が異なるのでより詳しくは以下のサイトを参考にしてみてください。
補足情報 必要となる知識について
今回のレッスンについては以下も参考にしてみてください。
・JavaScript入門 (全24回)
http://dotinstall.com/lessons/basic_javascript_v2