<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

<div>

スライドを表示するHTMLの実装

width

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

display: block

display: none

特定の画像を表示するスタイルの追加

document.getElementsByClassName()

element.classList.add()

element.classList.remove()

関数(JavaScript)

if文

配列操作/length

setTimeout/clearTimeout

インクリメント演算子

画像を2秒ごとに切り替える関数の実装

<button>

idセレクタ

height

ボタンでスライドショーを停止・再開するHTMLの実装

document.addEventListener()

document.getElementById()

ボタンでスライドショーを停止・再開する機能の実装

このレッスンでは、HTMLとCSSを活用してスライドショーの基盤を構築、自動で切り替わるスライドショー機能を実装し、さらにボタンを使ったスライドショーの制御方法を学びます。
効果的なビジュアルプレゼンテーションの技術を習得できます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「スライドショーを作ろう」レッスンの総復習クイズです。

```javascript
function triple(num){
  console.log($(1) * 3);
}
triple($(2)) //実装結果 30
```

スライドショーを作ろうの総復習クイズ

スライドショーを作ろう

スライドショーを作ろう

チュートリアル