このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 アコーディオンUIを作ってみよう (02:32) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 detailsタグを使ってみよう (02:20) 無料公開中
- details
- summary
- open属性
-
#03 説明リストでマークアップしてみよう (02:42)
- dl
- dt
- dd
- styles.cssの作成
-
#04 要素のスタイルを整えよう (02:52)
- h1のスタイリング
- dl、dt、 ddのスタイリング
- divのスタイリング
-
#05 先頭にQとAをつけよう (02:23)
- ::before疑似要素
- cursor: pointer
- user-select: none
-
#06 右端に「+」マークをつけよう (02:27)
- ::after疑似要素
- 絶対配置
- main.jsの作成
-
#07 クリックイベントを設定しよう (02:48)
- クリックイベントの実装
- dd要素の表示/非表示
- 「+」マークの変形
-
#08 アニメーションをつけよう (02:14)
- transition
- animation
- @keyframes
-
#09 ひとつ開いたら他を閉じる実装をしよう (02:15)
- dt要素の調査
- appearクラスの削除
