【Web制作初心者必見】Web制作（フロントエンジニア）なら知っておきたい「文字強調」

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

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

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

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

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

日本語の「傍点（ぼうてん）」をCSSだけで再現する手法です。画像や疑似要素を使わず、text-emphasis プロパティだけで実装できます。filled/open で塗りの有無、dot/sesame で点の形を切り替えられます。

.emph-dot {
  text-emphasis: filled dot;
}

.emph-open {
  text-emphasis: open dot;
}

.emph-sesame {
  text-emphasis: filled sesame;
}

.emph-custom {
  text-emphasis: '*';
}

任意の記号を使いたい場合は、クォートで囲んで指定します。

縦書き（writing-mode: vertical-rl）と組み合わせる場合は、傍点の位置を右側に変更する必要があります。

.vertical {
  writing-mode: vertical-rl;
}

.vertical .emph-dot {
  text-emphasis-position: right;
}

Safariなど一部ブラウザは -webkit-text-emphasis の接頭辞が必要なので、本番では両方記述しておくと安全です。一文の中で「ここだけは読んでほしい」という部分に向いています。

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

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

background にグラデーションを使い、文字の下半分だけに色を乗せることでマーカーペンの質感を出しています。transparent 60% で上60%を透明にし、残り40%だけ色を塗るのがポイントです。

.marker {
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
}
.marker-pink {
  background: linear-gradient(transparent 60%, #ffb6c1 60%);
}
.marker-blue {
  background: linear-gradient(transparent 60%, #a0d8ef 60%);
}

色を変えるだけで複数のバリエーションが作れます。少しゆるい手書き風にしたい場合は、斜めのグラデーションに余白と角丸を加えると質感が出ます。

.marker-yellow {
  background: linear-gradient(120deg, #fff176 70%, transparent 100%);
  padding: 0 0.1em;
  border-radius: 2px;
}

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

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

text-decoration は単色しか指定できないため、下線部分にも background-image のグラデーションを使うのがポイントです。background-size で線の太さ、background-position で位置を指定し、文字の下にだけ細い帯を表示しています。

.underline-gradient {
  background-image: linear-gradient(to right, #ffeb3b, #ff9800);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 100%;
}

色を変えるだけでバリエーションを増やせます。

.underline-gradient-pinkblue {
  background-image: linear-gradient(to right, #ff66cc, #66ccff);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 100%;
}
.underline-gradient-green {
  background-image: linear-gradient(to right, #81c784, #4caf50);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 100%;
}

.underline-gradient には transition: background-size 0.3s; も付けてあるので、:hover と組み合わせれば線の太さがアニメーションで変化する動きも作れます。

④波線を引く

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

一番シンプルなのはCSS標準の text-decoration: underline wavy です。text-underline-offset で線と文字の間隔を調整できます。

.wavy {
  text-decoration: underline wavy #2196f3;
  text-underline-offset: 3px;
}

ただしブラウザ標準の波線は形を細かく調整できません。カーブの形を自由に作りたい場合は、::after 疑似要素にSVGを背景画像として敷く方法もあります。SVGの path でカーブを描き、background-size で繰り返しの幅を指定します。

.wavy-svg {
  position: relative;
}
.wavy-svg::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='6' viewBox='0 0 30 6'><path d='M0 3 Q7.5 0,15 3 T30 3' fill='none' stroke='%23ff9800' stroke-width='3'/></svg>") repeat-x;
  background-size: 10px 6px;
}

手軽に使うなら標準の wavy 指定、デザインを細かく統一したい場合はSVG方式が確実です。

こうした地味なCSSの仕組みも、後から見返した時に「なぜこう書いたか」が追えるかどうかでコードの寿命が変わります。可読性についてはこの本がずっと参考になっています。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

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

楽天で購入

⑤背景に帯を付ける

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

span などのインライン要素に直接 background-color と padding を指定するだけのシンプルな実装です。padding を入れることで、文字の周りに余白を持った帯になります。

.text-bg {
  background-color: #fff59d;
  padding: 0.1em 0.2em;
}

border-radius を足すと、角の丸い柔らかい印象の帯になります。

.text-bg-rounded {
  background-color: #c8e6c9;
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
}

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

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

文字の color を発光色そのものにし、text-shadow を半径の異なる値で5段階くらい重ねることで、光が滲んでいるような発光感を出しています。外側の影は少し濃い色にするとグラデーションがかかったような奥行きが出ます。

.neon {
  color: #00e5ff;
  text-shadow:
    0 0 5px #00e5ff,
    0 0 10px #00e5ff,
    0 0 20px #00e5ff,
    0 0 40px #00bcd4,
    0 0 80px #00bcd4;
}

色を変えるだけでバリエーションが作れます。

.neon-pink {
  color: #ff66cc;
  text-shadow:
    0 0 5px #ff66cc,
    0 0 10px #ff66cc,
    0 0 20px #ff66cc,
    0 0 40px #ff3399,
    0 0 80px #ff3399;
}

ポイントは背景を黒系にすること。明るい背景だと発光感がほとんど見えなくなるので、body { background-color: #000; } のように暗い背景とセットで使います。

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

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

ベースは border-radius を大きい値（9999px）にして角丸を最大化する、おなじみのピル型の作り方です。

.capsule {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 9999px;
  background: #2a2a2a;
  color: #fff;
}

ここから装飾を加えると質感のバリエーションが作れます。

グラデーション版：斜めグラデーション＋box-shadowで立体感を出す

.capsule.gradient {
  background: linear-gradient(135deg, #6ee7ff 0%, #3b82f6 45%, #8b5cf6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(59,130,246,.35);
}

ガラス風：半透明の背景＋backdrop-filter: blur()で背景をすりガラス状にする

.capsule.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

ネオン風：外側のbox-shadowを複数重ねて発光させ、文字にもtext-shadowを足す

.capsule.glow {
  background: #0b1220;
  color: #b9d7ff;
  box-shadow: 0 0 8px rgba(99,164,255,.55), 0 0 24px rgba(99,164,255,.35);
  text-shadow: 0 0 8px rgba(150,200,255,.5);
}

3D風：box-shadowのinsetを組み合わせて、ボタンが浮き上がっているような陰影を作る

.capsule.threeD {
  background: linear-gradient(180deg, #1f1f1f, #141414);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.2),
    inset 0 -3px 6px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.5);
}

すべてに transition を付けてあるので、:hover で transform: translateY() や scale() を加えるとボタンらしい動きが出せます。

⑧ホバーで下線が動く

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

::after 疑似要素を下線として用意し、width や clip-path を transition で変化させることで、ホバー時に下線が動くアニメーションを作っています。下線をどこから生えさせるかは left の基準点で決め、広がる/消える動きは width や clip-path で作るのがポイントです。

①左から出て左へ戻る：width を0%→100%に広げるだけの基本パターン

.underline {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #ffeb3b, #ff9800);
  transition: all 0.3s ease;
}
.left-in-left-out:hover::after {
  width: 100%;
}

②左から出て右へ戻る：clip-path で下線の見える範囲を左右から削ることで、出る方向と消える方向を別々に制御

.left-in-right-out::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s ease;
}
.left-in-right-out:hover::before {
  clip-path: inset(0 0 0 0);
}

③真ん中から両端に出て真ん中に戻る：left: 50% と transform: translateX(-50%) で中心を固定し、width だけを0→100%に広げる

.center-in-center-out::after {
  left: 50%;
  transform: translateX(-50%);
}
.center-in-center-out:hover::after {
  width: 100%;
}

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

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

::first-letter 疑似要素でも実装できますが、ブラウザ間の挙動差や装飾の自由度に制限があるため、実務では最初の1文字だけを <span> で囲んで個別にスタイルを当てる方法もよく使われます。

.dropcap__lead {
  float: left;
  font-size: 3rem;
  line-height: 0;
  margin: 0.05em 0.25em 0 0;
  font-weight: 800;
  color: #111;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

float: left で段落内に大きな文字を浮かせ、margin で周囲の文字との間隔を整えています。line-height: 0 は、大きな文字が行の高さに影響して段落全体の行間が崩れるのを防ぐテクニックです。

一点だけ注意したいのが、今回のHTMLでは先頭文字用の span に aria-hidden="true" が付いている点です。

<span class="dropcap__lead" aria-hidden="true">始</span>めの1文字を大きくして...

aria-hidden="true" を付けると、その文字はスクリーンリーダーから読まれなくなります。続く本文は2文字目（「めの1文字を…」）から始まる構造なので、このままだと読み上げ時に先頭の文字が欠けてしまいます。見た目を変えずに直すなら、aria-hidden を外すだけで解消できます。