2023年8月28日HTML,CSS,JavaScript<dialog> 要素が主要なブラウザすべてに実装され、現実的に使えるようになってきましたが、これをそのまま実際の Web アプリで使うには様々なものが足りません。足りないものを自分で実装していくと、分かりづらい挙動があったり、癖のある実装が必要なことがあります。例えば、<dialog> 要素のデフォルトは中央揃えで、コンテンツに合わせたサイズになりますが、これの位置、サイズ調整やアニメーションをする際に落とし穴があります。 本記事では、以下のアクションシートのようなモーダルを実装する例を通して、<dialog> 要素を使う時の3つの落とし穴を紹介します。 デフォルトのスタイルが分かりづらい #<dialog> 要素にはデフォルトでいくつかのスタイルが設定されていますが、これまでの HTML 要素のデフォルトスタイルと比べると値が特
![アクションシートの実装から学ぶ <dialog> 要素を使う時の3つの落とし穴 - Katashin .info](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4123dc8a3cfce9a394071143aac0655281a824c/height=288;version=1;width=512/https%3A%2F%2Fkatashin.info%2Fimg%2Flogo.png)