特定の言語でのスタイルを定義する - lang疑似クラスの利用 - CSS

スタイルシートで特定の言語のスタイルを定義するコードを紹介します。

書式

特定の言語でのスタイルを指定する場合

:lang((言語名)){
(スタイル記述)
}

と記述します。

特定のタグで言語指定をする場合

(タグ名):lang((言語名)){
(スタイル記述)
}

特定のクラスで言語指定をする場合

.(クラス名):lang((言語名)){
(スタイル記述)
}

特定のIDで言語指定をする場合

#(ID名):lang((言語名)){
(スタイル記述)
}

例

コード

LangSelector.css

h1:lang(en) {
  font-size:18px;
  color:blue;
}

h1:lang(ja) {
  font-size:18px;
  color:red;
}

LangSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="LangSelector.css" />
</head>
<body>
    <h1 lang="ja">日本語です (Japanese)</h1>
    <h1 lang="en">英語です (English)</h1>

</body>
</html>

表示結果

上記のHTMLファイルを表示します。下図の画面が表示されます。lang属性の値によって表示スタイルが異なることがわかります。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次