k8o

はじめに

ブラウザはスペルミスを赤い波線、文法エラーを緑の下線のような装飾で知らせてくれます。CSSにはこの見た目を扱う機能が2つあります。エラー風の装飾を任意のテキストに与えるtext-decoration-lineの値spelling-errorとgrammar-error、そしてブラウザが検出した本物のエラーへスタイルを当てる擬似要素::spelling-errorと::grammar-errorです。

前者はBaseline 2025入りした一方、後者はまだBaselineに達していない先取りの機能です。この記事では使える状態になった値の方から紹介します。

text-decoration-lineでエラー風の装飾を描く

text-decoration-lineの値spelling-errorとgrammar-errorは、Chrome 121とFirefox 137に続いてSafari 26.2が対応したことで、2025年12月にBaseline 2025入りしました。エラー検出とは無関係に、ブラウザ標準のエラー表示と同じ見た目を任意のテキストへ与えます。

.custom-spelling {
  text-decoration-line: spelling-error;
}

.custom-grammar {
  text-decoration-line: grammar-error;
}

この値を指定したテキストには、そのブラウザがスペルミス・文法エラーの表示に使っているものと同じ装飾が描かれます。見た目は完全にブラウザ任せで、次の特徴があります。

• underlineなど他の線種と組み合わせられない単独の値です
• text-decoration-colorやtext-decoration-style、text-decoration-thicknessの指定は無視されます
• 未対応のブラウザでは装飾が描かれないだけで、他への影響はありません

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

ブラウザのスペルチェック（spellcheck）は日本語の文章を検出できませんが、この値は検出と切り離された純粋な装飾なので、デモのように日本語のテキストにもエラー風の見た目を与えられます。自前の校正機能を持つエディタで指摘箇所を示すときに、ブラウザのエラー表示と一貫した見た目を実現できます。

CSS Custom Highlight APIの記事で紹介した::highlight()擬似要素の中ではtext-decoration系のプロパティが使えるため、組み合わせるとDOMを変更せずに自前で検出した誤りへネイティブ同等の装飾を引けます。

::highlight(my-spellcheck) {
  text-decoration-line: spelling-error;
}

なお、この装飾は色と線だけの視覚的な表現です。実際の校正UIで使うときは、指摘の内容をテキストや支援技術にも伝わる形で併記する必要があります。

検出されたエラーをスタイリングする擬似要素

ここからは向きが逆の機能です。擬似要素::spelling-errorと::grammar-errorは、ブラウザのスペルチェックによってスペルミスや文法エラーとしてフラグ付けされたテキストに対するスタイルを定義します。まだBaselineに達していないため、先取りの機能として押さえておく位置づけです。

::spelling-error

スペルミスとしてフラグ付けされたテキストに対するスタイルを定義します。

::spelling-error {
  background-color: #ffcccc;
  color: #d8000c;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

::spelling-errorの中で使えるプロパティは、次の装飾系に限られます。

• colorとbackground-color
• text-decorationとその関連プロパティ（text-decoration-*）
• outlineとそのlonghand（outline-*）
• cursorとcaret-color
• text-emphasis-colorとtext-shadow

::grammar-error

文法エラーとしてフラグ付けされたテキストに対するスタイルを定義します。

::grammar-error {
  color: #d8000c;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}

::grammar-errorも::spelling-errorと同様のプロパティしか定義できません。

spellcheckに検出させて試す

contenteditable属性で編集可能なテキストエリアを準備しました。spellcheck属性がtrueのため、ブラウザのスペルチェックが働き、検出されたエラーが::spelling-errorと::grammar-errorでスタイリングされます。

この例ではcontenteditable属性の値をplaintext-onlyにすることでテキストの入力しか行えないようにしています。plaintext-onlyについても記事を書いているので良ければ読んでください。

::spelling-error {
  background-color: var(--color-bg-error);
  color: var(--color-fg-error);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-fg-error);
}

::grammar-error {
  color: var(--color-fg-error);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-fg-error);
}

そのままではspellcheckの確認が行われず、見た目の変化がないことがあります。その場合は、テキストの一部を編集して再確認させると、spelingがスペルミスとして検出されます。

一方、an grammarのanに期待している文法エラーの装飾は、多くの環境で表示されません。::grammar-errorが当たるのはブラウザが文法エラーとしてフラグ付けしたテキストだけですが、Chromeは現状Webページのテキストに対する文法チェックを持たず、SafariもmacOSの文法チェックを有効にした場合に限られるためです。セレクタに対応していることと、それが当たるテキストをブラウザが作れることは別の問題です。

文法エラーの装飾がどんな見た目になるかは、最初のデモのtext-decoration-line: grammar-errorで確認できます。

おわりに

スペルミス・文法エラーの装飾を扱う2つのCSS機能を紹介しました。エラーと同じ見た目を任意のテキストに与えるtext-decoration-lineの値はBaseline 2025入りしており、検出された本物のエラーへスタイルを当てる擬似要素はBaseline未達の先取り機能という関係です。

spellcheck自体が日本語対応していないので、擬似要素は日本語ユーザーにとってあまり恩恵がないかもしれませんが、text-decoration-lineの方は検出に依存しない装飾として日本語でも使えるため、校正系のUIを作るときのために覚えておきたいです。