ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
JavaScriptでアコーディオンUIを作ろう
JavaScriptを使ってアコーディオンUIを作る方法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(9)
質問と回答
(32)
#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クラスの削除
未完了
#03 説明リストでマークアップしてみよう
dl 要素の中に div 要素を使ってもよいですか?
2023年3月29日
#04 要素のスタイルを整えよう
なぜ dl > div { ... } とするのですか?
2022年1月27日
dt タグの margin をリセットしないのはなぜですか?
2022年1月27日
h1 の margin-bottom を消しても見た目が変わらないのはなぜですか?
2022年1月27日
#05 先頭にQとAをつけよう
Q や A を擬似要素で構成するのはなぜですか?
2024年9月7日
#06 右端に「+」マークをつけよう
Flexbox と postion の使い分けを教えてください
2024年8月20日
なぜ dt に position: relative; をつけるのですか?
2022年2月4日
top: 8px を設定しなくても自動で 8px になっているのにわざわざ設定したのにはどんな意図があるのですか?
2022年1月27日
#07 クリックイベントを設定しよう
記載順に反して display: block; が優先されるのはなぜですか?
2024年9月24日
要素をクリックした時、どの処理から行われますか?
2024年10月14日
addEventListener のイベントを forEach より先に書くと動作しないのはなぜですか?
2023年6月22日
なぜ dt.parentNode のように間接的に指定するのですか?
2022年11月20日
複数の dt の中から、特定の dt を取得する方法を教えてください
2022年9月24日
forEach() を使うのはなぜですか?
2022年5月19日
dl > div.appear dd {} で、クラス名を記載する場所は末尾だと思っていたのですが...
2022年1月27日
HTML 側で div にクラスを指定する必要はないのですか?
2022年1月27日
dd の親要素にクラスをつけ外しするのはなぜですか?
2022年1月27日
dd がクリックされたあとに display: block; とするのはなぜですか?
2022年1月27日
display:block をコメントにしても dd が展開されないのはなぜでしょうか?
2022年1月27日
dl > div の部分を dt.parentNode.appear dd と書いてもいいのですか?
2022年1月27日
#08 アニメーションをつけよう
100%の時に transform: none; と指定する必要はありますか?
2023年8月18日
transition: transform 0.3s; を dl > div.appear dt::after に書いてもいいですか?
2022年7月9日
animation-name の指定がないのはなぜですか?
2022年3月24日
transition でアニメーションできないのはなぜですか?
2022年1月27日
display:none には animation をつけられないのですか?
2022年1月27日
@keyframes の 2 個目を書いたら赤の波線が出ますが、何が原因ですか?
2022年1月27日
#09 ひとつ開いたら他を閉じる実装をしよう
なぜ el と dt が区別されるのですか?
2024年9月7日
なぜ dt はクリックした状態、 el はクリックされてないときの状態とわかるのでしょうか?
2022年9月29日
toggle ではなく add で実装するにはどうしたらいいですか?
2022年2月21日
dl.parentNode.classList.remove('appear'); ではないのはなぜですか?
2022年1月27日
なぜ el と dt を区別できるのですか?
2022年1月27日
toggle での開閉がうまくいきません
2022年1月27日
次におすすめのレッスン
JavaScriptでタブメニューを作ろう
(全10回)
PREMIUM
PREMIUM
0%
リリース情報(note)
『JavaScriptでアコーディオンUIを作ろう』をリリースしました。
詳細情報
最終更新日
2021年4月27日
バージョン情報
Chrome 88 / Visual Studio Code 1.53.2