かんたんCSS 言語別にスタイルを適用する(:lang疑似クラス)

  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

マルチ言語サイトで、同じスタイルをそれぞれ用意するのではなく、同じものを使いたいときがあります。でも、CSSに文字列を書いてある場合どうしたらいいのでしょうか?

CSSでは、サイトの言語別に分けてスタイルを適用させる方法があります。サンプルコードを使って、かんたんに誰でも分かるように解説します。

サンプルコード実行

分かる人には説明がいらないくらい簡単なので、まずはサンプルコードを実行してみましょう。

HTML
<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>
CSS
.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 result
lang=jaです。
lang=ja_JPです。
it is lang=en
it is lang=en_US

かんたんですね。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(**)) -> 指定言語以外にスタイル適用

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!