1日1UI投稿！
2日空いてしまいましたが、UI投稿します！
アコーディオンUI
本日はアコーディオンUIを作成しました。
See the Pen アコーディオンUI by ri-tama (@ri-tama) on CodePen.
書き始めたはいいものの、わからんことばっかでした。。
結局不明部分は参考にしたサイトのを参考にして補完しました。
千里の道も一歩から。
塵も積もれば山となる。
という感じでしょうか。。
不明部分を自分で書き出して、説明していくパート！
dl dt ddについて
初見のタグ群です。
簡単に言ってしまえば
・説明するリストだよ！
・説明する言葉！
・説明する言葉の説明だよ！
という感じです。覚えておきましょう。
user-select :none;
dt{
padding:8px;
cursor:pointer;
user-select: none;
position:relative;
}
これも初見の言葉でした。
簡単に言えば、選択できんぞ！コピーさせんぞ！
というおまじないです。覚えておきましょう。
beforeとafter
dt::before{
content:'Q.';
}
dt::after{
content:'+';
position:absolute;
top:8px;
right:16px;
transition:transform 0.3s;
}
タグ::before
もしくは
タグ::after
そして中身にcontent:'';
タグの文字列の前か後にcontentの中身を付けるおまじないです。
外部に委託しといて、変更をかけやすくする感じでしょうか。
parentNode
dts.forEach(dt=>{
dt.addEventListener('click',()=>{
dt.parentNode.classList.toggle('appear');
});
});
これも初見の言葉でした。
parentNodeはタグの親クラスを示しております。
ですのでdtの親クラスであるdivを指しており
appearをその親クラスに付け外しする処理という処理でした。
明日も投稿できるように、午後からも頑張ります！
読んでいただきありがとうございました！
作成参考↓