エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS】主要ブラウザに対応した疑似クラス :modalを使って、モーダルを作ってみる! - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS】主要ブラウザに対応した疑似クラス :modalを使って、モーダルを作ってみる! - Qiita
はじめに みなさんは、:modalという疑似クラスをご存知でしょうか? 実は、先日Chrome 105とEgde 105が... はじめに みなさんは、:modalという疑似クラスをご存知でしょうか? 実は、先日Chrome 105とEgde 105がリリースされ、コンテナクエリ@containerと疑似クラス:has()と一緒に疑似クラス:modalもサポートされました。 なので今回は、:modalの具体的な内容の紹介と:modalを使った実装方法の解説を行います。 疑似クラス :modal とは? 疑似クラス :modalは以下の状態の要素のスタイルを変更することができます。 ・ JavaScriptの showModal()によって、表示された要素 ・ JavaScriptのrequestFullscreen()によって、全画面表示された要素 これら状態で、疑似クラス :modalで指定したスタイルを当てることができます。 具体的に、それぞれの状態を解説していきます! JavaScriptの showModal