このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 macOSで作業用フォルダを設定しよう (02:28) 無料公開中
- 完成版の確認
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#02 Windowsで作業用フォルダを設定しよう (01:47) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#03 HTMLファイルを作成しよう (01:28) 無料公開中
- index.htmlの作成
-
#04 HTMLのマークアップをしよう (02:31) 無料公開中
- index.htmlのマークアップ
-
#05 画像やボタンのサイズを確認しよう (02:42)
- 画像やボタンのサイズを確認
- HTMLで画像サイズの指定
-
#06 CSSでスタイリングをしよう (02:04)
- style.cssの作成
- 文字コードの指定
- mainのスタイリング
-
#07 全体のスタイルを整えよう (02:44)
- vertical-align
- フレックスボックス
- gap
-
#08 ボタンのスタイルを整えよう (02:15)
- スタイルのリセット
- ボタンのスタイリング
- box-sizing
- cursor
-
#09 サムネイル画像のスタイルを整えよう (02:40)
- .thumbnail
- cursor
- opacity
- .active
-
#10 JavaScriptの実装をはじめよう (02:24)
- main.jsの作成
- querySelectorAll()
- addEventListener()
-
#11 メインの画像を切り替えよう (02:10)
- getElementById()
- src属性
-
#12 クラスをつけ外ししていこう (02:28)
- classList.add()
- classList.remove()
-
#13 nextボタンの処理を実装しよう (02:31)
- activeIndex変数の用意
- 画像の切り替え
-
#14 nextボタンの処理を完成させよう (02:32)
- 条件分岐
- activeクラスのつけ外し
-
#15 prevボタンの処理を実装しよう (02:40)
- 条件分岐
- 画像の切り替え
- activeクラスのつけ外し
-
#16 完成したアプリを振り返ろう (02:09)
- これまでのまとめ
- アプリ開発の振り返り
