ウェブは世界中のすべての人が利用できます。その名前が示すとおりです。つまり、ウェブサイトは、インターネットにアクセスできる人であれば、場所、使用しているデバイス、話す言語に関係なく、誰でも利用できる可能性があるということです。
レスポンシブ デザインの目的は、コンテンツをすべてのユーザーが利用できるようにすることです。この哲学を人間の言語に適用したものが、国際化の原動力です。国際化とは、国際的な視聴者向けにコンテンツとデザインを準備することです。
論理プロパティ
英語は左から右、上から下に書きますが、すべての言語がこの方法で書かれるわけではありません。アラビア語やヘブライ語のように右から左に読む言語もあれば、日本語の書体のように横書きではなく縦書きで読むものもあります。これらの書き込みモードに対応するため、CSS に論理プロパティが導入されました。
CSS を記述したことがある方は、「left」、「right」、「top」、「bottom」などの方向キーワードを使用したことがあるかもしれません。これらのキーワードは、ユーザーのデバイスの物理的なレイアウトを指します。
一方、論理プロパティは、コンテンツのフローに関連するボックスの端を指します。書き込みモードが変更されると、論理プロパティで記述された CSS がそれに応じて更新されます。方向プロパティでは、このようにはなりません。
方向プロパティ margin-left は常にコンテンツ ボックスの左側のマージンを参照しますが、論理プロパティ margin-inline-start は左から右の言語ではコンテンツ ボックスの左側のマージンを参照し、右から左の言語ではコンテンツ ボックスの右側のマージンを参照します。
デザインをさまざまな書き込みモードに対応させるには、方向プロパティを使用しないでください。代わりに論理プロパティを使用してください。
.byline { text-align: right; }
.byline { text-align: end; }
CSS に left や right などの特定の方向の値がある場合、対応する論理プロパティがあります。以前は margin-left のみでしたが、現在は margin-inline-start もあります。
テキストが左から右に流れる英語などの言語では、inline-start は「左」、inline-end は「右」に対応します。
同様に、英語のようにテキストが上から下に書かれる言語では、block-start は「上」、block-end は「下」に対応します。
CSS で論理プロパティを使用している場合は、ページの翻訳に同じスタイルシートを使用できます。ページが右から左または下から上に書かれる言語に翻訳された場合でも、デザインはそれに応じて調整されます。言語ごとに個別のデザインを作成する必要はありません。論理プロパティを使用すると、デザインはすべての書き込みモードに対応します。つまり、言語ごとに別々のデザインを作成する手間をかけずに、より多くのユーザーにデザインを届けられるということです。
グリッドやフレックスボックスなどの最新の CSS レイアウト手法では、デフォルトで論理的プロパティが使用されます。left や top ではなく inline-start や block-start の観点から考えると、これらの最新の手法を理解しやすくなります。
アイコンの横にテキストがある、ラベルの横にフォーム フィールドがある、といった一般的なパターンを考えてみましょう。「ラベルの右側にマージンが必要」ではなく、「ラベルのインライン軸の末尾にマージンが必要」と考えるようにします。
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
そのページが右から左に書く言語に翻訳される場合、スタイルを更新する必要はありません。html 要素で dir 属性を使用すると、右から左に読む言語でページを表示した場合の効果をシミュレートできます。値が ltr の場合は「左から右」を意味します。値「rtl」は「右から左」を意味します。
ドキュメントの方向（ブロック軸）と書き込みモード（インライン軸）のすべての順列を試す場合は、インタラクティブなデモをご覧ください。
ページの言語を識別する
html 要素の lang 属性を使用して、ページの言語を指定することをおすすめします。
<html lang="en">
この例は英語のページの場合です。さらに具体的に指定することもできます。ページで米国英語を使用していることを宣言する方法は次のとおりです。
<html lang="en-us">
ドキュメントの言語を宣言することは、検索エンジンにとって有益です。また、スクリーン リーダーや音声アシスタントなどの支援技術にも役立ちます。言語メタデータを提供することで、このような音声合成ツールがコンテンツを正しく発音できるようになります。
lang 属性は html だけでなく、任意の HTML 要素に指定できます。ウェブページで言語を切り替えた場合は、その変更を示します。この場合、1 つの単語がドイツ語です。
<p>I felt some <span lang="de">schadenfreude</span>.</p>
リンクされたドキュメントの言語を特定する
リンクで使用できる hreflang という別の属性もあります。hreflang は lang 属性と同じ言語コード表記を使用し、リンクされたドキュメントの言語を記述します。ページ全体のドイツ語翻訳版がある場合は、次のようにリンクします。
<a href="/path/to/german/version" hreflang="de">German version</a>
ドイツ語のテキストを使用してドイツ語版へのリンクを説明する場合は、hreflang と lang の両方を使用します。ここでは、「Deutsche Version」というテキストがドイツ語としてマークアップされ、リンク先もドイツ語としてマークアップされています。
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
link 要素で hreflang 属性を使用することもできます。これはドキュメントの head に記述します。
<link href="/path/to/german/version" rel="alternate" hreflang="de">
ただし、任意の要素に適用できる lang 属性とは異なり、hreflang は a 要素と link 要素にのみ適用できます。
設計で国際化を考慮する
他の言語や書き込みモードに翻訳されるウェブサイトを設計する際は、次の要素を考慮してください。
- ドイツ語など、一般的に長い単語が使われる言語もあります。インターフェースはこれらの単語に対応する必要があるため、狭い列を設計することは避けてください。CSS を使用してハイフンを導入することもできます。
line-heightの値が、アクセント記号などの発音区別符号に対応していることを確認してください。英語では問題なく表示されるテキスト行が、別の言語では重なってしまうことがあります。- ウェブフォントを使用する場合は、翻訳先の言語をカバーできる十分な文字範囲があることを確認してください。
- テキストを含む画像は作成しないでください。その場合は、言語ごとに別々の画像を作成する必要があります。代わりに、テキストと画像を分離し、CSS を使用してテキストを画像に重ねます。
国際的な視野を持つ
lang や hreflang などの属性を使用すると、HTML の国際化がより意味のあるものになります。同様に、論理プロパティを使用すると、CSS の適応性が高まります。
top、bottom、left、right の観点から考えることに慣れていると、block start、block end、inline start、inline end の観点から考えるのは難しいかもしれません。しかし、それだけの価値はあります。論理プロパティは、真にレスポンシブなレイアウトを作成するうえで重要です。
理解度をチェックしましょう
国際化に関する知識をテストします。
英語で、箱の物理的な right 側は論理的にはどちら側ですか？
block-starttop となります。block-endbottom となります。inline-startleft となります。inline-end国際化をより意味のあるものにするために、HTML に追加する必要がある属性は何ですか？
englishlanglanguagei18n