translate属性

Webページは、デフォルトで翻訳可能になっていますが、翻訳しないようにもできます。

本ページでは、グローバル属性のtranslateについて説明します。

translateとは

translateを使うと、要素のコンテンツや属性の内容を、翻訳しないようにできます。

値は、以下が使えます。

【translateの値】
意味
翻訳する
yes 翻訳する
no 翻訳しない

html要素のデフォルトは、yes(翻訳する)です。その他の要素では、継承します。

利用例

translateの利用例は、以下のとおりです。

【translate利用例】
<html lang="en">
<pre translate="no">
var yamada = {
  address: "Tokyo",
  birthday: 2001
};
</pre>
<html>

上記をGoogle翻訳で翻訳すると、以下のように表示されます。

利用例で示したとおりに表示されています。

このように、プログラムなどは、翻訳されない方が良いと言えます。

もし、translate属性を使わなかった場合は、以下のように表示されます。

利用例で示した中で、addressが住所、Tokyoが東京、birthdayが誕生日と翻訳して表示されています。

なお、今回のケースでは以下のようにcode要素を使うことで、translate属性を使わなくても翻訳されなくなりました。

【code要素利用例】
<html lang="en">
<pre>
<code>
var yamada = {
  address: "Tokyo",
  birthday: 2001
};
</code>
</pre>
<html>

code要素は、プログラムのソースコードなどを示します。

translate属性は、日本語の場合でも英語などに翻訳されたくない部分で使えます。

翻訳される属性

デフォルトでは、以下の属性も翻訳対象です。

  • th要素のabbr属性
  • area、img、input要素のalt属性
  • meta要素のcontent属性
  • a、area要素のdownload属性
  • optgroup、option、track要素のlabel属性
  • lang属性
  • input、textarea要素のplaceholder属性
  • iframe要素のsrcdoc属性
  • style属性
  • title属性
  • input要素でtypeがbutton、resetのvalue属性

これらも、translate属性で翻訳しないようにできます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
translate × ×
【スマートフォン】
項目 Sa An Op Ch Fx Sm
translate ×
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。