キャラ（画像）一覧を表示したい
一覧表示するのは、どうしたらいいのかなということで、構成を聞いてみた。
・一覧の外枠（「DIV」タグ）を用意する
・枠内に画像（「IMG」タグ）を並べる
・タグに「CSS」を指定する
※UIイメージは前回内容を参照してください。
https://qiita.com/puyon/items/68286d25c475ffabd2fd
タグの構成
構成内容はこんな感じになるらしい。
※あくまで一例です。
<!--ダイアログコンテナ-->
<div id="charListArea" class="charListArea">
<!--ダイアログ-->
<dialog id="char-dlg" class="char-dlg">
<!--ダイアログ内容-->
<div class="char-dlg-content" id="char-dlg-content">
<!--キャラ一覧-->
<div id="char-list" class="char-list scroll">
<!--１つのキャラ：ここをキャラ数分増殖させる-->
<div class="char-item" item-id="chuid1">
<!--キャラの画像-->
<img class="base" src="<画像URL>" data-filename="<画像URL>" alt="">
</div>
</div>
</div>
</dialog>
</div>
タグの構成は決まったけど、見た目の情報を決める必要があるとのことで、「CSS」というのを作るらしい。
CSSを決める
CSSを決めるといっても、どうしたらいいのかわかないので、いろいろ聞きまくった。
ちなみに、CSSをタグに関連付けするのに「class」をタグとCSSに付加するらしい。
※よくわかっていないのですが、くわしい内容がMDNに載っています。
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC
スクロールできるようにしたい
今回は「縦スクロール」したいので、こんな感じにするらしい。
.charListArea .scroll { /*子孫結合子；１つ目のクラスに一致するクラスを対象にする*/
max-height: 300px;
overflow-y: auto;
}
キャラを並べる方法を指定する
.char-list { /*クラスセレクター*/
display: grid; /*内包するタグをグリッド形式で配置（並べる）*/
grid-template-columns: repeat(5, 64px); /*横方向に５個並べる*/
gap: 0px;
width: 336px;
}
キャラのサイズを指定する
.char-item {
position: relative; /*相対位置に配置*/
width: 64px;
height: 64px;
cursor: pointer;
}
CSSをブラウザに追加する
CSSを追加するのは、２通りの方法があるとのこと。
・HTMLファイル（index.html）の「head」タグに「style」タグとして追加する
・「style」要素を作成して、「head」要素へ追加する
今回は後者を採用した。
const styleTag = `作ったCSS`
const style = document.createElement("style")
style.textContent = `${styleTag}`
document.head.appendChild(style)
次は「遅延ロード」
作ったUIを実際に動作させると、１０～２０個程度なら気にならないけど、１０００個とかあると、表示の遅さが気になってくる。
理由は、IMGタグの読み込みに処理が集中するからとのこと。
解決方法として「必要になったら読み込む」処理を追加する、ということで、「IntersectionObserver」APIを利用する。