【Web制作】フロントエンジニアなら知っておきたい文字強調実装方法

こんにちは。じゃそです。

最近ディレクションばっかりで自分が実装をあまりしていなかったので、このデザインどうやるんだっけ？ってなることがすごく多かったので、自身の備忘録も兼ねて、ブログの記事にしてしまおうと思いました！

今ではAIを使ってある程度実装できると思いますが、知ってて使うのと、知らずに使うのではやっぱり違うかなと思うので、参考にしてもらえたら嬉しいです！

①文字の上にドット（点）を付ける

See the Pen Untitled (@hwnihrtx-the-builder) on CodePen.

②マーカー風ハイライトを引く

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

③グラデーションの下線を引く

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

④波線を引く

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

リーダブルコード より良いコードを書くためのシンプルで実践的なテクニ （Theory　in　practice） [ ダスティン・ボズウェル ] 価格：2,640円（税込、送料無料) (2025/10/11時点) 楽天で購入

⑤背景に帯を付ける

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

⑥ネオンで発光しているように見せる

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

⑦カプセルに入っているように見せる

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

⑧ホバーで下線が動く

See the Pen Untitled by 岡本有馬 (@hwnihrtx-the-builder) on CodePen.

⑨先頭一文字を大きく表示する

See the Pen Untitled(@hwnihrtx-the-builder) on CodePen.