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

HTML5のtranslate属性とは？グローバル変換属性の使い方をわかりやすく解説

HTML5のtranslate属性（グローバル変換属性）とは

HTML5で利用できるtranslate属性は、要素の内容を翻訳ツール（Google翻訳など）で翻訳するかどうかを指定できるグローバル属性です。ブランド名、固有名詞、コードなど「翻訳されたくないテキスト」を明示的に指定したい場合に非常に便利です。

translate属性に指定できる値

属性値説明
yesその要素の内容は翻訳されるべきであることを示します。
noその要素の内容は翻訳されるべきではないことを示します。

具体的な使い方

特定の単語や文章を翻訳対象から除外したい場合は、translate属性に「no」を指定します。

<p translate="no">このテキストは翻訳されません。</p>

逆に、翻訳してほしいことを明示したい場合は「yes」を指定します。多くのブラウザや翻訳サービスは、この属性の指定を尊重し、翻訳の可否を判断します。ページ全体を日本語・英語など多言語で提供する際に、意図しない自動翻訳を防ぐ手段としても活用できます。

  1. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l

  2. 【HTML5】ドラッグ＆ドロップ（DnD）の実装方法をサンプルコード付きで解説

    ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティ