ASP.NET Web ページ グローバリゼーション用の HTML レイアウト ガイドライン

更新 : 2007 年 11 月

文字列が含まれたすべてのコントロールのサイズは、そのテキストに合わせてユーザー インターフェイスで調節されます。したがって、HTML のレイアウトでは、ローカライザで文字列だけを変換することをお勧めします。この方法を使用すると、ローカリゼーション作業において手動でコントロールのサイズを変更する手順が不要になるため、その手順の結果発生するエラーおよびバグがなくなる利点があります。ただし、コントロールのレイアウトは文字列の長さに応じて変わるため、ローカライズされた Web サイトは十分にテストする必要があります。

グローバリゼーション用の ASP.NET Web ページをデザインする場合に推奨されるガイドラインの一覧を次に示します。

• 絶対位置の使用を避ける。

  絶対位置を指定すると、要素の位置とサイズの自動調整ができなくなります。次のコード例は、推奨されない方法を示しています。

  <!-- Do not do this. -->
  <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">
  

• フォームに対して使用可能な幅と高さを使用する。

  次の 2 とおりの実行方法があります。

  • テーブルなどの主要な要素のサイズを 100% に等しい幅に変更します。

    たとえば、次のように指定します。

    <!-- A table sized to take up entire width of the form.-->
      <table width=100%>
    

  • カスケード スタイル シートの式を使用し、フォーム全体のサイズに基づいて要素のサイズを変更します。

    たとえば、次のように指定します。

    <!-- A div element sized to take up half the width and height of the form. -->
    <div style=' 
      height: expression(document.body.clientHeight / 2);
      width: expression(document.body.clientWidth / 2); '>
    

• それぞれのコントロールに対して個別のテーブル セルを使用する。

  これにより、独立したテキストの折り返しが可能になり、右から左の方向にテキストを表示するカルチャでも正しく整列させることができます。

• テキストが含まれたテーブル セルに対する nowrap 属性の使用を避け、テキストの折り返しを可能にする。

  nowrap 属性は、テキストを 1 行に収める必要があり、どの言語においても十分なテキストの領域が確保できる場合にだけ使用します。

• チェック ボックスおよびオプション ボタンをラベル テキストから離す。

  チェック ボックスおよびオプション ボタンのラベルは、これらのコントロールとは別のセルに配置します。これにより、テキストを長くした場合でも正しく折り返すことができます。ただし、テキストが翻訳後も 1 行に収まるように余裕を持たせたフォーム デザインを行う必要があります。

• 固定幅を避け、伸長するための余裕を見込む。

  テキストは他の言語に翻訳すると長くなることがあります。目安としては、短い文字列 (10 文字未満) については 300%、中程度の文字列 (10 ～ 20 文字) については 200%、長い文字列 (20 文字超) については 100% の伸長率をそれぞれ見込むことをお勧めします。

  テーブル セルの幅をフォームの幅に対する割合で設定することにより、セルがテーブル全体の大きさに比例して伸長するようになります。ただし、HTML レイアウト エンジンへの負荷を考慮し 100% 以外の相対サイズの使用は最小限にしてください。

  <!-- The table cell is sized to take up one quarter of the width of the table. -->
  <td width=25%>
  

• ボタン サイズを変更する回数を最小限にする。

  サイズを同一にするボタンのセットが存在する場合があります。同じ大きさにするボタンはすべて、1 か所で設定するようにしてください。リスト ボックスおよびグループ ボックスのテキストが伸長する余裕を見込んでください。

• 高さの設定はできるだけ避ける。

  テキストを含むテーブル セルまたはコントロールではセルの高さを設定しないようにしてください。ただし、カスケード スタイル シートの要素で行の高さを設定できます。それ以外の場合は、ユーザーがブラウザでテキスト サイズを設定すると、ページの外観が変更されます。

• HTML タグの左寄せや右寄せを使用しない。

  一般に、テーブル セルの align="left" または align="right" は設定しないようにしてください。これらの設定は、テキストを右から左の方向で表示するカルチャでは、フォームのレイアウトに影響する可能性があります。

• 変更が必要になる場合があるインライン カスケード スタイル シート値の使用を避ける。

  すべてのカスケード スタイル シート値は、ローカライザがインラインではなくスタイル シートで変更できるようにしておきます。ページのフォント設定についても同様です。

参照

その他の技術情報

ASP.NET のグローバリゼーションおよびローカリゼーション