ワールド ワイド ウェブは世界中の誰でも利用できます。その名のとおり、 つまり インターネットにアクセスできるすべてのユーザーが ウェブサイトにアクセスできる可能性があるということです 場所、使用しているデバイス、言語に関係なく 利用できます
レスポンシブ デザインの目標は、あらゆるユーザーがコンテンツを利用できるようにすることです。 同じ理念を人間の言語に適用することが、国際化の原動力であり、世界中の視聴者に向けてコンテンツやデザインを準備することが目的です。
論理プロパティ
英語は左から右、上から下に書かれています。 すべての言語がこのように記述されているわけではありません。 アラビア語やヘブライ語など一部の言語は 右から左に記述します 日本語の書体の中には、横方向ではなく縦方向に読み上げられるものがあります。 これらのライティングモードに対応するには 論理プロパティは 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 は「right」に対応します。
同様に 英語などの言語では テキストを上から下に
block-start は「top」に対応します。block-end は「ボトム」に対応します。
CSS で論理プロパティを使用する場合、ページの翻訳に同じスタイルシートを使用できます。 ページが右から左または下から上に書かれた言語に翻訳されていても、それに応じてデザインが調整されます。 言語ごとに個別のデザインを作成する必要はありません。 論理プロパティを使用することで、あらゆる書き込みモードに応答するデザインになります。 つまり、言語ごとに個別のデザインを作成することに時間を費やすことなく、より多くのユーザーにリーチできます。
grid や 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-endHTML を多言語対応にするには、どの属性を HTML に追加すればよいですか。
englishlanglanguagei18n