【HTML Living Standard】translate属性の使い方
translate属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
translateプロパティは、HTML要素の内容がブラウザやその他の翻訳サービスによる自動翻訳の対象となるかどうかを制御するグローバル属性です。このプロパティはすべてのHTML要素に設定でき、多言語対応のウェブサイトにおいて特に重要な役割を果たします。
設定できる値は「yes」と「no」の二種類です。
「translate="yes"」と指定した場合（または属性値を省略した場合）、その要素のテキスト内容は自動翻訳の対象となります。これは、多くのテキストコンテンツに適用されるデフォルトの動作です。
一方、「translate="no"」と指定すると、その要素およびその子孫要素に含まれるテキストは、自動翻訳の対象から明示的に除外されます。この指定は、固有名詞、技術用語、プログラミングコード、製品名、商標など、翻訳によって意味が損なわれたり誤解を招いたりする可能性のあるコンテンツに特に有効です。翻訳すべきでない情報を保護することで、情報の正確性を確保し、意図しない誤訳を防ぐことができます。
このプロパティを適切に活用することで、国際的なユーザーに対する情報伝達の精度を高め、ウェブサイト全体のユーザビリティ向上に貢献します。
構文(syntax)
1<p translate="no">コンテンツ</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML translate="no" で翻訳を制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML translate属性のサンプル</title> 7</head> 8<body> 9 10 <h1>HTML translate属性のデモンストレーション</h1> 11 12 <!-- translate="yes" がデフォルトのため、この段落はブラウザの自動翻訳対象になります。 --> 13 <p>このテキストは、ブラウザの自動翻訳機能によって翻訳される可能性があります。</p> 14 15 <!-- translate="no" を指定すると、この段落はブラウザの自動翻訳機能の対象外となります。 --> 16 <p translate="no">This text should not be translated automatically. 例えば、製品名や固有名詞など、翻訳されると意味が変わってしまう場合にこの属性を使います。</p> 17 18 <!-- コードスニペットなど、翻訳されるべきではないコンテンツにも translate="no" を使用すると良いでしょう。 --> 19 <p>次のコードは翻訳されません: <code translate="no">console.log("Hello World");</code></p> 20 21</body> 22</html>
HTMLのtranslate属性は、Webページ内の要素のテキストがブラウザの自動翻訳機能の対象となるかどうかを制御するグローバル属性です。この属性には引数や戻り値はなく、その要素の翻訳可否を示す値を設定します。
設定できる値は「yes」または「no」です。「yes」はテキストを自動翻訳の対象とし、「no」は対象外とします。何も指定しない場合のデフォルトは「yes」であり、通常、テキストは自動翻訳の対象となります。
サンプルコードでは、最初の段落がデフォルトで自動翻訳の対象となることを示しています。一方、2番目の段落ではtranslate="no"が明示されており、このテキストはブラウザによって自動翻訳されません。これは製品名や固有名詞、専門用語など、翻訳で意味が変わる可能性のあるコンテンツに有効です。
また、プログラミングコードも翻訳されるべきではないため、3番目の例のように<code>タグにtranslate="no"を適用することで、コードが原文のまま正確に表示されます。この属性を使用することで、Webサイトの情報の正確性を保ち、ユーザーに適切な情報を提供できます。
HTMLのtranslate属性は、ブラウザの自動翻訳機能による要素の翻訳を制御します。この属性を省略した場合やtranslate="yes"を指定した場合は、その要素内のテキストは自動翻訳の対象となります。初心者が特に注意すべき点は、製品名や固有名詞、技術用語、プログラミングコードなど、翻訳されると意味が変わってしまったり、誤解を招いたりする可能性のある内容には、必ずtranslate="no"を指定することです。これにより、ユーザーに正確な情報を伝え、ウェブサイトの信頼性を保つことができます。多言語対応が求められるシステム開発では、この適切な利用が非常に重要です。
HTML translate属性で翻訳を制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML translate属性のサンプル</title> 7</head> 8<body> 9 10 <!-- 11 translate="yes" は、ブラウザがこの要素の内容を翻訳しても良いことを示します。 12 これはほとんどの要素におけるデフォルトの動作です。 13 --> 14 <p translate="yes">このテキストはブラウザの翻訳機能の対象となります。</p> 15 16 <!-- 17 translate="no" は、ブラウザがこの要素の内容を翻訳すべきではないことを示します。 18 ブランド名、固有名詞、技術用語、コードスニペットなど、 19 翻訳されると意味が変わったり不正確になる可能性のある内容に適用します。 20 --> 21 <p translate="no">Brand name: "SuperApp Pro"</p> 22 <p translate="no"><code>const message = "Hello, World!";</code></p> 23 <p translate="no">ユーザーは「Settings」メニューから言語設定を変更できます。</p> 24 25</body> 26</html>
HTMLのtranslate属性は、ウェブページ上のテキストがブラウザの自動翻訳機能の対象となるかを制御するグローバル属性です。この属性に引数や戻り値はありません。
設定できる値はyesとnoの二つです。
translate="yes"は、その要素内のテキストが翻訳機能の対象となることを示します。これはほとんどのHTML要素でデフォルトの動作であり、通常の文章など、翻訳されても問題ない内容に適用します。
一方、translate="no"は、要素内のテキストを翻訳機能の対象外とします。ブランド名、固有名詞、技術用語、プログラミングコードスニペットなど、翻訳されると意味が変わったり不正確になったりする可能性のある内容に適用することで、情報の正確性を維持できます。
サンプルコードでは、translate="yes"で翻訳対象のテキストと、translate="no"で翻訳対象外とするブランド名やコードの例が示されており、具体的な使い分けを学ぶことができます。
このtranslate属性は、ブラウザの自動翻訳機能が要素内のテキストを翻訳するかどうかを制御します。translate="yes"は翻訳の対象としますが、ほとんどのHTML要素でこれがデフォルト動作のため、通常は明示的な記述は不要です。一方、translate="no"は翻訳の対象外とします。ブランド名、固有名詞、技術用語、コードスニペットなど、翻訳されると意味が変わったり不正確になったりする可能性のある内容に適用することで、情報の一貫性を保ち、ユーザーに正しい情報を届けることができます。不必要な翻訳を避け、ユーザー体験を向上させるために適切に利用しましょう。