こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSの世界へようこそ！ 日々、レイアウトや色調整に悪戦苦闘していませんか？「あっちを直せばこっちが崩れ……」なんて、CSSあるあるですよね。でも大丈夫、安心してください。今日は、そんなCSSのちょっとディープで、でも知っていると「おっ」と周りに自慢できる面白い機能のお話をします。
テーマは`::spelling-error` 擬似要素です。
「なんだか呪文みたいで難しそう……」と思いました？ 大丈夫です！ 身近な例えを交えて、ふんわり優しく紐解いていきますので、肩の力を抜いてコーヒーでも飲みながら読んでいってくださいね。
—
そもそも「スペルミス表示」ってなに？
皆さんは普段、スマホやパソコンで文字を入力していて、赤い波線がニュニョ〜ンと現れた経験はありませんか？ 「あ、ここ漢字間違えてる！」とか「英語のスペルが違うよ」って、ブラウザやOSがそっと教えてくれる、あの親切な機能のアレです。
実は現代のWebブラウザは、「ここ、スペルミスっぽくない？」と判定したテキストに対して、こっそり特別な印をつけてくれています。
そして、その「ブラウザが見つけたスペルミスの部分」を、私たちフロントエンドの人間がCSSで自由におめかししちゃおう！ というのが、今回ご紹介する `::spelling-error` 擬似要素なんです。
身近な例え：先生の赤ペンチェック
学校のテストを思い出してみてください。
あなたが答案用紙に「きょうは、てんきがいい。」と書いたとします。そこへ国語の先生がやってきて、間違えているところに「サーッ」と赤いペンで下線を引いてくれましたよね。
あの「先生の赤ペン」を、Webサイト上でもCSSを使って自分の好きな色やデザインに変えられたら……？ 想像しただけでちょっとワクワクしませんか？
—
`::spelling-error` ってどうやって使うの？
使い方はとってもシンプルです。基本の形はこれだけ。
/ スペルミスと判定された部分の見た目を変える魔法のコード /
::spelling-error {
/ ここにスタイルを書きます /
}
「え、これだけ？ クラス名とかIDはいらないの？」と思ったそこのあなた、大正解です。これはクラスやIDを指定するものではなく、ブラウザが「おや、ここミスだな」と自動で検知したテキストの断片に対して、ダイレクトに働きかける擬似要素（ぎじようそ）と呼ばれる特別な仕組みなんです。
たとえば、こんな風に書いてみます。
/ スペルミスの文字を、パッと目を引くポップな見た目にしちゃう例 /
::spelling-error {
background-color: #ffcccc; / 薄い赤色の背景を敷いてみる /
color: #cc0000; / 文字色を少し濃い赤にしてみる /
text-decoration: wavy underline #ff0000; / ウェーブ状のアンダーラインをつける /
}
これだけで、ブラウザが「ここスペルミスです！」と判断したテキストが、あなたの指定した可愛い（あるいは目立つ）デザインに早変わりします。
—
ちょっと待って！何でもかんでも変えられるわけじゃないの？
さて、ここで現実のお話（仕様の制限）を少しだけ。
「やった！ じゃあスペルミスの文字を巨大にしたり、回転させたり、キラキラ光らせちゃおう！」と意気込みたくなる気持ち、痛いほどよく分かります。私も昔はなんでもかんでも派手にしようとして先輩に怒られましたから（笑）。
実は、セキュリティやブラウザのパフォーマンス、そして「ユーザーが読めなくなったら本末転倒」という優しい理由から、`::spelling-error` で使えるCSSのプロパティには厳しいお約束（制限）があります。
使えるのは、主に次のようなテキストの見た目をちょこっと変えるプロパティだけです。
- `color` （文字の色）
- `background-color` （背景の色）
- `text-decoration` 及其の関連プロパティ（下線や波線のスタイル、色）
- `text-shadow` （文字の影）
逆に言うと、文字の大きさを変える `font-size` や、要素の大きさを変える `width`、位置を動かす `margin` などは使えません。「あくまで赤ペンでハイライトする程度の上書きにとどめなさい」という、ブラウザからの優しいお説教だと思ってください。
—
食わず嫌いをなおそう！ 実践コードで試してみよう
百聞は一見に如かず。実際にエディタを開いて（あるいはCodePenなどの遊び場に）このコードをペタッと貼り付けて試してみましょう。
HTMLは普通に、英語の入力欄やコンテンツを用意します。
Hellow World! This is a smpila test text.
(※ `contenteditable=”true”` は、ブラウザ上で直接文字を書き換えたり編集したりできる魔法の属性です。)
そして、CSSはこちら。
/ 読みやすいように少しだけ余白やフォントを整える親切設計 /
body {
font-family: sans-serif;
font-size: 1.2rem;
padding: 2rem;
color: #333;
}
/ 編集できる段落のデザイン /
p[contenteditable=”true”] {
padding: 1rem;
border: 2px dashed #ccc;
border-radius: 8px;
background-color: #fafafa;
}
/ — ここからが今回の主役！ — /
/ ブラウザが「おや？」と検知したスペルミスを、お洒落な青色に変えてみる /
::spelling-error {
color: #0056b3; / 文字色は爽やかな青に /
background-color: #e6f2ff; / 背景はごく薄い青に /
text-decoration: wavy underline #007bff; / 波線も青色でおしゃれに統一 /
}
このコードを書いてブラウザで見てみると、「Hellow」や「smpila」といった、ちょっと怪しいスペルの部分が、ブラウザのデフォルトの赤い波線から、あなたが指定した「おしゃれな青色のハイライト」に変わるはずです！
—
現場のプロからのちょっとしたアドバイス
「この機能、いつ使うの？」って思いませんでしたか？
たしかに、普通のコーポレートサイトやブログの本文で、わざわざスペルミスの見た目をゴリゴリカスタマイズする機会はそう多くありません。
ですが、例えばこんな場面ではものすごく重宝します。
- 文章作成ツールやCMSの管理画面を作っているとき
- ユーザーがブラウザ上で長文を書くようなWebアプリケーション（Notionのようなメモアプリや、英語学習サービスなど）を開発しているとき
- 「ブラウザ標準の赤い波線だと、うちのサイトの可愛いデザインの世界観を壊しちゃうな……」という、細部にこだわるデザイナーのこだわりを叶えたいとき
CSSのこうした「ちょっとマニアックな擬似要素」を知っていると、「あ、この人はただ画面を作るだけじゃなくて、ユーザーの入力体験や細部の見栄えまでしっかり考えているんだな」と、まわりのエンジニアやデザイナーから一目置かれる存在になれますよ。
—
まとめ
いかがでしたでしょうか？
`::spelling-error` は、難しそうな名前をしていますが、要するに「ブラウザがつけてくれる赤ペン先生のマークを、自分の好きなデザインにおめかしする機能」です。
最初は「使えるプロパティが制限されていて窮屈だな」と感じるかもしれませんが、その制約のなかでどう綺麗に見せるかを考えるのも、フロントエンドの醍醐味であり、最高に楽しいところです。
焦らず、一歩ずつ、ご自身のペースでCSSとお友達になっていきましょう。
あなたのWeb制作ライフが、少しでも楽しく、色鮮やかなものになりますように！ チーフアーキテクトの私でした。また次回の記事でお会いしましょう！
コメント