ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2026/05/28
NEW
【週刊ドットインストール】 AI関連レッスン、第四弾を準備中
862
レッスン
864
質問と回答
0
文字起こし
0
ソースコード
244
件のレッスンと
618
件のレッスン動画が見つかりました。
#02 画像を表示する領域を作ろう
JavaScriptでカルーセルを作ろう
カルーセルで画像を表示するための領域を作ったのち、スタイリングをしていきます。
#03 画像を配置してみよう
JavaScriptでカルーセルを作ろう
リストのタグを使ってカルーセルで使う画像を配置していきます。
#04 画像を領域内に収めよう
JavaScriptでカルーセルを作ろう
画像がカルーセルの領域に収まるように修正していきます。
#05 画像を横並びにしてみよう
JavaScriptでカルーセルを作ろう
object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。
#06 ボタンを配置してみよう
JavaScriptでカルーセルを作ろう
画像をスライドさせるためのボタンを配置していきます。
#07 ボタンのスタイルを整えよう
JavaScriptでカルーセルを作ろう
ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。
#09 画像を動かしてみよう
JavaScriptでカルーセルを作ろう
ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。
#10 画像の幅を取得してみよう
JavaScriptでカルーセルを作ろう
画像が1枚分だけ横にスライドするように修正していきます。
#11 画像を移動させる距離を計算しよう
JavaScriptでカルーセルを作ろう
何番目のスライドを表示したいかを変数で管理していきます。
#12 戻るボタンを動作させよう
JavaScriptでカルーセルを作ろう
ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。
前へ
45
46
47
48
49
50
51
52
53
54
55
次へ