ワールド ワイド ウェブは、世界中の誰もがアクセスでき、まさに名義どおりのものです。 つまり、所在地、使用しているデバイス、使用言語に関係なく、インターネットにアクセスできる人なら誰でもウェブサイトを利用できる可能性があります。
レスポンシブ デザインの目標は、コンテンツを誰でも利用できるようにすることです。この理念を人間の言語に適用することが、国際化の原動力となります。つまり、世界中の視聴者に向けてコンテンツやデザインを準備することです。
論理プロパティ
英語は左から右、上から下に記述しますが すべての言語がこのように記述されるわけではありませんアラビア語やヘブライ語のように、右から左に読む言語もあれば、日本語の書体によっては、横方向ではなく縦方向に読むものもあります。これらの書き込みモードに対応するために CSS に論理プロパティが導入されました
CSS を記述する場合、「左」、「右」、「上」、「下」などの方向性を示すキーワードを使用していたかもしれません。これらのキーワードは、ユーザーのデバイスの物理的なレイアウトを指します。
一方、論理プロパティは、コンテンツの流れに関連するボックスの端を指します。 書き込みモードが変更されると、それに応じて論理プロパティを使用して記述された CSS が更新されます。これは、方向プロパティには当てはまりません。
方向プロパティ margin-left は常にコンテンツ ボックスの左側のマージンを参照し、論理プロパティ margin-inline-start はコンテンツ ボックスの左側のマージンを左から右に記述します。コンテンツ ボックスの右側のマージンは右から左に記述します。
さまざまな書き込みモードにデザインを適応させるには、方向プロパティを使用しないでください。代わりに論理プロパティを使用してください。
.byline {
text-align: right;
}
.byline {
text-align: end;
}
CSS に left や right などの特定の方向値がある場合、対応する論理プロパティがあります。かつては margin-left がありましたが、今では margin-inline-start もあります。
英語のように、文章が左から右に流れる言語では、inline-start は「left」に対応し、inline-end は「right」に対応します。
同様に、英語のようなテキストが上から下に記述される言語では、block-start は「top」に対応し、block-end は「bottom」に対応します。
CSS で論理プロパティを使用する場合は、同じスタイルシートをページの翻訳に使用できます。 ページを右から左または下から上に表記する言語に翻訳しても、それに応じてデザインが調整されます。 言語ごとに別々のデザインを作る必要はありません。論理プロパティを使用することで、デザインがあらゆる書き込みモードに対応します。つまり、言語ごとに別々のデザインを作成する手間をかけずに、より多くのユーザーにデザインを届けることができます。
グリッドや Flexbox などの最新の 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