言葉の「通訳」をHTMLに任せよう！lang属性でインライン要素を賢くマークアップするコツ
こんにちは！Web制作の世界へようこそ。HTMLのコードを書いていると、`
`や`
今日は、文章の中にふと混ざる「外国語」を、ブラウザや読み上げソフトに正しく伝えるための「lang属性」という魔法についてお話しします。
「英語っぽく読んで！」とお願いする魔法の杖
例えば、日本語で書かれたブログの中に、ふと英語の単語が混ざることってありますよね。
「今日のランチは Pasta にしました！」
この「Pasta」という単語、人間なら「ああ、パスタのことね」とすぐ分かります。でも、目の不自由な方が使う「スクリーンリーダー（画面の読み上げソフト）」や、ブラウザの「自動翻訳機能」にとっては、突然現れた謎の文字列に見えることがあるんです。
もし、日本語の読み上げ設定のまま「Pasta」を読ませると、妙にカタカナ英語っぽく不自然に読まれてしまったり、スペルチェックが「これ、間違った単語じゃない？」と勘違いして警告を出したりすることがあります。
ここで登場するのが、インライン要素（``や``など）に添える`lang`属性です。これを使うと、ブラウザに「ここは英語だから、英語の辞書で読み方を調べてね！」と教えてあげることができるんです。
さっそくコードで見てみましょう
まずは、基本の形です。``タグの中に`lang=”en”`（英語ですよ、という合図）を書いてみましょう。
今日のランチは
Pasta
にしました！
これだけで、読み上げソフトは「Pasta」の部分だけ英語の発音に切り替えてくれるようになります。お買い物のレジで、店員さんが外国の方だと分かって、スッと英語で話しかけるようなスマートな気遣いですね。
こんなときにも使えます！
`lang`属性は、単語だけでなく、ちょっとしたフレーズや、あえて強調したい場所にも使えます。
- ``タグで強調する時:
`C’est la vie`（フランス語で「それが人生さ」）
- `
`タグで技術用語を書く時:
`display: flex;`（プログラミングコードは基本的に英語として認識させるのがベストです）
特に``タグに`lang="en"`を当てるのは、コードのスペルミスをツールが正確にチェックしてくれるようになるので、開発者としても非常にありがたいテクニックです。
つまずきやすいポイント：やりすぎは禁物？
ここで一つだけ注意点を。「じゃあ、全部の単語に`lang`を付ければ完璧じゃない？」と思うかもしれません。でも、それはちょっと大変ですよね。
Web制作において大切なのは「必要な場所を見極めること」です。
- 日本語の中に明らかに別の言語が混ざっている場合
- 読み上げソフトが誤読してしまいそうな固有名詞の場合
これらを中心に、ポイントを絞って使うのが「プロの技」です。全部にタグを埋め込むとコードが読みづらくなってしまうので、まずは「ここは読み上げで違和感が出そうだな」と感じる場所にだけ、そっと添えてみることから始めてみてください。
最後に：Webは「誰にでも届く」もの
`lang`属性を使うことは、単なる「正しいHTMLの書き方」ではありません。それは、世界中のどんな人があなたのサイトを訪れても、正しく情報を届けようとする「優しさ」そのものです。
最初は難しく感じるかもしれませんが、「この言葉、なんて読んでほしいかな？」と想像するだけで、あなたのコードはぐっと人間味のある、温かいものに変わっていきます。
ぜひ、次回のコーディングで「外国語の単語」を見つけたら、この魔法の杖（`lang`属性）を試してみてくださいね。大丈夫、まずは一つずつ、楽しみながらやっていきましょう！
コメント