ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
JavaScriptでカルーセルを作ろう
JavaScriptを使ってカルーセルUIを作る方法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(21)
質問と回答
(90)
#01 カルーセルを作ってみよう
(02:11)
無料公開中
完成版の確認
開発環境の確認
index.htmlの作成
未完了
#02 画像を表示する領域を作ろう
(02:07)
無料公開中
表示領域の作成
style.cssの作成
outline
未完了
#03 画像を配置してみよう
(01:48)
無料公開中
画像の配置
リストのスタイリング
未完了
#04 画像を領域内に収めよう
(01:33)
無料公開中
画像の大きさ調整
親要素の高さ指定
未完了
#05 画像を横並びにしてみよう
(02:28)
無料公開中
object-fit
フレックスボックスの指定
min-width
未完了
#06 ボタンを配置してみよう
(01:57)
ボタンの配置
ボタン位置の設定
未完了
#07 ボタンのスタイルを整えよう
(02:26)
ボタンのスタイリング
ボタン位置の修正
未完了
#08 JavaScriptを書く準備をしよう
(02:04)
:hover
main.jsの作成
未完了
#09 画像を動かしてみよう
(02:21)
イベントリスナの追加
transitionの設定
未完了
#10 画像の幅を取得してみよう
(02:00)
getBoundingClientRect()
移動距離の計算
未完了
#11 画像を移動させる距離を計算しよう
(01:47)
画像cまでの移動
currentIndexの導入
未完了
#12 戻るボタンを動作させよう
(01:12)
イベントリスナの追加
transitionの設定
未完了
#13 ボタンの状態を更新しよう
(02:20)
.hidden
updateButtons()
クラスの付け替え
未完了
#14 ボタンの動作を確認しよう
(01:18)
updateButtons() の呼び出し
動作確認
未完了
#15 重複しているコードを関数にまとめよう
(01:13)
moveSlides()
動作確認
未完了
#16 画像下にボタンを配置しよう
(02:14)
buttonの配置
sectionの配置
未完了
#17 ボタンを丸くしていこう
(02:28)
buttonのスタイリング
buttonのコメント化
未完了
#18 丸いボタンを動的に生成しよう
(02:56)
setupDots()
余白の設定
未完了
#19 クリックイベントを設定しよう
(02:11)
クリックイベントの追加
currentクラスの移動
未完了
#20 currentクラスを移動させよう
(01:30)
updateDots()
動作確認
未完了
#21 カルーセルを完成させよう
(02:37)
resizeイベント
画像の変更
未完了
#02 画像を表示する領域を作ろう
outlineとborderの違いは、何でしょうか?
2023年12月22日
style.css と styles.css は同じですか?
2022年1月27日
#03 画像を配置してみよう
画像ファイルの形式と使い分けについて教えてください
2023年6月14日
「ファイルにアクセスできませんでした」と表示されます
2022年1月27日
#04 画像を領域内に収めよう
画像の「a」の文字が切れてしまいますが、なぜでしょうか?
2023年12月22日
heigt: 100% とする意味は何ですか?
2023年6月14日
高さだけが親要素の影響を受けるのはなぜですか?
2022年1月27日
#05 画像を横並びにしてみよう
ul ではなく .container に対して overflow: hidden; を指定するのはなぜですか?
2022年1月27日
背景画像の縦横比をそろえたい時は object-fit と background-size は同じ効果ですか?
2022年1月27日
#06 ボタンを配置してみよう
CSS のコメントがうまくできません
2022年8月23日
.container に position: relative; を設定する理由はなんでしょうか?
2022年1月27日
ボタンを作る時に button タグと div タグ、どちらを使えば良いですか?
2022年1月27日
#07 ボタンのスタイルを整えよう
transform: translateY(-50%); でボタンが中央に来るのはなぜですか?
2022年1月27日
#prev、#next の padding を上 0 、左右 8px 、下 4px にするのはどうしてですか?
2022年1月27日
#09 画像を動かしてみよう
ul.style.transform の仕組みを教えてください
2022年3月24日
ul.style.transform で CSS を追加しているという認識であっていますか?
2022年3月27日
画像の一部が見えなくなっているのはなぜですか?
2022年1月27日
ul を左にずらすとあるのですが li なのではないでしょうか?
2022年1月27日
li をずらすのではなく、ul をずらすというイメージが湧きません...
2022年1月27日
JavaScript でスタイルを指定するときはすべて ' ' で囲うのですか?
2022年1月27日
#10 画像の幅を取得してみよう
children は 「どのようなときに使用するのか」「使い分け」「具体的な例」を教えて下さい
2023年9月12日
getBoundingClientRect().width と clientWidth は同じですか?
2023年4月30日
バッククオートとシングルクオートの違いを教えて下さい
2022年12月5日
slidewidth をイベントリスナーの中で定義するのはなぜですか?
2022年10月28日
getBoundingClientRect() に引数が入ることはありますか?
2022年7月9日
getBoundingClientRect() に width プロパティを付けるのはなぜですか?
2022年6月3日
画像を 1 枚分スライドすると、前の画像が端の方に残ってしまいます
2022年2月18日
スライドを動かす処理はお手本と同じように書かなければいけませんか?
2022年1月27日
JavaScript がうまく動作しなくなりました
2022年1月27日
ul.children は document.querySelectorAll('li') でもよいですか?
2022年1月27日
テンプレートリテラルを使った際、シングルクォートが不要になるのはなぜですか?
2022年1月27日
テンプレートリテラルはなぜ必要なのですか?
2022年1月27日
#11 画像を移動させる距離を計算しよう
currentIndex の値が増加しても 1 つ分しか移動しないのはなぜですか?
2022年11月24日
slideWidth に currentIndex をかけるのはなぜですか?
2022年11月20日
クリックするたびに初期化され、1 枚ずつ画像が変わるという認識であっていますか?
2022年5月24日
currentIndex で画像の index が取得できるのはなぜですか?
2022年1月27日
#12 戻るボタンを動作させよう
next と prev の両方で -1 をかけている理由が理解できません
2022年6月10日
なぜ currentIndex = 2 なのに左に画像が 1 枚分しか移動しないのですか?
2022年1月27日
translateX(${-100 * currentIndex}%) として画像を移動させてもよいですか?
2022年1月27日
prev を押し続けると白紙になるのはなぜですか?
2022年1月27日
戻るボタンでも ${-1 * slideWidth * currentIndex}px) の所で -1 をかけるのはどうしてですか?
2022年1月27日
prev クリック時、translateX の値はなぜマイナスの左方向移動のままで逆の方向( b → a )に移動するのでしょうか?
2022年1月27日
currntIndex を ++ や -- するのではなくて、-1 や 1 で置き換えるとうまくいかないのですが...
2022年1月27日
#13 ボタンの状態を更新しよう
カルーセルの画像を循環させるには?
2022年8月23日
HTML ではなく CSS で hidden を設定するのはなぜですか?
2022年3月24日
なぜ 2 番目の if は else if ではないのでしょうか?
2022年1月27日
(currentIndex === slides.length - 1) の - 1 はなぜ必要なのですか?
2022年1月27日
#14 ボタンの動作を確認しよう
カルーセルを循環させるにはどうすればよいですか?
2023年2月5日
updateButtons(); はなぜ必要なのですか?
2022年4月4日
updateButtons() 内では何をしているのですか?
2022年1月27日
#15 重複しているコードを関数にまとめよう
なぜ const ではなく function でまとめるのでしょうか?
2023年9月12日
updateButton() を moveSlides() 内でまとめないのはなぜですか?
2022年1月27日
#16 画像下にボタンを配置しよう
なぜ .container に height を設定するのですか?
2022年11月20日
#17 ボタンを丸くしていこう
height も全体に関わるものなのに、移動しないのは何か理由があるでしょうか?
2022年1月27日
nav セレクタのあとにスペースが必要なのはなぜですか?
2022年1月27日
#18 丸いボタンを動的に生成しよう
nav タグも消してしまうとボタンが消えるのはなぜですか?
2023年12月22日
button が dots 配列のインデックス番号と紐づいているのはなぜでしょうか?
2023年10月26日
要素が 5 個あったとき、 3 個目だけを対象としたい場合どう指定すればいいですか?
2022年6月10日
button という定数が 3 つ存在しているように見えます
2022年6月1日
for 文の中で const を使っても値の再代入にはならないのですか?
2022年6月9日
nav に button を appendChild() したあとに button(dots[0]) に対して current クラスを追加しても反映されるのはなぜですか?
2022年5月19日
classList.add('nav .current'); としても動きません
2022年3月24日
button 要素は HTML か JavaScript どちらに記述するのがいいですか?
2022年2月18日
なぜ複数の要素を扱うときには配列を使うのでしょうか?
2022年2月10日
なぜ index.html に記述がないのにボタンが作られるのですか?
2022年1月27日
appendChild() を addendChild() とできないのはなぜですか?
2022年1月27日
margin を nav button セレクタに追加した方が分かりやすいのでは?
2022年1月27日
なぜ button + button とするのですか?
2022年1月27日
#19 クリックイベントを設定しよう
dots.forEach の時点で配列の中身は空だと思うのですが、なぜ動作するのですか?
2023年12月21日
current クラスはどこから導き出されたものなのでしょうか。
2023年6月22日
関数の最後で dots[0] に対して .current を追加しているのに for 文内のクラスが反映するのはなぜですか?
2022年11月24日
なぜ真ん中のボタンを押すと currentIndex に 1 が代入されるのですか?
2022年11月9日
button のクリックイベントに updateButtons(); を入れるのはなぜですか?
2022年11月9日
クリック時の i の値はどうやって決められているのですか?
2022年5月18日
translateX で移動する基準はどこですか?
2022年1月27日
丸いボタンをクリックすると画像が流れるのはなぜですか?
2022年1月27日
currentIndex の値がどう使われているか教えて下さい
2022年1月27日
button のクリックイベントを setupDots 関数の for 文の中で設定するのはなぜですか?
2022年1月27日
#20 currentクラスを移動させよう
updateDots 関数を setupDots 関数の前で宣言なくても良いのですか?
2023年6月22日
上から見ていくと setupDots() の下に updateDots() が書かれていますが、setupDot() の中で使用できるのはなぜでしょう?
2022年1月27日
updateDots 関数ではなぜ、button 要素が全て取得できるのですか?
2022年1月27日
#21 カルーセルを完成させよう
リサイズをすると一瞬他の画像が出てきてしまうのですが、どうすればよいでしょうか?
2023年10月15日
なぜ一枚目以外の画像には moveSlides() が必要なのですか?
2022年4月4日
ブラウザ幅を広げると、画像の上下が切れてしまいます
2022年1月27日
最後の画像の次に最初の画像がくるようにしたい
2022年1月28日
moveSlides() の中に updateButtons() や updateDots() を入れてもよいのですか?
2022年1月27日
() 内の文字をシングルクォーテーションで囲むときと囲まないときがあるのはなぜですか?
2022年1月27日
「画像が中途半端な位置にきてしまう」ことが起こりませんが、どういうことですか?
2022年1月27日
このコードをクラス処理にしたらどうなりますか?
2022年1月27日
リサイズ中に隣の画像が表示されてしまいます
2022年1月27日
リリース情報(note)
『JavaScriptでカルーセルを作ろう』をリリースしました。
詳細情報
最終更新日
2021年7月21日
バージョン情報
Chrome 91 / Visual Studio Code 1.58.1