HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのnavigator.languageプロパティとは？ブラウザの言語を取得・表示する方法

JavaScriptのnavigator.languageプロパティは、ブラウザに設定されている言語（ロケール）を文字列として返します。たとえば、日本語環境では「ja」、アメリカ英語の環境では「en-US」が返されます。ユーザーの言語設定に応じて表示内容を切り替えたい場合など、多言語対応サイトの実装で役立つプロパティです。

構文

navigator.languageプロパティの基本構文は以下のとおりです。

navigator.language

引数は不要で、呼び出すだけで現在のブラウザの言語バージョンを取得できます。

それでは、実際にnavigator.languageプロパティを使用した具体例を見ていきましょう。

サンプルコード

以下の例では、「ブラウザの言語を表示」ボタンをクリックすると、navigator.languageプロパティで取得した言語情報が画面に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.5rem;
        color: #fff;
    }
</style>
<body>
<h1>HTML navigator.languageプロパティのデモ</h1>
<button class="btn" onclick="display()">ブラウザの言語を表示</button>
<div class="show"></div>
<script>
    function display() {
        document.querySelector(".show").innerHTML = "ブラウザの言語バージョン：" + navigator.language;
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、オレンジ系のグラデーション背景のページ中央に赤いボタンが表示されます。

HTMLのnavigator.languageプロパティとは？ブラウザの言語を取得・表示する方法

この「ブラウザの言語を表示」ボタンをクリックすると、ブラウザに設定されている言語バージョンが画面に表示されます。日本語環境の場合は「ja」と表示されます。

HTMLのnavigator.languageプロパティとは？ブラウザの言語を取得・表示する方法

補足：関連プロパティについて

なお、ユーザーが優先する言語の一覧をまとめて取得したい場合は、配列を返すnavigator.languagesプロパティを利用すると便利です。また、navigator.languageが返す値は「ja」「en-US」のようなBCP 47形式の言語タグである点も押さえておきましょう。

  1. HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

    navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値（boolean）を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。 構文 基本的な構文は以下のとおりです。 navigator.onLine 戻り値は次のようになります。 オンラインの場合：true オフラインの場合：false サンプルコード ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオ

  2. HTMLとXMLの違いとは？特徴・コード例・比較表で徹底解説

    HTMLとは HTML（HyperText Markup Language／ハイパーテキスト・マークアップ言語）は、Webページの構造を記述するために使われる言語です。HTML文書はさまざまな「HTML要素」で構成されており、各要素はHTMLタグとその内容によって成り立っています。 HTMLはハイパーテキスト言語であるため、リンクを通じて複数のドキュメント同士をつなぎ合わせることができます。現在の最新バージョンはHTML5です。HTMLは静的な言語であり、軽微なエラーは無視して表示される点や、終了タグの記述が必須ではない点が大きな特徴です。 HTMLのコード例 <!DOCTYPE htm