モーダル（アニメーションなし・あり）
dialogタグを使用したモーダルウィンドウの作成。
htmlファイル内、dialogタグで囲った部分をJavascriptではshowModal()表示、close()で非表示できる優れもの。
dialogタグを使用するとウィンドウを開いた状態でESCキーを押すとウィンドウが閉じる機能が標準搭載されている。
dialog にはaria-labelを使用してアクセシブルな名前をつけなければならない。
モーダルウィンドウの背景はcssファイル内で「クラス名::backdrop」で指定可能。
表示されるモーダルウィンドウは黒枠で囲われるため、この黒枠が不必要な場合はcssでdialog（クラス名）にborder: none; をいれる。
ハンバーガーメニュー（アニメーションなし・あり）
dialog タグを使用したハンバーガーメニューを作成。
（dialog）クラス名::dropback はdisplay:noneと設定してしまい、dialogタグで表示するメニューパネル自体に装飾してしまうととても楽にできる。
jsで
document.documentElement.style.overflow = "hidden"上記コードを入力し背景固定を念の為入れていたが、overflowだけだとiPhoneのSafariで固定されない。一時期されていた時期もあったが、またされなくなったりと不安定でらしい。
iPhoneのSafariの固定は捨てるか、しっかり対応するならここを参考にする。
背景固定の方法
https://ics.media/entry/221024/
タブメニュー
htmlファイル：
タブに相当する部分はは<ul><li>内に、紐づくテキストはコンテナーを作成してまとめて後に書く。data-○○○=”▲▲▲”でjs内でタブとコンテナーを紐付けして表示させる。
cssファイル：
テキストを内包したコンテナーはdisplay:noneで読み込まない状態に。is-openなどのクラスがついたものだけdisplay:block; の形にして表示させるようにする。
jsファイル：
querySelectorAllで必要な要素を全て取得。forEachで繰り返しの指定をし、イベントが発生したらクラス名を加えたり（add()）、外したり（remove()）することで表示・非表示を操作する。
