図形の配置

このトピックでは、WINDOWS Internet Explorer 9 の時点で非推奨となる機能である VML について説明します。 VML に依存する Web ページとアプリケーションは、SVG またはその他の広くサポートされている標準に移行する必要があります。

Note

2011 年 12 月の時点で、このトピックはアーカイブされています。 その結果、アクティブに維持されなくなります。 詳細については、「 アーカイブされたコンテンツ」を参照してください。 Internet Explorer の現在のバージョンに関する情報、推奨事項、およびガイダンスについては、Internet Explorer デベロッパー センター Windows参照してください。

 

VML を使用して Web ページ上で図形を描画および色付けする方法を学習しました。 このトピックでは、VML を使用して Web ページにグラフィックスを正確に配置します。

VML では、CSS2Box Model セクションと Visual Rendering Model セクションで定義されているのと同じ構文を使用して、Web ページ上に図形を配置します。 静的相対、または絶対を使用して、Web ページ上の基点の位置を決定できます。 その後、 のスタイル属性を使用して、図形の包含ボックスを配置する基点からのオフセットを指定できます。

また、z インデックスを使用して、Web ページ上の図形の z オーダーを指定することもできます。

さらに、VML は 回転反転 を提供し、図形を回転または反転します。

このトピックの内容:

static

既定の位置スタイルは静的で、テキスト フローの現在のポイント (基点) に図形を配置し、 および のスタイル属性の設定を無視するようにブラウザーに指示します。

たとえば、次の VML 表現では、次の図に示すように、赤い楕円は"図形の先頭:" というテキストの直後に配置されます。

shape1-ps.gif (2123 bytes)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

back to top トップに戻る

relative

位置スタイル属性を "relative" に設定すると、テキスト フローの現在のポイント (基点) からのオフセットを含むボックスを配置できます。 オフセットは、 のスタイル属性の設定によって決まります。 相対として配置されている包含ボックスは、テキスト フロー内のスペースを占有することに注意してください。

たとえば、次の VML 表現では、次の図に示すように、赤い楕円は左から 20 ポイント、テキスト フローの現在のポイントを基準にして上から 10 ポイント配置されます。

shape3.gif (2048 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

back to top トップに戻る

absolute

位置スタイル属性を "absolute" に設定すると、親要素 (図形を含む配置された要素) の左上隅 (基点) からの正確な距離を含むボックスを配置できます。 絶対として配置されている包含ボックスは、テキスト フローの領域を占有しません。

たとえば、次の VML 表現では、赤い楕円は要素 (Web ページ全体) 内 <body> に含まれているため、基点は Web ページの左上隅にあります。 楕円の格納ボックスは、次の図に示すように、Web ページの左上隅を基準にして、左から 20 ポイント、上から 10 ポイントの位置に配置されます。

shape2.gif (2006 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

back to top トップに戻る

[z-index]

別の図形と重なる図形を配置できます。 通常、HTML コードの最後に表示されるグラフィックが上に表示されます。

VML では、 z-index スタイル属性を使用して z オーダーを制御できます。 この属性の値には、0、正の整数、または負の整数を指定できます。 z インデックス値が大きいグラフィックは、z インデックス値が小さいグラフィックの上に表示されます。 両方のグラフィックスの z インデックス値が同じである場合、HTML コードの最後に表示されるグラフィックが上に表示されます。

たとえば、次の VML 表現では、赤い楕円が青い四角形の上に表示されます。 これは、赤い楕円の z インデックス値が青い四角形の z インデックス値より大きいためです。

shape4.gif (572 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

次の VML 表現に示すように z インデックスを変更すると、赤い楕円が青い四角形の後ろに移動します。

shape5.gif (469 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

負の整数を指定する場合は、次の VML 表現に示すように、z インデックスを使用してグラフィックスを通常のテキスト フローの背後に配置できます。

shape6.gif (2125 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

back to top トップに戻る

回転

回転スタイル属性を使用して、図形の軸をオンにする角度を指定できます。 正の値は時計回りの回転を示します。負の値は、反時計回りの回転を示します。

たとえば、 style='..を指定するとします。rotation:90': 図形を時計回りに 90 度回転させることができます。

back to top トップに戻る

flip

次の表に従って、 フリップ スタイル属性を使用して、x 軸または y 軸の図形を反転できます。

説明
x 回転した図形を y 軸の周りを反転する (x 座標を反転)
回転した図形を x 軸の周りで反転する (y 座標を反転)

 

flip プロパティでは、x と y の両方を指定できます。

たとえば、 style='..と入力するとします。flip:x y': x 軸と y 軸の両方で図形を反転します。

back to top トップに戻る

まとめ

学習した内容に基づいて、次の手順に従って、Web ページに図形を正確に配置できます。

  1. Web ページに図形を表示する場所と図形のサイズを決定します。
  2. style='position:relative (または relative)' を指定して、基点を決定します。
  3. を使用して、基点からのオフセットを指定します。
  4. 高さを使用して、図形の包含ボックスのサイズを指定します。
  5. z インデックスを使用して図形の z オーダーを指定します。