CSSカスタムハイライトAPI - DOM操作なしでテキストをハイライト - ICS MEDIAウェブサイトやウェブアプリで特定の文字や文章をハイライトしたいとき、今までは<span>タグなどで囲んでCSSのスタイルを当てるのが一般的でした。 この方法では、文章の構造には関係のないタグが必要になり、HTMLの階層構造が深くなりがちです。また、動的にハイライトする場合はJavaScriptでDOMを書きかえてタグを挿入する必要があり、構造と見た目の分離が難しいという課題がありました。 CSSカスタムハイライトAPIは、DOMを書きかえずにテキストの一部をハイライトできるブラウザAPIです。この記事では使い方の解説と、APIを活用したデモを紹介します。 基本的な使い方 まずは基本の使い方をおさえておきましょう。 サンプルを別ウインドウで開く コードを確認する 1. JavaScriptでRangeオブジェクトを作成する ハイライトしたいDOMを取得します。Rangeオブジェクトを作成し、
