文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 多言語切り替え

CSSおよびJavaScriptで言語切り替え

一般的に多言語対応したサイトは、言語ごとに専用ページを持っており、サーバ側で言語に沿ったページを表示しています。
当ページでは、html内の一部に「leng="ja"」で多言語を持っている場合の切り替えサンプルとなります。

多言語の切り替えがCSSのみでも可能ですが、CSSは親要素の戻れないなど制約も多く発生します。このため、JavaScriptを使用した言語切り替えのサンプルも掲載しています。

CSSのみで言語切替を行う

CSSのみで言語の切り替えを行うサンプルです。
CSSだけでも言語の切り替えは可能ですが、CSSは親要素に戻れないため兄弟要素、子・孫要素に指定されている言語のみ変更可能です。
下のJavaScriptを使用した言語切り替えの方が取り扱いしやすい場合があります。

言語の切り替えはCSSのセレクタを使用します。

Language switching uses CSS selector.

语言切换使用CSS选择器。

サンプルは日本語と英語の切り替えを行っています。

The sample is switching between Japanese and English.

样本正在日语和英语之间切换。

使用したhtml
 
<div id="langChenge">
  <input type="radio" name="land" id="langJa" checked>
  <input type="radio" name="land" id="langEn">
  <input type="radio" name="land" id="langZh">
 
  <label for="langJa">
    <span lang="ja">日本語</span>
    <span lang="en">Japanese</span>
    <span lang="zh">日本</span>
  </label>
  <label for="langEn">
    <span lang="ja">英語</span>
    <span lang="en">English</span>
    <span lang="zh">英语</span>
  </label>
  <label for="langZh">
     <span lang="ja">中国語</span>
     <span lang="en">Chinese</span>
     <span lang="zh">中文</span>
  </label>
 
  <div>
    <p lang="ja">言語の切り替えはCSSのセレクタを使用します。</p>
    <p lang="en">Language switching uses CSS selector.</p>
    <p lang="zh">语言切换使用CSS选择器。</p>
    <p lang="ja">サンプルは日本語と英語の切り替えを行っています。</p>
    <p lang="en">The sample is switching between Japanese and English.</p>
    <p lang="zh">样本正在日语和英语之间切换。</p>
  </div>
 
</div>
 
生成したCSS
<style type="text/css">
 /* === ラジオボタンは非表示 ================== */
#langChenge input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#langChenge label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 2px 6px;
}
 
 /* === 選択されていない言語は非表示にする ==== */
#langJa:not(:checked) ~ * *:lang(ja) {
  display    : none;
}
#langEn:not(:checked) ~ * *:lang(en) {
  display    : none;
}
#langZh:not(:checked) ~ * *:lang(zh) {
  display    : none;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#langJa:checked ~ label[for="langJa"] {
  background : #ffa64d;
}
#langEn:checked ~ label[for="langEn"] {
  background : #ffa64d;
}
#langZh:checked ~ label[for="langZh"] {
  background : #ffa64d;
}
</style>
ページTOP
広告
広告

JavaScriptで言語の切り替えを行う

サンプルは、切り替え箇所にclassを設定しています。
ブラウザのデフォルト言語で初期表示を行っています。

言語の切り替えはCSSのセレクタを使用します。

Language switching uses CSS selector.

语言切换使用CSS选择器。

サンプルは日本語と英語の切り替えを行っています。

The sample is switching between Japanese and English.

样本正在日语和英语之间切换。

 
<div id="sample1">
  <input type="radio" name="langKbn" id="sJa" onClick="langSet('ja')" checked>
  <label for="sJa">
    <span class="langCng" lang="ja">日本語</span>
    <span class="langCng" lang="en">Japanese</span>
    <span class="langCng" lang="zh">日本</span>
  </label>
 
  <input type="radio" name="langKbn" id="sEn" onClick="langSet('en')">
  <label for="sEn">
    <span class="langCng" lang="ja">英語</span>
    <span class="langCng" lang="en">English</span>
    <span class="langCng" lang="zh">英语</span>
  </label>
 
  <input type="radio" name="langKbn" id="sZh" onClick="langSet('zh')">
  <label for="sZh">
    <span class="langCng" lang="ja">中国語</span>
    <span class="langCng" lang="en">Chinese</span>
    <span class="langCng" lang="zh">中文</span>
  </label>
 
  <div>
    <p class="langCng" lang="ja">言語の切り替えはCSSのセレクタを使用します。</p>
    <p class="langCng" lang="en">Language switching uses CSS selector.</p>
    <p class="langCng" lang="zh">语言切换使用CSS选择器。</p>
 
    <p class="langCng" lang="ja">サンプルは日本語と英語の切り替えを行っています。</p>
    <p class="langCng" lang="en">The sample is switching between Japanese and English.</p>
    <p class="langCng" lang="zh">样本正在日语和英语之间切换。</p>
  </div>
</div>
 
<style type="text/css">
 /* === ラジオボタンは非表示 ================== */
#sample1 input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#sample1 label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 2px 6px;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#sample1 input[type="radio"]:checked + label {
  background : #ffa64d;
}
</style>
<script>
 // =========================================================
 //      画面が開かれたときの初期設定
 // =========================================================
window.onload = function() {
 
  // --- ブラウザのデフォルト言語を取得して初回の表示 ----- 
  var wDef = (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
  langSet(wDef);
 
}
 // =========================================================
 //      選択された言語のみ表示
 // =========================================================
function langSet(argLang){
 
  // --- 切り替え対象のclass一覧を取得 ----------------------
  var elm = document.getElementsByClassName("langCng");
 
  for (var i = 0; i < elm.length; i++) {
 
    // --- 選択された言語と一致は表示、その他は非表示 -------
    if(elm[i].getAttribute("lang") == argLang){
      elm[i].style.display = '';
    }
    else{
      elm[i].style.display = 'none';
    }
  }
}
</style>
ページTOP

注意事項

画面内の一部の言語を切り替える例となります。一般的には画面の言語指定「<html lang="ja">」を含めて、サーバ側で切り替えを行います。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン