<img>

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

<div>

position: fixed

left

width

height

background-color

grid

place-items

ロード画面の配置とスタイルの設定

opacity

visibility

transition

表示・非表示をアニメーションさせるスタイルの設定

document.getElementById()

DOMContentLoaded

element.classList.remove()

setTimeout/clearTimeout

ロード画面を閉じる機能の実装

transform

ロゴをアニメーションさせるスタイルの設定

このレッスンでは、HTMLでローディング画面の配置し、CSSを使ってアニメーションスタイルを設定します。
ロード画面の表示・非表示のアニメーション効果と、ロード中のロゴアニメーションの作成方法を学びます。

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

JavaScript DOM操作コース

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

「ローディングアニメーション」レッスンの総復習クイズです。

ローディングアニメーションの総復習クイズ

ローディングアニメーション

ローディングアニメーション

チュートリアル