「なんとなく」で終わらせない！lang属性がWebサイトの「言葉のアクセント」を決める理由
こんにちは！日々のコーディング、お疲れ様です。HTMLを書き始めた頃、「`lang=”ja”` ってとりあえず書くものだよね？」と、おまじないのように扱っていませんでしたか？
実はその小さな属性こそが、ブラウザが「この言葉をどうやって美しく見せるか」を判断するための、非常に重要な羅針盤なんです。今日は、インライン要素（`span`や`em`など）と`lang`属性の関係について、少しだけ深掘りしてみましょう。
—
そもそも、なぜ `lang` 属性が必要なの？
例えば、あなたが海外旅行に行ったとき、現地の言葉が少し話せると、お店の人とのやり取りがスムーズになりますよね。「これ、いくらですか？」と現地の言葉で聞けば、相手も「ああ、この人はこの言語を話すんだな」と理解して、適切な丁寧さで答えてくれます。
ブラウザもこれと全く同じなんです。`lang`属性を書くことは、ブラウザに対して「ここは日本語のエリアですよ」「ここは英語のエリアですよ」と自己紹介してあげること。これがあるだけで、ブラウザは「よし、それならこのフォントで表示して、読み上げソフトにはこう伝えてあげよう！」と、最適な準備を整えてくれるんです。
—
見た目が変わる！フォントの「お国柄」
インライン要素（`span`や`em`など）で囲んだテキストに`lang`属性をつけると、実はフォントの見た目が変わることがあります。
例えば、日本語と中国語では、同じ「直」や「骨」という漢字でも、微妙に書き順や線の形が違いますよね。`lang`属性が正しく指定されていないと、日本語の文章の中に、突然「中国語風のフォント」が混ざってしまう……なんていう、ちょっと残念なことが起きてしまうんです。
コードで見てみましょう
私は Apple が好きです。
このように、小さな`span`タグ一つひとつに「これは英語だよ」「これはフランス語だよ」と教えてあげるだけで、Webサイトの端正さがグッと上がるんです。
—
スクリーンリーダーへの「おもてなし」
Webサイトは、目が見えない方やロービジョン（弱視）の方が、読み上げソフト（スクリーンリーダー）を使って閲覧することもあります。
もし、英語の文章なのに`lang`属性が「日本語」のままだったらどうなるでしょう？
読み上げソフトは「日本語だ！」と思って英語を読み上げようとするので、まるで外国人が無理やり日本語のイントネーションで英語を喋っているような、とても不自然な読み方になってしまいます。
これって、ちょっと悲しいですよね。`lang`属性は、情報のバリアフリー化における「一番最初の心遣い」なんです。
—
ハイフネーション：言葉の「折り返し」の知恵
英語などのアルファベット圏の言語では、単語が長すぎて行の端に収まりきらないとき、「-（ハイフン）」を入れて単語を分割して折り返すことがあります。
`lang=”en”`と指定しておくと、ブラウザは「ああ、英語だから単語の切れ目でハイフンを入れて折り返していいんだね」と判断して、行末を綺麗に整えてくれます。これを`lang=”ja”`のままにしていると、ブラウザは「日本語だから、途中で切ると変になるかもしれないな……」と迷ってしまい、結果としてレイアウトが崩れて見える原因になることも。
—
今日のまとめ：小さな記述が大きな優しさに
ここまで読んでみて、いかがでしたか？
- lang属性はブラウザへの「自己紹介」
- 適切なフォント表示で、見た目がグッとプロっぽくなる
- 読み上げソフトを使う人への「おもてなし」になる
- 英語の折り返し（ハイフネーション）も綺麗に整う
「なんだか難しそう」と感じていた`lang`属性も、実は「読者のことを一番に考えた、最高のおもてなし」だと思うと、なんだか書くのが楽しくなってきませんか？
まずは、`strong`や`em`で強調した外国語の単語に、こっそりと `lang` 属性を添えるところから始めてみてください。きっと、あなたの作るWebサイトが、より世界中の人に優しく、美しく届くようになるはずですよ！
もし途中でつまずいても大丈夫。HTMLは何度でも書き直せます。少しずつ、一緒にステップアップしていきましょうね。
コメント