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