🎨

【HTML】【CSS】文字色を変更できない!?

2022/11/14に公開約700字

リセットCSSにより隣の文字色が影響してしまう現象と対策について

経緯

41歳未経験でプロのエンジニアを目指すための一環として、ポートフォリオ制作でタイピングアプリを作成していたんですが、打ち間違っている文字をspanタグで括りcssで色を変える処理を実装していたんですが、間違う文字の前が「f」で、間違う文字も「f」の時(つまりffと連続入力された時の後ろのfの文字色を変えるとき)に変色表示できない謎現象に躓いてしまいました。

index.html
<div id="ans_box">f<span>f</span>fff</div>
style.css
.ans_box span {	color: red;}

結果の画像

原因

firefoxで表示してみたところ、色が変わっているはずの「f」の右側が少しだけ赤になっているのを発見しました。もしやと思いletter-spacingで文字間をあけてやると正常に表示されました。
これは、リセットCSSにより文字間隔がリセットされた為、前の文字と表示範囲が重複(「f」や「i」という文字幅の細いものだけ)してしまい前の文字色が表示されるのが原因だったみたいです。

対策

letter-spacingで文字間を少し広げてやると正常に表示されます!

Discussion

ログインするとコメントできます