このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 おみくじを作ってみよう (02:44)
- 完成版の確認
- 作業用フォルダの設定
- index.htmlの作成
-
#02 HTMLのマークアップをしよう (01:37)
- index.htmlのマークアップ
- 要素の確認
-
#03 画面のスタイルを整えよう (02:59)
- 文字コードの指定
- style.cssの作成
- mainのスタイリング
- sectionのスタイリング
-
#04 テキストのスタイルを整えよう (02:27)
- スタイルのリセット
- 余白の設定
- テキストのスタイリング
-
#05 ボタンのスタイルを整えよう (02:23)
- スタイルのリセット
- ボタンのスタイリング
-
#06 ボタンに影をつけてみよう (02:11)
- cursor
- button:hover
- box-shadow
-
#07 ボタンを押し込んでみよう (02:00)
- button:active
- box-shadow
- transform
-
#08 クリックイベントを設定しよう (02:58)
- main.jsの作成
- getElementById()
- addEventListener()
- textContent
-
#09 ランダムな整数値を生成しよう (02:47)
- ランダムな整数値の生成方法
- Math.random()
- Math.floor()
-
#10 ランダムな整数値を表示してみよう (01:28)
- 0,1,2のランダムな整数値の生成
- 動作確認
-
#11 おみくじを表示してみよう (01:54)
- switch文を使った条件分岐
- 動作確認
-
#12 配列を使ってみよう (02:29)
- 配列の利用
- length
- まとめ
#01 おみくじを作ってみよう
補足情報 VS Codeでファイルのドラッグ＆ドロップができない場合
VS Codeのバージョンアップにより、index.htmlのタブをブラウザへドラッグ＆ドロップできなくなったようです。代替手段として、下図のようにサイドバーにてファイル一覧を開き、そこからドラッグ＆ドロップするようにしてください。
それでもうまくいかない場合は、Chromeブラウザを選択した状態で、WindowsならCtrlキー、macOSならcommandキーを押しながら、英語のoキーを押すと、ファイルを選択できるようになります。そこからファイルを開いても OK です。
補足情報 VS Codeで生成されるHTMLの雛形について
VS Codeで生成されるHTMLの雛形に変更があったようです。具体的には
<meta http-equiv="X-UA-Compatible" content="IE=edge">が含まれなくなりました。こちらは古いブラウザに対応するための命令でしたが、現在不要になっているので気にせずにそのまま学習を進めてみてください。補足情報 タブの横に × 印ではなくて丸印が付いている場合
タブの横に × 印ではなくて丸印が付いている場合は、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
補足情報 lang の横が ja にならない場合
『html:5』と打ち込んだあとの雛形で、 lang の横が en になっていない場合、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
#11 おみくじを表示してみよう
補足情報 switch 文のレッスンについて
JavaScript の switch 文については、以下のレッスンを参考にしてみてください。