レイアウト メトリック

レイアウト

デバイスに依存しないレイアウト

フォントの書体やサイズ、解像度 (dpi)、ディスプレイ、グラフィック アダプターに関係なく、意図したとおりに表示されるレイアウトは、デバイスに依存しないレイアウトです。問題を理解するために、まずはダイアログ ボックスのレイアウトが物理的なピクセルに基づいている場合の動作を検討してみます。9 ポイントの Segoe UI を使用した次のダイアログ ボックスのレイアウトは、96 dpi では設計者が意図したとおりに表示されます。

9 ポイントの Segoe UI を使用した物理ピクセルベースのレイアウトのダイアログ ボックスを 96 dpi で表示した場合

しかし、120 dpi で表示するとこのダイアログ ボックスは小さくなり、拡大しなければテキストが読みづらくなります。

9 ポイントの Segoe UI を使用した物理ピクセル ベースのレイアウトの同じダイアログ ボックスを、120 dpi で表示した場合

600 dpi のプリンターで印刷すると、拡大しなければまったく読み取れなくなります。

9 ポイントの Segoe UI を使用した物理ピクセル ベースのレイアウトの同じダイアログ ボックスを、600 dpi で表示した場合

また、メイリオで表示すると、次のようにテキストがコントロール内に収まらなくなります。

ピクセル ベースのレイアウトの同じダイアログ ボックスを、9 ポイントのメイリオを使用して表示した場合

これらの例からわかることは、デバイスに依存しないレイアウトにするには、テキストの読みやすさが他の表示パラメーターに影響されないようにする必要があるということです。そのため、ダイアログ ボックスのレイアウトとサイズは、テキストとの比例関係を維持する必要があります。Microsoft® Windows® では従来から、ダイアログ ユニットを使用することによってこうした目標を達成しています。

ダイアログ ユニット

ダイアログ ユニット (DLU) は、デバイス非依存のメトリックです。DLU では、水平方向の 1 ダイアログ ユニットが、使用中のフォントの平均文字幅の 4 分の 1 に相当します。また、垂直方向の 1 ダイアログ ユニットは、使用中のフォントの文字の高さの 8 分の 1 に相当します。文字の高さは幅の約 2 倍なので、水平方向の DLU は垂直方向の DLU とほぼ同じ大きさですが、DLU は正方形のユニットではないことを理解しておくことが重要です。

ダイアログ ユニットは、現在のフォントの平均文字幅の 4 分の 1、文字の高さの 8 分の 1 に相当します。

DLU は、Win32 リソース ファイルでのサイズ変更と配置に使用されます。リソース ファイル内で、各ダイアログ ボックス テンプレートのフォントが定義されており、DLU を決定する際に使用されます。したがって、複数のフォントを単一のプログラムで使用しても問題ありません。

相対ピクセル

前に示したように、物理ピクセルはデバイスに依存するメトリックですが、わかりやすく使いやすいというメリットがあります。デバイスに依存しないようにするため、新しい UI テクノロジでは相対ピクセルが使用されています。

相対ピクセルはデバイスに依存しないメトリックであり、96 dpi では物理ピクセルでの表示と同じですが、他の dpi では比率を保って拡大縮小が行われます。そのため、たとえば、120 dpi での 1 相対ピクセルは、1.25 物理ピクセルに相当します。相対ピクセルは正方形のユニットです。

相対ピクセルは、Windows Presentation Foundation (WPF) と WinForms で、ダイアログ ボックスのサイズ変更とレイアウトに使用されています。

有効解像度

ほとんどの Windows ベースのコンピューターでは、従来より既定で 96 dpi となっていましたが、現在多くのラップトップでは、既定で 120 dpi 以上となっています。高 dpi が使用されることで、大きめのフォント、アイコン、グラフィックなど、より多くの物理ピクセルで描画した再現性の高い UI 要素が Windows で使用されるようになっています。結果として、UI の表示により多くのピクセルが必要となるため、画面の有効解像度は低くなります。

他の dpi を説明するために、画面解像度は、"有効解像度"** という言葉で示されています。有効解像度は 96 dpi での解像度で、他の dpi に拡大縮小されます。次の表は、Windows の最小有効解像度 800 × 600 ピクセルおよび Windows の推奨有効解像度 1024 × 768 ピクセルでの一般的な dpi 設定の物理解像度を示しています。

dpi	最小物理解像度 (ピクセル)	推奨される最小物理解像度 (ピクセル)
96 dpi (100%)	800 × 600	1024 × 768
120 dpi (125%)	1024 × 768	1280 × 960
144 dpi (150%)	1200 × 900	1600 × 1200
192 dpi (200%)	1600 × 1200	2500 × 1600

これにより、Windows の最小有効解像度が 800 × 600 ピクセルの場合、Windows を 120 dpi でサポートするための最小物理解像度は、1024 × 768 ピクセルということになります。通常、有効解像度は次の式で計算できます。

有効解像度 = 物理解像度 × (96/現在の dpi 設定)

画面のサイズを示す場合は有効解像度を使用し、レイアウトのサイズと間隔を示す場合は相対ピクセルを使用します。たとえば、Windows の最小有効解像度で画面に適した最大のウィンドウ サイズは、800 × 600 相対ピクセルです。これは、dpi の値に関わらず適用されます。

画面のサイズを示す場合は有効解像度を使用し、ウィンドウやコントロールを示す場合は相対ピクセルを使用します。

開発者向け情報: 詳細については、「Writing High-DPI Win32 Applications (高 dpi Win32 アプリケーションの記述)」を参照してください。

DLU から相対ピクセル (またはその逆) への変換

レイアウトとサイズを、DLU から相対ピクセル、またはその逆へ変換することが必要になる場合があります。しかし、DLU は正方形のユニットではないので、変換は軸に依存します。さらに、DLU は使用するフォントに基づいて決定されるので、変換はフォントにも依存します。

9 ポイント Segoe UI の場合の変換 水平方向の 1 DLU = 1.75 相対ピクセル 垂直方向の 1 DLU = 1.875 相対ピクセル ダイアログ ユニット水平方向のピクセル垂直方向のピクセル 12 (1.75)2 (1.875) 24 (3.5)4 (3.75) 35 (5.25)6 (5.625) 477 (7.5) 59 (8.75)9 (9.375) 610 (10.5)11 (11.25) 712 (12.25)13 (13.125) 81415 916 (15.75)17 (16.875) 1017 (17.5)19 (18.75) 1119 (19.25)21 (20.625) 122122 (22.5) 1323 (22.75)24 (24.375) 1424 (24.5)26 (26.25) 1526 (26.25)28 (28.125) 162830 1730 (29.75)32 (31.875) 1831 (31.5)34 (33.75) 1933 (33.25)36 (35.625) 203537 (37.5)

8 ポイント Tahoma の場合の変換 水平方向の 1 DLU = 1.50 相対ピクセル 垂直方向の 1 DLU = 1.625 相対ピクセル ダイアログ ユニット水平方向のピクセル垂直方向のピクセル 11 (1.5)2 (1.625) 233 (3.25) 34 (4.5)5 (4.875) 466 (6.5) 57 (7.5)8 (8.125) 6910 (9.75) 710 (10.5)11 (11.375) 81213 913 (13.5)15 (14.625) 101516 (16.25) 1116 (16.5)18 (17.875) 121819 (19.5) 1319 (19.5)21 (21.125) 142123 (22.75) 1522 (22.5)24 (24.375) 162426 1725 (25.5)28 (27.625) 182729 (29.25) 1928 (28.5)30 (30.875) 203032 (32.5)

かっこ内の数字は正確な変換のための数値です。他のコンテキストとは異なり、.5 は 1 に切り上げず、0 に切り捨てられていることに注意してください。

コントロールとテキストの測定

グラフィック プログラムを使用してコントロールのサイズや間隔を測定するときに、数字が予測とは異なり混乱することがあります。たとえば、コマンド ボタンの標準サイズは 75 × 23 ピクセルですが、測定すると 73 × 21 ピクセルになります。**この不一致は、一部のコントロールに、1 ピクセル幅の非表示の枠線があるためです。**この枠線があることで、DLU を使用してレイアウトしたときに、コントロールどうしを密着させて配置することができます。コントロールのサイズと間隔を測定する場合は、非表示の枠線に注意します。

一部のコントロールには非表示の枠線があります。

グラフィック プログラムでテキストのサイズと間隔を測定する場合にも、同様の問題が発生します。テキスト コントロールの高さは、アセンダー、ディセンダー、分音記号、およびその間隔 (レディングと呼ばれます) を含むテキストの高さで構成されます。そのため、表示されるテキストのサイズと間隔が、実際のサイズと間隔とは異なる場合があります。

フォントのアセンダー、ディセンダー、分音記号、レディング

警告: テキストは表示よりも大きなサイズに設定されています。