便利なアプリの紹介など幅広く雑多に記録するブログ。4分22秒clrmemory先日、cssで強調(ハイライト)の色を変更する方法を公開しました。その記事の中で、テキストだけを強調表示させることができると書きました。そこで今回は、cssでテキストだけを強調(ハイライト)して色を変える方法を紹介します。まとめはじめに今回紹介する内容は「cssでテキストだけを強調(ハイライト)して色を変更する方法」です。実際にテキストの強調色を設定すると、サイト内のテキストをドラッグした時に、以下のような色を設定できるようになります。それぞれの要素にハイライト時の色を設定しました。先日の記事で、背景の強調色を変更する方法を紹介しています。【css】強調(ハイライト)の色を変更して好きな色を設定する方法!2017.10.23サイトないのテキストをドラッグすると部分的に色が変わりますよね。これを強調やハイライトなどと呼ぶのですが、今回はcssでこの色を制御する方法を紹介します。PC側で設定されていても、自分のサイト内でだけは任意の色に変えることができるので試してみてください。...似たような方法で実装できるので、こちらもぜひ試してみてください。テキストの強調色を調整しましょう。使うのはselection!使用するcssは、ハイライトの背景色を設定した時と同様「selection」を使用します。{}ここに、テキストの色を設定するためのコードを記述していくわけですね。実際のコードを見ていきましょう。スポンサーリンクスポンサーリンクテキストの強調色を変更する今回は、テキストがハイライトされたら「赤色」に変更してみます。完成したコードがこちら。red;}このように記述することで、テキストを強調表示させた時の色を「赤」に設定することができました。簡単ですね!実際にハイライトさせてみると、ちゃんと赤くなるのがわかるかと思います。テキストだけを強調表示させるここまでで、テキストの強調色は変更できました。今の状態だと背景色がついたままですよね。先ほど追加したコードを、さらにテキストだけの色を変更するように書き換えてみましょう。red;}このようにすることで、背景色はそのまま、テキストの色だけをハイライトさせることができました。実際の表示を確認してください。pタグ以外にも使える!今回の記事では、テキスト(p)に強調色を設定しましたが、実は「見出し(h2)」や「リンク(a)」などにも設定できます。その場合は、pの部分を「h2」や「a」などに書き換えるだけです。red;}スポンサーリンクスポンサーリンクまとめ今回紹介した方法を使えば、テキストをハイライトした時の色を設定することができました。強調色は「red」だけではなく、「rgba」や「#xxx」などでも設定できるので、サイトのデザインに合わせて調整してみてください。そのような場合は、四則演算を使う「calc」というコードで実装できるので紹介します。...また、背景を設定する方法も合わせて覚えておきましょう。【iPhone】ホーム画面に好きなサイトを追加して1クリックでアクセスできる機能が超便利!【css】テキストをハイライト(強調)させない時にもselectionが便利!記事を探すプロフィールクリアメモリクリアメモリは、プログラミングに関する記事やガジェットのレビュー、便利なアプリケーションの紹介など、幅広く雑多に記録するブログです。Wizardがすごい!クリアメモリ。