ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
JavaScriptでスライドショーを作ろう
シンプルなスライドショーを作りながら、JavaScriptの実践的な書き方について学んでいきます。
0%
動画レッスン一覧
(16)
質問と回答
(2)
未完了
#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)
これまでのまとめ
アプリ開発の振り返り
#14 nextボタンの処理を完成させよう
thumbnails 配列に forEach を使っても良いですか?
2023年2月22日
#16 完成したアプリを振り返ろう
ループ処理を用いて端的に書く方法を教えてください
2023年4月12日
ギャラリー
このレッスンについて
最終更新日
2023年1月10日
バージョン情報
Chrome 108 / Visual Studio Code 1.74.2
関連キーワード
(6)
基礎講座
(368)
初心者向け
(367)
HTML
(115)
CSS
(116)
JavaScript
(147)
ミニプログラム
(142)
このレッスンを共有する