やあ、こんにちは！CSSの世界へようこそ。
日々、コードと向き合って「なんで思った通りに動かないんだろう……」と頭を抱えていませんか？大丈夫、その悩みはあなたが成長している証拠です。かつての私も、同じように真っ白な画面と格闘していました。
今日は、最近のCSS界隈で「これ、地味だけど本当にいい仕事するんだよね」とプロたちの間で重宝されている、`:modal`（モーダル）疑似クラスについてお話ししましょう。
難しそうな名前ですが、中身はとっても人間味があって温かい仕組みなんですよ。一緒にゆっくり紐解いていきましょう。
—
1. 「特別な時間」を知らせる魔法の合図
想像してみてください。あなたは今、お気に入りの洋服屋さんで試着をしようとしています。
お店の中を歩き回っているときは「普通の状態」ですが、試着室に入ってカーテンを閉めた瞬間、あなただけの「特別な空間」が生まれますよね。外のざわめきは少し遠のき、鏡の中の自分に集中する……。
Webサイトにおける「モーダル」も、これと全く同じです。
画面全体が少し暗くなって、真ん中にポンと大事なメッセージや入力フォームが出てくる。あの「今はこれに集中してね！」という状態がモーダルです。
そして、この「今、まさに試着室（モーダル）の中にいますよ！」という状態をCSSでキャッチするための合図が、今回紹介する `:modal` なんです。
—
2. なぜ `:modal` が必要なの？
これまでは、JavaScriptを使って「今モーダルが開いています」という印（クラス名など）を無理やり付けて、CSSで色を変えたりしていました。
でも、HTMLの`
`:modal` を使うと、わざわざJavaScriptでクラスを付け外ししなくても、「モーダルとして開いている時だけ、このデザインにして！」とスマートに指示が出せるようになります。
—
3. 実際に書いてみよう！
では、実際に動くコードを見てみましょう。
HTMLで`
いらっしゃいませ！
ここは特別な試着室です。外の世界からは少し遮断されています。
/ CSS: ここからが魔法の時間です /
/ 1. 通常時のダイアログ（影も形もない状態） /
dialog {
border: none;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 300px;
}
/ 2. 【ここが主役！】モーダルとして開かれた時だけのスタイル /
dialog:modal {
border: 5px solid #ff6b6b; / 特別な状態なので、赤い枠線をつけてみましょう /
animation: slideIn 0.3s ease-out; / ふわっと表示させるアニメーション /
background-color: #fff9f9;
}
/ 3. モーダルの後ろ側の背景（オーバーレイ）も一緒に制御できます /
/ ::backdrop は :modal とセットでよく使われる相棒です /
dialog:modal::backdrop {
background-color: rgba(0, 0, 0, 0.6); / 背景を暗くして、試着室に集中させる /
backdrop-filter: blur(5px); / 背景を少しぼかすとおしゃれになります /
}
/ ふわっと出すためのアニメーション設定 /
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// JavaScript: 扉を開ける「鍵」の役割です
const dialog = document.getElementById(‘myDialog’);
const openBtn = document.getElementById(‘openBtn’);
const closeBtn = document.getElementById(‘closeBtn’);
// showModal() を使うのがポイント！
// これを使うことで、CSSの :modal が反応してくれるようになります。
openBtn.addEventListener(‘click’, () => {
dialog.showModal();
});
closeBtn.addEventListener(‘click’, () => {
dialog.close();
});
—
4. つまずきやすい「大事なポイント」
ここで、初心者の方が「あれ？」となりやすいポイントを一つだけお伝えしておきますね。
`
`:modal` 疑似クラスが反応するのは、2番目の `showModal()` で開いた時だけなんです。
1番の `show()` で開くと、それは「ただそこに置いてある看板」のようなもので、周りのボタンも押せてしまいます。一方で `showModal()` は「専用の試着室」。周りを暗くして、その中しか操作できないようにしてくれます。
「CSSが効かないな？」と思ったら、JavaScriptの書き方を確認してみてくださいね。大丈夫、ひとつずつ確認すれば必ず解決します。
—
5. 最後に：CSSは「おもてなし」の心
`:modal` を使って背景を暗くしたり、枠線を変えたりするのは、サイトを訪れてくれた人に対して「今はここに注目してくださいね」という優しさを形にする作業です。
難しい専門用語に囲まれると、つい「正解」を探して苦しくなってしまいますが、CSSの本質は「見てくれる人が迷わないように整えること」。
この `:modal` という新しい道具を味方につけて、あなたのサイトをもっと使いやすく、心地よい場所にしていってください。
もし失敗しても、ブラウザが壊れることはありません。何度でも書き直して、あなたの理想の「試着室」を作ってみてください。応援していますよ！
コメント