htmlタグ｜bdo・bdiと文字方向（dir属性）

ホームページ（ウェブサイト）を制作する際、日本語や英語のように左から右へ読む言語だけで構成されている場合は、文字の方向について深く考える機会は少ないかもしれません。しかし、事業が拡大して多言語展開を見据えたり、様々な言語を使用するユーザーが自由に情報を入力できるシステムを構築したりする場面では、文字の進行方向を正確に制御する設計が重要になります。アラビア語やヘブライ語のように右から左へ読む言語が混在したとき、ブラウザは「双方向テキスト（Bi-Directional text）」という複雑な処理を行います。この処理を適切にコントロールせずに放置すると、文章の表示順序が意図せず入れ替わったり、細かく調整したCSSのレイアウトが大きく崩れたりする原因になります。

このような文字方向の制御を行うためのHTMLタグとして、「bdoタグ」と「bdiタグ」が存在します。これらは用途が非常によく似ており、別々のものとして学習すると、実際の制作現場でどちらをいつ使えばいいのか迷ってしまいがちです。より専門的には、これら二つのタグを単体で理解しようとするのではなく、HTMLのグローバル属性である「dir属性（書字方向）」という共通のテーマのもとで、ひとつの統合的な知識として把握することが推奨されます。

文字の方向を強制的に上書きするbdoタグと、周囲の書字方向から影響を切り離すbdiタグの根本的な違いを解説します。また、現代のホームページ（ウェブサイト）構築において、動的に出力されるユーザー名などを安全に表示するための実践的なアプローチについても詳しくお伝えします。タグの役割を対比させながら読み進めることで、マイナーながらもレイアウトの安定性に直結する双方向テキスト制御の全体像を明確に掴んでいただけます。

bdo

<bdo></bdo>

ホームページ制作（ウェブサイト制作）の際に使用する<bdo>タグについてのご説明です。

ホームページ制作において<bdo>タグを使用することによって、標準では左端から右方向へと記述されるテキスト文字の表記方法を任意の方向へと変更することができます。

<bdo> 表記方法の上書き、文字表記の方向を指定

bi-directional override（バイディレクショナルオーバーライド）。ホームページ制作において<bdo>タグを使用することで、ウェブページ内の文字表記の方向を指定することができます。基本的には左端から右方向にテキストが並んでいきますが、このテキスト表記の方向を変更する場合に使用します。

ホームページ制作での<bdo>タグの使われ方

ホームページでも通常は左から右へとテキストは記述されるため、主に右から左に記述する言語を表記する場合に使用します。外国語サイト制作の際に使用することがあると考えられます。

dir

文字表記の方向

dir=””

rtl

右から左

ltr

左から右

<bdo></bdo>

文字の方向を制御する仕組みの全体像とdir属性

bdoタグやbdiタグの具体的な機能に触れる前に、まずは大前提となる文字方向（書字方向）のルールと、それを制御するためのHTML側の仕組みを整理します。

左から右へ進む言語と右から左へ進む言語の混在

日本語や英語は画面の左から右に向かって文字が並びます。一方で、世界には右から左へ文字を読み書きする言語圏も存在します。これらが同じページ内や同じ段落内に混ざり合った状態を双方向テキストと呼びます。ブラウザは文字コードなどから自動的に方向を判別して表示しようとしますが、複雑な文脈や記号が混ざると、この自動判定が誤動作を起こし、文章の並びが想定外の形になってしまうことがあります。

グローバル属性であるdir属性の役割と設定値

こうしたブラウザの自動判定に頼るのではなく、制作者側で明示的に文字の方向を指示するために用意されているのがdir属性です。これはHTMLのグローバル属性であり、ほぼすべての要素に付与することが可能です。左から右を指定する「ltr」と、右から左を指定する「rtl」があり、これを基準にして全体の文字の流れる方向を定めます。

周囲への影響を隔離するbdiタグの実践的な活用

現代のホームページ（ウェブサイト）構築において、より使用頻度が高く実用的なのがbdiタグ（Bi-Directional Isolation）です。隔離を意味するこのタグがなぜ重要になるのか、具体的な使用場面を交えて解説します。

動的に出力されるテキストを安全に表示する

例えば、ブログのコメント欄やフォーラム機能など、利用者が任意のユーザー名を登録できるシステムを構築したとします。もし海外のユーザーがアラビア語などで名前を登録し、その名前を日本語の文章の途中に埋め込んで表示させた場合、周囲の日本語の記号やテキストまで右から左の表示規則に巻き込まれてしまう不具合が起こります。

隔離によってレイアウトの崩壊を防ぐ仕組み

このような事態を防ぐためにbdiタグを使用します。動的に出力されるテキストをbdiタグで囲むことで、その部分だけが独立した空間として扱われます。中の文字が右から左へ進む言語であったとしても、その外側にある日本語や英語の並び順には一切影響を与えません。逆に、外側の言語ルールが内側に影響することもなくなります。これにより、多様な言語が入力される可能性のある事業用ホームページでも、精緻に組み上げたレイアウトや文字の配置を安全に保つことができます。

テキストの書字方向を強制的に上書きするbdoタグの役割

bdiタグが隔離を目的としているのに対し、bdoタグ（Bi-Directional Override）は文字の進行方向を意図的に上書きするためのものです。現代のウェブ標準においては特殊な用途に限られますが、その特性を正確に理解しておくことが重要です。

dir属性とのセット利用が必須となる仕様

bdoタグを使用する際は、必ず先ほど解説したdir属性をセットで記述する必要があります。単にタグで囲むだけでは機能せず、dir属性を指定することで、ブラウザが元々持っている文字方向の自動判定を強制的に無視させます。これにより、本来は左から右へ読む言語を、無理やり右から左へ表示させるといった強力な制御が可能になります。

現在の制作現場における限定的な使用ケース

強制的な上書きを行うbdoタグは、通常の文章表示で使うことはほとんどありません。利用される場面は極めて稀であり、例えば文字の方向に関するプログラムのテスト画面を作るときや、特定の学術的な文献を忠実に再現する場合などに限定されます。日常的なホームページ（ウェブサイト）の運用やユーザーコンテンツの表示において、文字化けや表示順の狂いを直す目的であれば、bdoタグではなくbdiタグを採用するのが正しい設計です。

双方向テキストの制御をテーマとして統合するメリット

似たような機能を持つタグを個別のものとして暗記するのではなく、全体の構造として捉えることで、より実戦的なスキルとして定着させることができます。

適切な使い分けがもたらす質の高いユーザー体験

bdoタグによる強制上書きと、bdiタグによる隔離。これらを双方向テキストの制御という一つのテーマのもとで対比させて理解することで、場面に応じた正しいタグの選択ができるようになります。結果として、閲覧環境や入力される言語に左右されない、堅牢で高品質なホームページ（ウェブサイト）を提供することにつながります。細かな部分ではありますが、こうした基礎的なHTMLタグの正確な運用が、長期的な事業活動を支えるシステム基盤の安定性に大きく貢献していきます。

ホームページ制作・SEOの1ポイント

ホームページ制作で、1ページだけ特殊な扱いをしたい場合やSEOの厳密な設定をしたい場合でも、WordPressなどのCMSなどを利用していると、設定が各ページ共通となっているため難しい場合があります。

そうした場合は、特殊扱いのコードを直書きなどで挿入するか、いっそそのページだけ静的HTMLで制作するというのも一つの方法として考えることができます。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法