AIで知識ゼロからアプリ開発1000時間 #21

#21：フォント、変わんね！なんでよ！？日本語とCSSのやっかいな関係

【ざっくり要約】
今回は「.timer-title だけばフォント変わらねじゃ〜」っていう、見た目は地味だけど、CSSではけっこう面倒なトラブルば話すべ。HTMLやCSSわがってても、日本語特有の落とし穴ば見つけるのは、思ったよりむずがしいもんだな。ChatGPTとやり取りしながら原因突き止めだ話、読んでる人も「おらでもいけるべな〜」って思ってもらえればうれしいじゃ。

■ なんでこの文字だけ変わんねんず？

「.timer-title だけ、フォント変わんねじゃ〜」

アプリいじってだ時、わぁ、そんな質問したんず。タイマーのタイトル文字だけが、指定したフォントにならね。.timer-display とがはちゃんと変わってるのに、なんでこの子だけダメだべ？

もちろん、いろいろ試してみだ。h2 に変えでみたり、p にしてみたり、!important つけても反映されねじゃ。クラス名のミスでもね。CSSの読み込みもちゃんとしてら。

「なんだべこれ…なんかあるはんで…」

---

■ ChatGPTの冷静な答え

ChatGPTは焦らずにこう言ってきたんず。

「まず、Chromeの開発者ツールでスタイルちゃんと当たってるが確認してみよう」

すぐに開発者ツール開いで、timer-title のCSS見でみだ。ほしたらちゃんと反映されでら。無視されてるわけでも、上書きもされてね。

---

■ 英語だと変わったっきゃ！？

そんでふと、こう思ったんず。

「タイトル 'タイマー' じゃなくて 'TIMER' にしたら、あれ？フォント変わってるじゃ！？」

まさが…まさがよ…

---

■ 犯人は…日本語非対応のフォントだじゃ！

そう、今回のフォント Expose-Regular.otf ってやつ、日本語に対応してね英語専用のフォントだったんず。英語なら反映されるけど、日本語入れたら別なフォント（Arial とが）に自動で変わってまる。

つまり CSS は間違ってね。ただ、フォントそのものが日本語使えねやつだったって話。

---

■ 解決策：日本語OKなフォントにすっぺ

{
  "font-family": "'Expose', 'Noto Sans JP', sans-serif"
}

こんな感じで、Expose が使えねば Noto Sans JP に切り替えるように書げば、日本語もキレイに出るようになるんず。

または、はじめから和文対応のフォント（Google Fonts で探せばいっぱいある）使えば間違いね。

---

■ 小さなつまずきから、大きな気づきへ

今回の問題は、CSSっていうより「フォントの仕様」だったんず。でもChatGPTと話すことで、原因スパッと見つけれたのはほんと助がった。

昔の自分だったら、「あ〜もうだめだ〜」って諦めてらべな。

でも今なら言える。

「わがんね時はAIに聞けばええ。調べ続ければ、道は開げる！」

---

■ だから、あんたもできるんず！

なんもわがんねおらでも、ここまでこれだ。CSSでつまずいだって、ChatGPTと一緒にやればなんとかなる。読んでるあんたも絶対なにか作れるんず。

ほんの小さな「変わらね」が、いつか「変われる」に変わる瞬間がくるはんで。

🎴 本日の一句

変わらぬは　フォントのせいか　日本語か