【入門編】 :defined擬似クラス – CSS実践ガイド

` や `` など）と、自分で名前をつけて作り出す「カスタム要素（Web Components）」というものがあります。

ここで、こんなシチュエーションを想像してみてください。

あなたは大きなお祭りの会場にいます。そこに「救護テント」が設置されました。
でも、お祭りが始まってすぐの頃は、まだ看板も出ていないし、中にお医者さんがスタンバイしているかどうかわかりませんよね。「今、ここに入っていいのかな…？」と不安になります。

しばらくして、準備が整い、看板が掲げられ、お医者さんが席に着いたとします。これで「よし、ここはちゃんとお医者さんがいる（定義された）救護テントだ！」と安心して駆け込むことができますよね。

この `:defined` 擬似クラスは、まさにこの状態を見分けるためのものです。
「今そこにあるカスタム要素が、ちゃんとプログラムとして読み込まれて、使える状態（定義済み）になっているか？」を判断してくれます。

—

2. つまずきがちなポイント：「あれ？カスタム要素がバグる…？」

Web制作に少し慣れてくると、自分でオリジナルのタグ（例えば `` など）を作りたくなりますよね。

しかし、ここで一つの「落とし穴」があります。
HTMLに `` と書いたものの、それを動かすためのJavaScript（定義ファイル）の読み込みが遅れてしまったり、エラーで読み込めなかったりすると、ブラウザから見るとそのタグは「ただの正体不明の文字の塊」になってしまいます。

JavaScriptが読み込まれる前の、いわゆる「準備中」のわずかな時間に、ブラウザが素のままで表示してしまい、ページがガタッと崩れたり、変な見た目になってドキッとした経験はありませんか？

「あぁ、JavaScriptの読み込み待ちのせいで、スタイルが崩れてる……どうしよう！」

そんなとき、そっとあなたを助けてくれるのが `:defined` なのです。

—

3. コードで見てみよう：実用的な使い方

百聞は一見にしかず。実際のコードを見てみましょう。
ここでは、自分で作った特別なボタン `` を例にします。

すごいボタン

コードの解説

1. `fancy-button:not(:defined)`
「もし、`` がまだ定義されていない（not）なら……」という意味になります。ここでは、読み込みのタイムラグでユーザーが変なボタンを押してしまわないように、半透明にしてクリックもできないように優しくガードしています。
2. `fancy-button:defined`
「準備完了！JavaScriptの定義が読み込まれました！」という状態です。ここでは私たちが本来見せたかった、ピカピカの美しいスタイルを適用しています。

ちなみに、もう一つ知っておいてほしい大切な事実があります。
それは、`

` や `

` といった最初から用意されている標準のHTML要素は、最初から「定義済み（defined）」の状態として扱われます。そのため、標準要素に対して `:defined` を書いても常にマッチしますが、基本的にはこの「カスタム要素の読み込み待ち・チラつき防止」の文脈で使うのが現場のスタンダードです。

—

まとめ：焦らなくて大丈夫、一歩ずつ進みましょう

今日お話しした `:defined` は、Web Componentsという少し高度な技術で真価を発揮するセレクタなので、毎日のコーディングで絶対に欠かせないというわけではありません。

でも、「JavaScriptの読み込み待ちによる表示の崩れ（FOUC：Flash of Unstyled Content と呼ばれたりもします）をキレイにコントロールしたいな」と思ったとき、この `:defined` の存在を思い出してもらえたら、あなたの引き出しは確実に一つ深くなります。

CSSの世界は広く、覚えることもたくさんあって途方に暮れることもあるかもしれませんが、こうして一つひとつの意味を紐解いていけば、必ず自分の力になります。

今日覚えた `:defined`、ぜひ頭の片隅に置いてあげてくださいね。それでは、また次回のCSSの旅でお会いしましょう！