JavaScript で検索した結果 - プログラミングならドットインストール

必要な部品をHTMLでマークアップしていきます。

画像やボタンのサイズについて図で解説したあとに、画像のサイズだけ HTML で直接指定していきます。

CSSファイルを作ったあとに、main要素のスタイルを整えていきます。

img要素の余白を修正したあと、ボタンとサムネイル画像を横並びにしていきます。

ボタンにデフォルトで設定されているスタイルをリセットしたあとに、スタイルを整えていきます。

サムネイル画像のスタイルを整えていきます。

サムネイル画像をクリックしたときに、メインの画像が切り替わるようにしていきます。

サムネイル画像の切り替えがわかりやすくなるように、active クラスをつけ外ししていきます。

nextボタンを押したときの処理を実装していきます。

nextボタンを押したときの処理を完成させていきます。

ドットインストール - 3分動画でマスターできるプログラミング学習サービス