故あって言語で切り替わるページを書いたのですが、その際、言語名＋国旗をタグで表現できるCSSライブラリ Languages for Bootstrap 3 を見つけたので紹介します。とても便利です。

##インストール

Languages for Bootstrap 3 のインストールは bower を使います。

bower install bootstrap-language

必要なファイルは languages.min.css および languages.png です。これらのファイルをページからアクセスできるディレクトリへコピーします。同一ディレクトリである必要があります。

##ライブラリの読み込み

使いたいページで .css ファイルを読み込みます。

<link href="css/languages.min.css" rel="stylesheet" />

##言語タグ

タグで言語を指定します。言語は lang で指定します。

<span class="lang-sm lang-lbl" lang="ja"></span>

表記方法は lang-lbl, lang-lbl-en, lang-lbl-full クラスで指定します。

lang-lbl は現地語で、lang-lbl-en は英語で、lang-lbl-full は英語＋現地語での表記を指定できます。

<span class="lang-sm lang-lbl" lang="ja"></span>
<span class="lang-sm lang-lbl-en" lang="ja"></span>
<span class="lang-sm lang-lbl-full" lang="ja"></span>

サイズは lang-xs, lang-sm, lang-lg で指定します。

<span class="lang-xs lang-lbl" lang="ja"></span>
<span class="lang-sm lang-lbl-en" lang="ja"></span>
<span class="lang-lg lang-lbl-full" lang="ja"></span>

このタグのおかげで言語切り替えメニューがきっちりかけました。感謝がてら記事を書いてみました。