Internet Explorer 8 と Adaptive Zoom

更新日: 2008 年 3 月 25 日

本記事は、Internet Explorer 開発チーム ブログ (英語) の翻訳記事です。本記事に含まれる情報は、Internet Explorer 開発チームブログ (英語) が作成された時点の内容であり、製品の仕様や動作内容を保証するものではありません。本記事に含まれる情報の利用については、使用条件をご参照ください。また、本記事掲載時点で、Internet Explorer 開発チーム ブログ (英語) の内容が変更されている場合があります。最新情報については、Internet Explorer 開発チームブログ (英語) をご参照ください。

翻訳元 : Internet Explorer 8 and Adaptive Zoom (英語)

こんにちは。レイアウト チームのプログラム マネージャ、Saloni Mira Rai です。この記事では、 Internet Explorer 8 でのズーム機能の変更点について説明します。

Web ページのビューは、ズームを使用して拡大または縮小し、ユーザーが読みやすいサイズに変更できます。この機能は、本来のページ レイアウトを維持したままコンテンツのサイズを変更できるので、非常に大きいディスプレイと非常に小さいディスプレイの場合に、特に便利です。 IE8 のズーム機能 ( この機能は Internet Explorer 7 に初めて標準搭載されました ) は、より高品質で、予測しやすく、一貫したズーム機能を提供することにより、既存の機能を向上させることに重点を置いています。

ズーム機能を使用するとき、 IE8 はテキストとイメージのサイズを変更し、そのページをリフロー ( 再構成 ) して読みやすくします。水平スクロール バーが表示されることは、ほとんどありません。説明するよりも実際に見た方が早いので、次の例を見てください。

ズーム機能を使用して、IE7 で IE ブログを 150% に拡大すると、次のようになります。
テキストが画面に収まりきらず、水平スクロール バーが画面の一番下に表示されていることに注目してください。

次の画面は、同じページを IE8 Beta 1 のズーム機能を使用して 150% に拡大したものです。

テキストが折り返されてすべて表示されるため、水平スクロール バーは不要です。

メモ: このセクションは、 Adaptive Zoom の内部動作、および Adaptive Zoom の内部動作がサイトの設計に与える影響に関心がある読者を対象としています。

Internet Explorer 8 の Adaptive Zoom は、レイアウト前に要素のサイズを変更するという概念に基づいて設計されています。これは、 Internet Explorer 7 のズーム動作とは大きく異なります。 IE7 のズーム動作は Web ページの " 拡大 " に似ており、要素はレイアウト後にサイズ変更され、それから画面に再描画されていました。

この重要な変更の結果、水平スクロール バーは、サイズ変更されたコンテンツの固定幅がビューポートの幅より大きい場合のみ表示されるようになりました。これは、標準レイアウトを、ズームされていない Web ページの上でサイズ変更するのとまったく同じです。

また、この変更により、テキストの折り返しも影響を受けます。 IE7 のズーム機能では、ズーム倍率が増加または減少しても、行の長さと改行位置は再計算されませんでした。そのため、テキスト行が短くなりすぎて多くの空白が生じたり、長くなりすぎてテキストが画面からはみ出し、水平スクロール バーが必要になるといったことが発生しました。 IE8 では、テキストが画面に表示される前に、使用できるスペースを基準に行の長さが再計算され、新しい行の長さを考慮した改行が挿入されます。

また、共通のページ要素とプロパティがズームにどのように適応するかを理解することも重要です。

• フォントとテキスト: グリフ自体はサイズ変更されません。正確には、フォント サイズが変更されてから、適切なグリフが使用されます。注意すべき重要な点は、設計上、フォントが比例的にサイズ変更されないことです。たとえば、 12pt のテキストが 110% に拡大される場合、最終的なフォント サイズは 13.2pt と計算されますが、このフォント サイズは存在しないので、最もこの数値に近い使用可能なサイズ (13pt) に切り捨てられます。
• 固定、自動、相対サイズ: ディメンションの拡大縮小は、IE8 の Adaptive Zoom で最も重要な改善点です。絶対単位 ( 例 : in 、 cm 、 mm など ) またはデバイスとフォントに依存する相対単位 ( 例 : px 、 ex 、 em など ) を使用して指定されるディメンションは、ズーム レベルどおりに拡大縮小されます。このため、 200% の場合は、 100px が 200px になり、 20pt は 40pt になります。
• コンテンツに依存するディメンション、すなわち、パーセントと自動は、レイアウト中に計算どおりに拡大縮小されません。このため、 200% の場合、ビューポートの 50% の幅は、そのまま 100% にはなりません。これは IE7 のズーム機能からの著しい変更です。
• 配置: 配置された要素が流動的な要素のように大きくなったり小さくなったりしますが、新しい位置はプロパティ セットによって決定され、オフセットが使用されます。
• 左に 100px オフセットすると、絶対配置要素は、ズームインされたときに右に移動されます。この場合、画面からはみ出す可能性があります。
  
  同様に、フロートは CSS の標準ルール通りにコンテナに対して配置されます。コンテナの幅がズームによって変更されると、フロートの位置が変更されます。隣接するフロートのズームは、ちょうどウィンドウのサイズ変更と同じです。ビューポートの幅がフロートに対して十分に大きくない場合、マークアップの最後のフロートは次の行にドロップされます。
• DHTMLプロパティ: IE7 のズーム機能では、一部のプロパティは物理的に( 例 : マウスによる調整) 処理され、他のプロパティは論理的に( オフセット) 処理されます。基本的に、この実装は Web 開発者が認識する必要があります。知らない場合は、使用するプロパティを基準にして、ズーム状態を手動で計算する必要があります。 IE8 のズーム機能では、すべての DHTML プロパティが論理的であると言えます。これにより、フライアウト メニューや " ドラッグ アンド ドロップ " のような主要シナリオが有効になります。 IE8 には screen.width および screen.height の不正な拡大縮小など、既知の問題がいくつかありますが、これらは Beta 1 では解決されませんでした。これらの問題は、今後のリリースで修正される予定です。

前述したシナリオの詳細、および、オーバーフロー、テーブルなど、その他のシナリオについては、Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview (英語) を参照してください。

Web 開発者は、 Adaptive Zoom 用に特別なコードを書く必要はありません。また、すべてのプロパティは論理的で、拡大縮小は完全に内部的なものなので、開発者はズーム機能について知る必要もありません。

ズームを使用して、サイトでのユーザーエクスペリエンスを改善することに関心がある場合は、さまざまな拡大縮小率、解像度、およびウィンドウ ディメンションをテストすることをお勧めします。これを行う際には、最初に以下の内容を考慮してください。

• どの時点で水平スクロールバーが表示されるか。ユーザーは、1 行のテキストを読むのにスクロールする必要があるか。
• サイズと位置が固定されているために、コンテンツがすぐに画面からはみ出してしまうか。
• 任意の要素の overflow:hidden 値により、コンテンツにアクセスできなくなるか。
• フライアウト メニューが使用できる画面の領域に対応しているか。またはオプションが画面からはみ出して、ユーザーがオプションに対してアクセス不能にならないか。

お読みいただきありがとうございます。皆様からのフィードバックをお待ちしています。

Saloni Mira Rai
プログラム マネージャ

2008 年 3 月 25 日火曜日発行 (ieblog (英語) 上)

タグ : General IE Information (英語)、Developers (英語)

ページのトップへ