マルチ言語サイトで、同じスタイルをそれぞれ用意するのではなく、同じものを使いたいときがあります。でも、CSSに文字列を書いてある場合どうしたらいいのでしょうか？
CSSでは、サイトの言語別に分けてスタイルを適用させる方法があります。サンプルコードを使って、かんたんに誰でも分かるように解説します。
サンプルコード実行
分かる人には説明がいらないくらい簡単なので、まずはサンプルコードを実行してみましょう。
<div class="sample">
<div lang="ja">
<div class="message">lang=jaです。</div>
</div>
<div lang="ja_JP">
<div class="message">lang=ja_JPです。</div>
</div>
<div lang="en">
<div class="message">it is lang=en</div>
</div>
<div lang="en_US">
<div class="message">it is lang=en_US</div>
</div>
</div>.sample .message {
font-weight: bold;
}
.sample .message:lang(ja) {
color: rgba(255, 144, 130, 0.7);
}
.sample .message:lang(ja_JP) {
color: rgba(255, 130, 165, 0.7);
}
.sample .message:lang(en) {
color: rgba(130, 215, 255, 0.7);
}
.sample .message:lang(en_US) {
color: rgba(130, 255, 144, 0.7);
}
かんたんですね。HTMLの言語別にフォントカラーを設定しました。
HTMLとCSSを見て、説明がいらない人もいるかもしれませんが、解説します。
【解説】:lang() 言語を指定してスタイルを適用する
:lang()は疑似クラスです。とくに新しいものでもなく2011年から使える機能。名前のまんまですが、言語を指定してその言語の固有のスタイルを適用させます。
指定する文字列はHTMLのlang属性の値です。"ja", "en"など。
サンプルでは、lang属性を<div>タグにつけていますが、ふつうは<html>タグについています。そのlang属性の内容でCSSの処理が分岐します。
サンプルで1つ気づいたでしょうか？ 疑似クラスをつけている要素はlang属性をつけていないdivの"message"クラスです。それでもCSSのスタイルを分けることができました。
これはlang属性は継承するという特長を利用しています。ふつうは<html>タグ以外にlang属性をつけないので、CSSではどの要素に:lang疑似クラスをつけても、ぜんぶ<html>タグのlang属性を見て分岐します。
サンプルのように、<html>タグ以外にlang属性をつけることはないです。
というか『なんだこれは！ふざけるな！ど素人か！』と激怒されるくらいやらないこと。そして、<html>タグにlang属性を必ずつけるのもHTMLコーディングの常識です。
サンプルは:lang疑似クラスの機能を見るためにわざとつけています。
HTMLのlang属性は子孫タグに継承します。サンプルのように、途中でlang属性をつけると、その子孫タグは書き換えたlang属性になります。
サンプルでは、<html>タグのlang属性が書き換えられています。
【解説】ちょっとした応用
サンプルでは、スタイルを適用させたい言語を指定しました。でも、『日本語以外』『英語以外』などで指定したいこともあります。
ぼくは、日本語以外を結構使います。
そういう場合は、否定の疑似クラス（:not()）を組み合わせて使いましょう。
// 日本語以外にスタイル適用
.message:not(:lang(ja)), .message:not(:lang(ja_JP)) {
...
}まとめ
今回、サイトの言語を指定してスタイルを適用させる方法をご紹介しました。
とてもかんたんなので説明はいらないくらいですが、初めての人に向けて書いてみました。
一目瞭然にむりやり説明を書いたので、うまく説明できているか心配ですが、もともと簡単なものなので大丈夫かなとも思います。
:lang(**) -> 言語を指定してスタイル適用
:not(:lang(**)) -> 指定言語以外にスタイル適用
