このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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 おみくじを作ってみよう
2022年10月25日
補足情報 タブの横に × 印ではなくて丸印が付いている場合
タブの横に × 印ではなくて丸印が付いている場合は、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
- macOSの場合: #08 VS Codeエディタの設定をしていこう
- Windows の場合: #08 VS Codeエディタの設定をしていこう
2022年10月25日
補足情報 lang の横が ja にならない場合
『html:5』と打ち込んだあとの雛形で、 lang の横が en になっていない場合、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
- macOSの場合: #08 VS Codeエディタの設定をしていこう
- Windows の場合: #08 VS Codeエディタの設定をしていこう
#11 おみくじを表示してみよう
2023年7月24日
2023年6月22日
2023年12月21日
補足情報 VS Codeでファイルのドラッグ＆ドロップができない場合
VS Codeのバージョンアップにより、index.htmlのタブをブラウザへドラッグ＆ドロップできなくなったようです。代替手段として、下図のようにサイドバーにてファイル一覧を開き、そこからドラッグ＆ドロップするようにしてください。
それでもうまくいかない場合は、Chromeブラウザを選択した状態で、WindowsならCtrlキー、macOSならcommandキーを押しながら、英語のoキーを押すと、ファイルを選択できるようになります。そこからファイルを開いても OK です。