CSS Custom Highlight APIで行う文字スタイル変更
- カテゴリー
- CSS >
- CSSプロパティ
- JavaScript／TypeScript >
- ブラウザAPI
全2回
テキスト選択や検索結果のハイライトを、JavaScriptとCSSで自由に制御できるCSS Custom Highlight APIの基本と、実践的な使用方法について解説していきます。
後編 実践編：選択した箇所を強調する
CSS Custom Highlight APIを使って、ユーザーが選択したテキスト範囲にラベルを付けてハイライトし、クリックで削除できるインタラクティブなアプリケーションを作ります。実装を段階的に解説していきます。
前編 利用用途例と基本的な使い方
CSS Custom Highlight APIについて、まずはどのようなことに使えそうかを見てから、基本的な使い方を見てみましょう。JavaScriptで任意のテキスト範囲を定義し、CSSでその範囲にスタイルを適用していきます。