【入門編】 :lang()擬似クラス – CSS実践ガイド

こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り抜けてきたチーフアーキテクトの私です。

CSSの勉強を始めたばかりの頃って、`.class`や`#id`、そして「スペースで繋ぐ子孫セレクタ」あたりまでは「なるほど、おもしろいじゃん！」って楽しくなるんですよね。でも、そのうち教科書の隅っこにひっそりと書かれている、ちょっと変わった見た目のセレクタに出会いませんか？

そう、今日お話しする `:lang()`擬似クラス です。

名前からして何やら難しそうですよね。「ラン？なんだそりゃ、英語の勉強でも始まるのか？」なんてブラウザを閉じちゃいたくなる気持ち、すごくよく分かります。でも、大丈夫ですよ！一歩ずつ、身近な例えを交えながら、その魅力と実用性を紐解いていきましょう。

—

1. `:lang()`擬似クラスって、一体なにをしているの？

いきなりコードを書く前に、まずは私たちの身の回りにある「言語の切り替え」を想像してみてください。

例えば、海外から届いた大きな家具を組み立てる時を思い浮かべてみてください。説明書を開くと、最初にこう書いてありますよね。
「Japanese」「English」「Deutsch」「Français」……。

私たちはその中から自分の母国語（例えば日本語）のページを開いて、そこに書かれた指示に従って家具を組み立てます。

Webの世界もこれとまったく同じなんです。
HTMLを書くときに、私たちはよくこんな風に言語を指定しますよね。

この `lang=”ja”` というのは、ブラウザやスクリーンリーダー（視覚障がいを持つ方のための読み上げソフト）に向けて、「このページの言葉は日本語ですよー」と教えてあげるための名札のようなものです。

そして、この `:lang()` 擬似クラスは、まさにこの 「名札（lang属性）」を見て、特定の言語のときだけこっそりデザインを変えてくれる魔法のスイッチ なんです。

—

2. なぜクラス（`.class`）じゃダメなの？ `:lang()`の優しい真実

「あれ？これって `.jp` みたいなクラスを付ければよくない？」
そう思ったあなた、素晴らしい着眼点です！その通り、自分で `class=”japanese”` なんて付けても同じようなことはできます。

でも、ちょっと想像してみてください。
世界中に展開するような大規模なニュースサイトや、多言語対応のコーポレートサイトを作っているとします。ページ数が数百ページ、いや数千ページにも及ぶとき、すべてのHTML要素にいちいち「これは日本語用だから…」「こっちは英語用だから…」とクラスを書き込んでいくのは……想像しただけで、夜も眠れなくなっちゃいますよね。

ここで `:lang()` の出番です。
親要素（例えば `` タグなど）に `lang=”ja”` や `lang=”en”` と指定しておくだけで、その中にあるテキストたちは、自分でクラスを持っていなくても、自分が何語の環境にいるのかを勝手に察知して挙動を変えてくれるんです。

これって、すごくスマートで優しくないですか？

—

3. 実践！コードで見てみよう

百聞は一見に如かず。実際にエディタに貼り付けて試せるサンプルコードを用意しました。

今回は、Webサイトによくある「引用文（``タグ）」を例にしてみましょう。引用符（「」や“ ”）の付け方は、言語によってお作法が違うんです。これを `:lang()` で華麗に解決してみましょう。

チーフアーキテクトはこう言いました。「CSSの基本を制する者が、デザインを制す、とね。」

The master said, Good design is actually quite simple, but implementation is the real art.

このコードのすごいところ

ブラウザでこのファイルを開いてみてください（もし `lang=”ja”` を `lang=”en”` に書き換えてみたりもしてくださいね）。

HTML側の構造を一切変えなくても、`` になった瞬間、中の引用符が英語圏のスタイリッシュな「“ ”」に自動で切り替わります。
CSS側で「どの言語のときはどう振る舞うべきか」をあらかじめ定義しておくだけで、あとはブラウザが賢く判断してくれるんです。これがプロの現場でも重宝される理由です。

—

4. 現場のシニアからのちょっとしたアドバイス（つまずきポイント）

最後に、初学者の人がここで「あれ？」とハマりがちなポイントをこっそりシェアしておきますね。

1. 部分一致でも動く賢さ
`:lang(en)` と書くと、完全一致の `lang=”en”` だけでなく、アメリカ英語の `lang=”en-US”` や、イギリス英語の `lang=”en-GB”` も自動的にキャッチしてくれます。「方言」まで優しく包み込んでくれる包容力があるんですね。
2. CSSは「継承」される
言語の指定は、一番上の `` タグだけでなく、特定の段落やエリアごとに `