-
#01 おみくじを作ってみよう (02:43)
- 完成版の確認
- 作業用フォルダの設定
- index.htmlの作成
-
#02 HTMLのマークアップをしよう (01:36)
- index.htmlのマークアップ
- 要素の確認
-
#03 画面のスタイルを整えよう (02:58)
- 文字コードの指定
- style.cssの作成
- mainのスタイリング
- sectionのスタイリング
-
#04 テキストのスタイルを整えよう (02:26)
- スタイルのリセット
- 余白の設定
- テキストのスタイリング
-
#05 ボタンのスタイルを整えよう (02:22)
- スタイルのリセット
- ボタンのスタイリング
-
#06 ボタンに影をつけてみよう (02:10)
- cursor
- button:hover
- box-shadow
-
#07 ボタンを押し込んでみよう (01:59)
- button:active
- box-shadow
- transform
-
#08 クリックイベントを設定しよう (02:57)
- main.jsの作成
- getElementById()
- addEventListener()
- textContent
-
#09 ランダムな整数値を生成しよう (02:46)
- ランダムな整数値の生成方法
- Math.random()
- Math.floor()
-
#10 ランダムな整数値を表示してみよう (01:27)
- 0,1,2のランダムな整数値の生成
- 動作確認
-
#11 おみくじを表示してみよう (01:53)
- switch文を使った条件分岐
- 動作確認
-
#12 配列を使ってみよう (02:45)
- 配列の利用
- length
- まとめ
#01 おみくじを作ってみよう
2022年10月25日
補足情報 lang の横が ja にならない場合
『html:5』と打ち込んだあとの雛形で、 lang の横が en になっていない場合、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
- macOSの場合: #08 VS Codeエディタの設定をしていこう
- Windows の場合: #08 VS Codeエディタの設定をしていこう
2022年10月25日
補足情報 ブラウザにドラッグ&ドロップしてもうまくいかない場合
ブラウザにドラッグ&ドロップしてもページが上手く表示されない場合は、以下の方法を試してみましょう。
- Chrome ブラウザを一度クリック
- Windows だったら Ctrl キーを押しながら英語の O キー、macOS だったら Command キーを押しながら英語の O キーを押す
- ファイルを選択する画面が出てくる
- Desktop にある MyOmikuji フォルダの中の index.html ファイルを選択して開く
補足情報 タブの横に × 印ではなくて丸印が付いている場合
タブの横に × 印ではなくて丸印が付いている場合は、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。