ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/04/21
NEW
『CSS入門 グリッドレイアウト編』をリリースしました
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】JavaScriptでスライドショーを作ろう
JavaScriptでスライドショーを作る方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでスライドショーを作ろう
シンプルなスライドショーを作りながら、JavaScriptの実践的な書き方について学んでいきます。
0%
動画レッスン一覧
(14)
#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()
未完了
リリース情報(note)
ES2017に対応した『JavaScriptでスライドショーを作ろう』をリリースしました
詳細情報
最終更新日
2019年4月9日
バージョン情報
JavaScript (ES2017)