新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 スライドショーを作ってみよう (02:51) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面を作っていこう (02:37) 無料公開中
- mainのマークアップ
- navのマークアップ
-
#03 全体のスタイルを整えよう (02:52) 無料公開中
- .thumbnailsのマークアップ
- .containerのスタイリング
-
#04 余計なスタイルをリセットしよう (02:54)
- 画像のスタイリング
- navのスタイリング
- vertical-alignプロパティ
-
#05 ナビゲーションのスタイルを整えよう (03:00)
- navのスタイリング
- Flexbox
-
#06 サムネイルのスタイルを整えよう (02:59)
- .thumbnailsのスタイリング
- CSS Grid
-
#07 JavaScriptでメイン画像を表示しよう (03:00)
- メイン画像の表示
- srcプロパティ
-
#08 サムネイルを表示しよう (02:56)
- サムネイル画像の表示
- forEach()
- currentクラスの設定
-
#09 メインの画像を切り替えよう (02:36)
- メイン画像の差し替え
- リファクタリング
-
#10 currentクラスを移動させよう (02:39)
- currentクラスの付け替え
- querySelectorAll()
-
#11 ｢次へ｣ボタンを動作させよう (02:54)
- ｢次へ｣ボタンの実装
- メイン画像の差し替え
- currentクラスの付け替え
-
#12 ｢前へ｣とPlayボタンを動作させよう (03:00)
- ｢前へ｣ボタンとPlayボタンの実装
- clickイベントの設定
- setTimeout()
-
#13 Pauseボタンを実装しよう (02:00)
- Pauseボタンのマークアップ
- Pauseボタンのスタイリング
- clearTimeout()
-
#14 Pauseボタンを動作させよう (01:49)
- Pauseボタンの実装
- clickイベントの設定
- clearTimeout()
