HTMLのtranslate属性で要素のコンテンツを翻訳するかどうかを指定する方法

HTMLのtranslate属性とは

HTMLのtranslate属性を使用すると、その要素のコンテンツを翻訳するかどうかを指定できます。Google翻訳などの機械翻訳ツールでページを翻訳する際に、ブランド名、固有名詞、コードなど、翻訳してほしくない部分を除外したい場合に特に便利な属性です。

translate属性には、以下の2つの値を指定できます。

属性値	説明
yes	コンテンツを翻訳します。
no	コンテンツを翻訳しません。

特定の単語やフレーズを翻訳されたくない場合は、その要素のtranslate属性に「no」を指定します。

<p translate = "no">This won’t get translated.</p>

このように記述すると、この段落内のテキストは翻訳ツールによって翻訳されず、原文のまま表示されます。

逆に、翻訳ツールの自動判定にかかわらず確実に翻訳してほしい要素には「yes」を指定します。なお、translate属性を指定しない場合、既定ではコンテンツは翻訳対象（yes）として扱われます。

translate属性は、製品名や会社名、プログラムのコード断片、引用符など、翻訳すると意味が損なわれるテキストを保護したい場合に活用すると効果的です。ページ全体の翻訳品質を向上させるために、適切な箇所に設定しておきましょう。

HTMLで要素を読み取り専用にする方法｜readonly属性の使い方を解説
HTMLのフォーム要素を読み取り専用（編集不可）に設定するには、readonly 属性を使用します。この属性が指定された入力フィールドは、ユーザーが内容を書き換えることができなくなりますが、値はフォーム送信時にサーバーへ引き続き送信されます。 readonly属性の基本例以下のコードでは、テキスト入力欄に readonly 属性を設定し、ユーザーが値「Amit」を編集できないようにしています。 <!DOCTYPE html> <html> <body> <h2>ログイン<
HTMLのiframe要素に表示するページのコンテンツをsrcdoc属性で指定する方法
srcdoc属性を使用すると、<iframe>のフレーム内に表示するページのHTMLコンテンツを直接指定できます。この属性の値として記述したHTMLコードが、iframeの中にそのままレンダリングされるため、別ファイルを読み込まずにインラインでコンテンツを埋め込むことが可能です。 srcdoc属性の実装例以下のコードは、srcdoc属性を使ってiframe内にHTMLコンテンツを表示する基本的な例です。 <!DOCTYPE html> <html> <body> <iframe srcdoc = <h2>Tutoria