日本語の「ここを見て！」を表現する。CSSで傍点（ぼうてん）を操る魔法
Webサイトを作っていると、「この言葉だけ、ちょっと強調したいな」と思うことはありませんか？
太字にするほどではないけれど、日本語特有の「気持ち」を込めたい。そんな時にぴったりの装飾が「傍点（ぼうてん）」です。
教科書や小説で、文字の上にちょこんとついている「・」を見たことはありませんか？ あれです。今日は、CSSを使ってその「ちょこん」を自由に操る方法を、一緒に紐解いていきましょう。
—
なぜ「太字」じゃなくて「傍点」なの？
太字（``タグなど）は、いわば「叫んでいる」ような強い強調ですよね。それに対して傍点は、「ここ、大事だよ」と指先でそっと差して教えるような、繊細な強調です。
日本語のタイポグラフィ（文字の配置や見た目）において、この傍点は非常に重要な役割を果たします。特に情緒的な表現や、読み手にリズムを感じさせたいとき、デザインに「和」のニュアンスを添えたいときに大活躍します。
「text-emphasis」という魔法の杖
CSSには、文字に傍点を打つための魔法が用意されています。それが `text-emphasis` プロパティです。
まずは、基本の書き方を見てみましょう。
/ クラス名「emphasis」がついた要素に傍点を打つ /
.emphasis {
/ どんな形の傍点にするか（今回は「ドット」） /
text-emphasis-style: dot;
/ 傍点を文字のどこに置くか（今回は「上」） /
text-emphasis-position: over right;
}
これだけで、対象の文字の上に「・」が浮かび上がります。簡単ですよね！
傍点カスタマイズのバリエーション
`text-emphasis-style` には、ドット以外にもいろいろな形が選べます。お料理の盛り付けを変えるように、雰囲気に合わせて選んでみてください。
- `dot`：標準的な点（・）
- `circle`：中抜きの丸（◦）
- `double-circle`：二重丸（◎）
- `triangle`：三角（▴）
- `sesame`：ゴマのような形（﹅）※これが一番「傍点らしい」形です！
さらに面白いのが、「好きな文字を傍点にできる」という点です。例えば、「★」を傍点にしたいなら、こう書きます。
.star-emphasis {
/ 好きな記号や文字をクォーテーションで囲むだけ！ /
text-emphasis-style: ‘★’;
}
これで、大切な言葉にキラキラした星を添えることができます。素敵だと思いませんか？
—
実践！HTMLとCSSを組み合わせてみよう
では、実際にエディタに貼り付けて試せるサンプルコードを用意しました。まずは、これをご自身の環境で動かしてみてください。
今日は特別な日だから、星を飾ろう。
つまずきやすいポイント：縦書きのときはどうするの？
Web制作を続けていると、たまに「縦書き」のサイトに出会うことがありますよね。そんなとき、傍点はどうなるのでしょうか。
実は、`text-emphasis-position` をうまく使うと、縦書きでも綺麗に表示されます。
横書きの場合は `over right`（上側）が一般的ですが、縦書きの場合は自動的に右側に回り込んでくれます。CSSは私たちの意図を汲んで調整してくれる賢いツールなので、あまり身構えず、まずは「横書き」から試してみてくださいね。
最後に：Web制作は「伝え方」の工夫
傍点一つとっても、それをどの文字に当てるか、どんな形にするかで、読み手に伝わる「温度感」が変わります。
「ここを強調したい」と思ったとき、単に太字にするだけでなく、「傍点の方が優しく伝わるかな？」と一度立ち止まって考えてみること。そのほんの少しのこだわりこそが、あなたの作るWebサイトを「どこか温かい、読みやすいサイト」に変えていくはずです。
もしコードが動かなかったり、表示が崩れたりしても大丈夫。それは「もっと学びたい」という成長のチャンスです。一つずつ、楽しみながら試してみてくださいね！
コメント