やあ、みんな。今日もまた、Webの奥深い森の入り口で君たちを待っていたよ。
僕らは日々、CSSという魔法の杖を振るって、Webページに命を吹き込んでいるよね。色をつけたり、形を整えたり、アニメーションで動きを出したり……。でも、実はCSSの魔法って、もっともっと奥が深いんだ。
今日はね、そんなCSSの魔法の中でも、特に「国際化」という、ちょっとスケールの大きな話に関わる、それでいてとっても身近な魔法の杖「`:lang()` 疑似クラス」について、じっくりと語り合っていこうと思う。
「国際化って聞くと、ちょっと難しそうに聞こえるかもしれないけど、大丈夫。私たちが普段使っているCSSに、そんな賢い機能がちゃんと用意されているんだ。さあ、一緒にその秘密を紐解いていこうじゃないか。」
—
その情報、何語で書かれている？ – `:lang()` 疑似クラスのひみつ
君のWebサイトは、世界中の誰にでも優しいか？
想像してみてほしい。君が心を込めて作ったWebサイトに、日本だけでなく、英語圏、フランス語圏、あるいはアラビア語圏の人が訪れたとする。その人たちは、君のサイトが「何語で書かれているか」をどうやって知るんだろう？
もちろん、コンテンツを読めばわかることなんだけど、Webの世界では、もっとスマートなやり方があるんだ。それが、HTMLの`lang`属性、そしてそれに対応するCSSの`:lang()` 疑似クラスさ。
`:lang()` 疑似クラスは、例えるなら「多言語対応の看板屋さん」みたいなもの。
通りに並んだ色々な言語の看板を見て、「ああ、これは日本語の看板だから、この書体で大きく目立つようにしよう」「こっちは英語の看板だから、もっとスタイリッシュなフォントにして、横並びにしようかな」って、看板ごとに最適な見た目に調整してくれる、そんな賢い職人技なんだ。
つまり、Webページの要素が「何語で書かれているか」という情報（HTMLの`lang`属性）を読み取って、その言語にぴったりのスタイルを適用するための、とっても気の利いたセレクタなんだね。
まずは「名札」をつけよう！ HTMLの`lang`属性
`:lang()` 疑似クラスを使うには、まずWebページの各要素に「この情報は〇〇語だよ」という「名札」をつけてあげる必要がある。それが、HTMLの`lang`属性なんだ。
一番基本的な使い方は、HTML文書全体に「このページは〇〇語だよ」と宣言すること。通常は``タグに記述するよ。
こんにちは、世界！
これは日本語の段落です。
Hello, world!
This is an English paragraph.
また日本語に戻りました。
この例だと、
- ``要素に`lang=”ja”`がついているから、基本的にページ全体は「日本語」として扱われる。
- でも、途中の`
`要素には`lang=”en”`という「名札」がついているよね。これで、この``とその中の子孫要素は「英語」として扱われるようになるんだ。
まるで、「この家族は日本語を話すけど、お父さんだけ英語を話すんだよ」みたいなイメージだね。
さあ、CSSで魔法をかけよう！ `:lang()` の使い方
HTMLで名札をつけたら、あとはCSSでその名札を読み取って、スタイルを調整するだけ。使い方はとってもシンプルだよ。
/ style.css /
/ 日本語のコンテンツに適用されるスタイル /
:lang(ja) {
font-family: “Yu Gothic”, “Hiragino Kaku Gothic ProN”, sans-serif; / 日本語に合いやすいフォント /
line-height: 1.8; / 行の高さも日本語に合うように調整 /
color: #333;
}/ 英語のコンテンツに適用されるスタイル /
:lang(en) {
font-family: “Roboto”, Arial, sans-serif; / 英語に合いやすいフォント /
font-weight: 500; / 少し太めのウェイトにしてみよう /
color: #0056b3; / 英語部分だけ青色に /
}/ フランス語のコンテンツに適用されるスタイル（もしあれば） /
:lang(fr) {
font-style: italic; / フランス語は少し斜体にしてみる /
color: #d9534f; / 赤系の色に /
}/ 特に、日本語の段落（p要素）にだけ少し特別な装飾 /
p:lang(ja) {
border-left: 3px solid #f0ad4e; / 左側に黄色のボーダー /
padding-left: 10px; / ボーダーとテキストの間隔 /
}/ 英語の段落（p要素）にだけ少し特別な装飾 /
p:lang(en) {
background-color: #e6f7ff; / 背景色を薄い水色に /
padding: 5px 10px; / 内側の余白 /
border-radius: 5px; / 角を丸く /
}どうかな？ これで、HTMLで`lang=”ja”`と書かれた要素には日本語用のスタイルが、`lang=”en”`と書かれた要素には英語用のスタイルが、それぞれ自動的に適用されるんだ。
ポイント：`lang`属性は子孫要素にも継承される！
先ほどのHTMLの例で、`div lang=”en”`の中に複数の`
`タグがあったよね。
この場合、明示的に``と書かなくても、親である`div`が`lang=”en”`と宣言しているから、その中の`
`要素も自動的に「英語」として認識されるんだ。
まるで、「このお家は英語を話す家族だから、リビングも寝室も全部英語モードだよ」って感じだね。とても効率的だと思わないかい？
もっと知っておくと便利なこと
`:lang()` 疑似クラスは、単に言語を判別するだけでなく、Webサイトのユーザー体験を格段に向上させる、もっと深い使い方があるんだ。
1. フォントの最適化
これは僕が現場でよく使う、まさに「極限の知見」と言ってもいいテクニックだ。日本語と英語では、読みやすいフォントが全く違う。
- 日本語: ゴシック体や明朝体など、漢字やひらがなが美しく表示されるフォント。
- 英語（欧文）: セリフ体やサンセリフ体など、アルファベットに特化したフォント。
`:lang()` を使えば、言語ごとに最適な`font-family`を簡単に指定できる。これにより、どの言語のユーザーにも最高の読みやすさを提供できるんだ。
/ 日本語のフォントスタック /
:lang(ja) {
font-family: “Noto Sans JP”, “Hiragino Sans”, “Yu Gothic UI”, sans-serif;
}/ 英語のフォントスタック /
:lang(en) {
font-family: “Open Sans”, “Helvetica Neue”, Arial, sans-serif;
}/ 中国語（簡体字）のフォントスタック /
:lang(zh-Hans) { / lang属性の表記に注意！ /
font-family: “Noto Sans SC”, “Microsoft YaHei”, sans-serif;
}補足: `lang`属性は`ja-JP`のように地域コードも含むことができるけど、CSSの`:lang()`は`lang(ja)`のように主要な言語コードだけでマッチングしてくれることが多いよ。より厳密にマッチングしたい場合は`lang(ja-JP)`のように記述することも可能だ。
2. 引用符のスタイル
言語によっては、引用符の形が違うのを知っていたかい？
- 日本語：「」や『』
- 英語：”” や ”
- フランス語：« »
`:lang()` と `quotes` プロパティを組み合わせることで、自動的にその言語に合った引用符を表示させることができるんだ。これは地味だけど、プロの仕上がりには欠かせない気配りだよ。
/ 日本語の引用符 /
:lang(ja) {
quotes: “「” “」” “『” “』”;
}/ 英語の引用符 /
:lang(en) {
quotes: ““” “”” “‘” “’”;
}/ フランス語の引用符 /
:lang(fr) {
quotes: “« ” ” »” “‹ ” ” ›”; / フランス語は引用符と内容の間にスペースが入るのが一般的 /
}/ 実際のHTMLでは、qタグなどを使うことで、自動的に引用符が表示される /
q:before { content: open-quote; }
q:after { content: close-quote; }3. 表示・非表示の切り替え
特定の言語でしか表示したくないコンテンツがある場合も、`:lang()` は活躍する。例えば、日本語ページでだけ表示するお知らせや、英語ページでだけ表示する免責事項などだね。
/ デフォルトでは非表示にする /
.lang-specific {
display: none;
}/ 日本語の親要素を持つ .lang-specific だけ表示 /
:lang(ja) .lang-specific.for-ja {
display: block;
}/ 英語の親要素を持つ .lang-specific だけ表示 /
:lang(en) .lang-specific.for-en {
display: block;
}これを使えば、一つのHTMLファイルの中に多言語のコンテンツを詰め込みつつ、必要な部分だけを出し分けすることも可能になるんだ。もちろん、この方法はJavaScriptで出し分けをするよりもCSSだけで完結するので、パフォーマンス面でも有利な場合があるよ。
4. 右書き言語（RTL）への対応
アラビア語やヘブライ語のように、右から左へテキストが進む言語（RTL: Right-To-Left）があることも忘れてはならない。`:lang()` を使えば、これらの言語に対して`direction: rtl;`や`text-align: right;`といったスタイルを適用して、視覚的な読みやすさを向上させることができるんだ。
/ アラビア語のコンテンツに適用されるスタイル /
:lang(ar) {
direction: rtl; / テキストの方向を右から左へ /
text-align: right; / テキストを右寄せに /
}これは、デザインの細部まで配慮が行き届いた、本当に「優しいWebサイト」を作るための、とても重要な一歩なんだ。
つまずきやすいポイント、大丈夫だよ！
- `lang`属性の書き忘れ・間違い: 一番よくあるミスだよ。HTMLの`lang`属性が正しく書かれているか、スペルミスがないか、もう一度確認してみてほしい。
- CSSの優先順位（詳細度）: 他のセレクタ（クラスセレクタやIDセレクタなど）が指定されている場合、`:lang()` よりもそちらのスタイルが優先されてしまうことがある。もしスタイルが適用されないなと思ったら、開発者ツールでCSSの適用状況を確認してみよう。
- 言語コードの確認: `lang=”en-US”`（アメリカ英語）のように地域コードまで指定している場合、`:lang(en)`でもマッチするけど、より厳密に`lang(en-US)`と書くと、その地域に特化したスタイルを適用できる。必要に応じて使い分けよう。
心配しなくても大丈夫。これらのポイントに気をつければ、君も`:lang()`の魔法を使いこなせるようになるはずさ。
—
さあ、Webの世界をもっと豊かにしよう！
今日はCSSの`:lang()` 疑似クラスについて、その基本的な使い方から、現場で役立つちょっとした「裏技」まで、色々と話してきたね。
`:lang()` 疑似クラスは、単なる見た目の調整だけじゃない。
世界中の多様な人々が、ストレスなく、快適にWebコンテンツを楽しめるようにするための、Web制作者からの「おもてなし」の心そのものなんだ。多言語対応って聞くと、途方もない作業に思えるかもしれない。でも、`:lang()` のようなCSSの賢い機能を使えば、一歩ずつ、着実に、ユーザーフレンドリーなサイトへと進化させていくことができる。
最初は小さな一歩かもしれない。でも、その一つ一つの積み重ねが、やがて君を素晴らしいフロントエンドの魔法使いへと変えてくれるはずだ。
さあ、この魔法の杖を手に、Webの世界をもっと豊かにしていこうじゃないか！ きっと、君の作ったサイトが、地球の裏側の人々の笑顔に繋がる日が来るはずだよ。
また、Webのどこかで会おう！
コメント