<img>

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

<div>

<div class="slideshow-container">
  <img
    class="slide active"
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/de59dac0-bcd8-40df-895c-b5c9617dcdb2.jpg"
  />
  <img
    class="slide"
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/b350fcf5-4058-4123-994d-ce805aa6c3b5.jpg"
  />
  <img
    class="slide"
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ac3c5def-8309-4f25-9d35-1e7dd4577fd4.jpg"
  />
</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を活用してスライドショーの基盤を構築、自動で切り替わるスライドショー機能を実装し、さらにボタンを使ったスライドショーの制御方法を学びます。
効果的なビジュアルプレゼンテーションの技術を習得できます。

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

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