【入門編】 :defined 定義済み疑似クラス – CSS実践ガイド

やあ、こんにちは！フロントエンドの世界へようこそ。
日々コードと格闘している君の努力、私は本当によく知っていますよ。

今日は、少しだけ「未来のCSS」の話をしましょう。
「Web Components（ウェブ・コンポーネント）」や「カスタム要素」という言葉、聞いたことはありますか？ 難しそうに聞こえるかもしれませんが、実はこれ、自分専用のオリジナルなHTMLタグ（例えば `` とか `` とか！）を作れる魔法のような技術なんです。

でも、この魔法にはちょっとした「困りごと」があります。その困りごとを優しく解決してくれるヒーロー、それが今回紹介する `:defined`（ディファインド）疑似クラス です。

現場で役立つ、泥臭くも愛おしいこのセレクタの使い方を、一緒に紐解いていきましょう。

—

1. 魔法が届くまでの「空白の時間」

想像してみてください。あなたはネットでおしゃれなソファを注文しました。
注文したその瞬間、部屋にソファが「ボフッ！」と現れたら最高ですが、現実はそうはいきませんよね。

1. まず、空っぽの大きな「ダンボール箱」が届く。
2. 中から説明書を取り出して、組み立てる。
3. ようやく素敵な「ソファ」として座れるようになる。

Web Componentsもこれと同じなんです。
ブラウザがHTMLを読み込んだ瞬間は、まだ `` というタグはただの「名前が書いてあるだけの空箱」です。その後、JavaScriptという「説明書」が読み込まれて初めて、中身が詰まった便利な部品として動き出します。

この、「箱はあるけど、中身（定義）がまだ届いていない状態」と「組み立てが終わって、中身が完成した状態」を見分けるのが、`:defined` の役割なんです。

—

2. なぜ `:defined` が必要なの？

もし `:defined` を使わなかったらどうなるでしょう？

JavaScriptの読み込みが少し遅れたとき、画面には「スタイルが当たっていない、中途半端な文字の塊」が一瞬だけ表示されてしまいます。そしてJSが読み込まれた瞬間に、ガクンッ！とレイアウトが動いて完成形に変わる……。

これ、ユーザーからすると「壊れてるのかな？」と不安になりますし、プロの仕事としては少し格好悪いですよね。

そこで `:defined` を使って、「まだ組み立て中なら隠しておいて、完成したらふわっと出す」というおもてなしをしてあげるんです。

—

3. 実際にコードを書いてみよう

では、具体的な書き方を見てみましょう。
ここでは `` というオリジナルのタグを作ると仮定します。

/ — CSSの魔法 — /

/ 1. まだ「定義されていない」状態（組み立て前） /
hello-world:not(:defined) {
/
完全に消してしまう（display: none）と、
後で現れたときに周りの要素が動いてしまうので、
透明にして「場所だけ確保」しておくのが現場のテクニックです。
/
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/ 2. 「定義された」状態（組み立て完了！） /
hello-world:defined {
/
JavaScriptが読み込まれて、ブラウザが「あ、これ知ってる！」
となった瞬間に、ふわっと表示させます。
/
opacity: 1;
}

このコードで何が起きているの？

• `:not(:defined)` : 「まだ定義されていないなら」という意味です。JSが読み込まれるまでの間、要素を透明にしておきます。
• `:defined` : 「定義が完了したなら」という意味です。準備が整った瞬間に、スタイルを適用します。

これで、あの「ガクガクした表示の崩れ」を防ぐことができるんです。

—

4. 実務で「なるほど！」と言わせる応用例

初学者のうちは「隠す」だけで十分ですが、少し慣れてきたら、「待っている間、スケルトン（骨組み）を表示する」という技にも挑戦してみましょう。

お買い物サイトで、商品画像が出る前に「グレーの四角い枠」がうっすら光っているのを見たことがありませんか？ それも `:defined` で作れます。

/ カスタム要素「my-profile-card」が準備中のとき /
my-profile-card:not(:defined) {
display: block;
width: 300px;
height: 150px;
background-color: #eee; / 薄いグレーの背景 /
position: relative;
overflow: hidden;
}

/ 準備中のときだけ、キラキラしたアニメーションを流す /
my-profile-card:not(:defined)::before {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
animation: loading 1.5s infinite;
}

@keyframes loading {
100% { left: 100%; }
}

/ 定義が終わったら、グレーの背景やアニメーションは不要！ /
my-profile-card:defined {
background-color: transparent;
}

こうすることで、ユーザーは「あ、今読み込んでるんだな」と直感的に理解できます。これが「使いやすさ」への第一歩です。

—

5. つまずきやすいポイントへのフォロー

「先生、`:defined` を書いたのにうまく動きません！」
そんなときは、以下の2点をチェックしてみてください。大丈夫、焦らなくていいですよ。

1. JavaScriptでちゃんと登録してる？
CSS側でいくら `:defined` を用意しても、JavaScript側で `customElements.define(‘hello-world’, …)` という登録が行われない限り、その要素は永遠に「未定義」のままです。
2. 標準のHTMLタグには効かない？
実は `:defined` は、`