日本語の「ここを見て！」を美しく。CSSで傍点（ぼうてん）を操る技術
Webサイトで文章を読んでいるとき、「ここは特に伝えたい！」という部分を強調したくなること、ありますよね。
太字にするのもいいけれど、日本の出版物でよく見かける「傍点（ぼうてん）」を使うと、ぐっと情緒的で、かつ上品な強調ができます。実はこれ、今のCSSを使えば驚くほど簡単に実装できるんです。
今回は、初心者の方でも迷わず使える「傍点」の魔法、`text-emphasis`プロパティの使い方をじっくり解説します。
—
そもそも「傍点」って何？
傍点とは、文字のすぐ上に付いている小さな点のことです。
例えば、「このケーキは、まさに『至高』の味でした」と書くとき、「至高」という文字の上にチョンチョンと点が並んでいるのを見たことはありませんか？
あれは、単に太くするよりも「繊細なこだわり」を感じさせますよね。Web制作の現場でも、キャッチコピーやブログの表現をリッチにするために、とても重宝されるテクニックです。
魔法のCSS：`text-emphasis` を使ってみよう
さっそくですが、HTMLとCSSの準備をしましょう。
基本的には、「強調したい言葉だけを `` タグで囲んで、そこにCSSを当てる」という流れになります。
お買い物のときに、大切な品物に付箋を貼るようなイメージですね。
1. HTMLの準備
まずはHTMLで、強調したい部分を `` で包みます。
今日のランチは、究極のオムライスにしました。
2. CSSの魔法をかける
次に、この `` にCSSで「傍点を付けて！」と指示を出します。
.emphasis {
/ これが傍点を表示するプロパティです /
text-emphasis: dot;
/ 傍点の色を変えたい場合はこちら /
text-emphasis-color: #ff4500;
}
たったこれだけで、文字の上に小さなドットが表示されます。ね、意外と簡単でしょう？
傍点の形は「お好み」で選べます
実は `text-emphasis` は、ドット以外にも色々な形に変身させることができます。お料理の盛り付けを変えるように、雰囲気に合わせて選んでみてください。
- `circle`：白抜きの丸
- `dot`：塗りつぶしの点
- `double-circle`：二重丸
- `triangle`：三角
- `sesame`：ゴマのような形（縦書きでよく使われる伝統的な形です）
たとえば、こんな風に書くだけです。
.emphasis-circle {
text-emphasis: circle; / 白抜きの丸になります /
}
つまずきやすいポイント：大丈夫、ここだけ気をつけて！
初めてこのプロパティを触る方がよくつまずくポイントが一つだけあります。それは「行の高さ」です。
傍点を付けると、文字の上に少しだけ高さが追加されます。そのせいで、行間がほんの少しだけ窮屈に見えてしまうことがあるんです。もし「傍点を入れたら、なんだか行間が詰まって見えるな」と感じたら、`line-height` を少し広げてあげると解決しますよ。
p {
line-height: 1.8; / 行間を少し余裕持たせると、傍点が綺麗に見えます /
}
「あれ、なんか崩れた？」と思っても大丈夫。それはブラウザが「文字の上に点があるから、少し場所を空けてね」と頑張ってくれている証拠ですから、落ち着いてCSSを調整してあげてくださいね。
まとめ：あなたの言葉を、もっと「らしく」
Webデザインの現場では、ルール通りに作ることも大切ですが、こうした「ちょっとした遊び心」が、そのサイトの個性を形作ります。
- 強調したい場所を `` で囲む
- `text-emphasis` で傍点を付ける
- 行間（`line-height`）でバランスを整える
この3ステップだけで、あなたのWebサイトの表現力はぐっと高まります。ぜひ、今日のブログ記事や制作物で、お気に入りの言葉に「傍点」を打ってみてください。
「ここを見て！」というあなたの想いが、きっとユーザーにも真っ直ぐ届くはずですよ。それでは、素敵なWeb制作ライフを！
コメント