Clever Geek Handbook

Google Web Studioから多言語ユーザー向けのサイトを構築するための6つのヒント

ウェブマスターレベル：任意


インターネットには多くのサイトがあり、そのコンテンツは複数の言語で利用できます。そのようなリソースはますます増えています。 ただし、多言語Webサイトの作成は、単なる翻訳またはローカリゼーション（L10N）ではありません。 ここでは、他の多くの側面を考慮する必要があり、それぞれが国際化（I18N）に関連しています。 Googleヘルプでは、 Google Searchの多地域および多言語サイトを最適化する方法に関する情報を見つけることができます。この記事では、多言語ユーザー向けのリソースを作成するためのヒントを紹介します。



1.スタイルシートではなくマークアップを使用して多言語ページを作成します



テキストの言語と向きは、ページのコンテンツと密接に関連しています。 この点で、スタイルシートではなく、常にマークアップを使用してください。 lang



およびdir



疑似クラスを使用して、テキストの言語と方向（少なくともhtmlのマテリアルの場合）を設定します。 



 <html lang="ar" dir="rtl">


特別なクラスや識別子など、元のソリューションを使用することはお勧めしません。

スタイルシートに依存しないでください。ユーザーエージェントは、方向やUnicode双方向テキストなどのプロパティを無視できます 。 XMLの場合、状況はまったく逆です。XMLは国際化のための特別なマークアップをサポートしていないため、この場合はスタイルシートを使用することをお勧めします。



2.すべての言語に1つのスタイルシートを使用する



テキストを右から左、左から右、または言語ごとに別々のスタイルシートを作成しないでください。使用してください。 これは、国際化のルールを統一し、正しく実装するのに役立ちます。

次のような代替スタイルシートを試さないでください。 



 <link href="default.rtl.css" rel="stylesheet">


すでにサイトにあるものを使用してください： 



 <link href="default.css" rel="stylesheet">


このアプローチでは、既存のCSSルールを以下にリストする国際化コンポーネントで補完する必要があります。



3.属性セレクター[dir = 'rtl']を使用します



既存のスタイルシート（ヒント＃2）を使用することをお勧めしているため、方向が異なる方法で変更される要素を選択する必要があります。 テキストを右から左に読むには特別なマークアップが必要なため（ヒント＃1）、それほど難しくはないはずです。最新のブラウザのほとんどは[dir='rtl']



サポートしています。



例を考えてみましょう： 



 aside { float: right; margin: 0 0 1em 1em; } [dir='rtl'] aside { float: left; margin: 0 1em 1em 0; }


4.疑似クラスを使用します：lang（）



さまざまなドキュメントで言語を定義するには、擬似クラス:lang()



ます。 フォーマットを実行するのがより難しいので、テキストの断片ではなくドキュメントについて話していることに注意してください。

太字の中国語の文字が見た目がよくない（そしてこれが正しい）場合は、次のコードを追加します。 



 :lang(zh) strong, :lang(zh) b { font-weight: normal; color: #900; }


5.すべての値の方向を変更する



双方向コンテンツを使用する場合、値が同じように方向を変えることが重要です。 内側および外側のマージン、フレームのプロパティ、およびfloat



やt ext-align



などの属性のパラメーターには特に注意を払う必要があります。

一部のセクションではテキストが左から右に、他のセクションでは右から左に移動するとします。 t ext-align: left



場合ext-align: left



、 text-align: right



を使用する必要がありtext-align: right



。

方向の変更を簡単にするツールがあります。 それらの1つはCSSJanusです 。ただし、1つの一般的なスタイルシートではなく、個別のスタイルシートを使用するサイトを対象としています。



6.詳細に注意を払う



以下を考慮してください。

  1. 左向きまたは右向きの画像（矢印、背景、 box-shadow



    text-shadow



    属性とtext-shadow



    属性を使用して設定されたtext-shadow



    、JavaScript要素およびアニメーション化されたオブジェクト）も向きを変更する必要があります。
  2. フォントとスクリプトによっては、ページ上のテキストサイズが十分でない場合があります（これは特にラテンフォントに当てはまります）。 必要に応じて、サイズを調整するか、別のフォントを使用します。
  3. CSSセレクターの特異性を覚えておいてください。 [dir='rtl']



    または[dir='ltr']



    セレクター（ヒント＃2を参照）がより優先されます。 これは問題を引き起こす可能性があります。 この要素を考慮し、必要に応じて変更を加えます。


質問やコメントがある場合は、多言語サイトで作業するWeb開発者向けのヘルプフォーラムをご覧ください 。 ここにコメントを残すこともできます。


More articles:


All Articles