配置 (図形を)

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

注意

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

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

VML では、 cssボックスモデルおよびビジュアルレンダリングモデルセクションで定義されているのと同じ構文を使用して、Web ページ上に図形を配置します。 静的相対、または絶対を使用して、ベースポイントが Web ページ上のどこに配置されているかを判断できます。 次に、 上部 のスタイル属性を使用して、形状の格納ボックスが配置されるベースポイントからのオフセットを指定できます。

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

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

このトピックの内容:

static

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

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

shape1 -ps.gif (2123 バイト)

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

一番 上に戻る

relative

位置スタイル属性を "相対" に設定すると、テキストフローの現在のポイント (ベースポイント) からのオフセットを含むボックスを配置できます。 オフセットは、 上部 および のスタイル属性の設定によって決まります。 相対パスとして配置されているボックスには、テキストフローの領域が必要であることに注意してください。

たとえば、次の VML 表現では、赤い楕円は、次の図に示すように、テキストフロー内の現在の点を基準として、左から20点の位置から20点離れています。

shape3.gif (2048 バイト)

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

一番 上に戻る

absolute

Position style 属性を "absolute" に設定すると、親要素 (図形を含む位置指定要素) の左上隅 (基本点) からの距離を、コンテナーボックスに正確に配置できます。 絶対パスに配置されているボックスには、テキストフロー内でスペースを使用しないことに注意してください。

たとえば、次の VML 表現では、赤い楕円は <body> 要素 (web ページ全体) に含まれます。したがって、ベースポイントは web ページの左上隅にあります。 次の図に示すように、楕円の外側のボックスは、左上から、Web ページの左上隅を基準として、上端から20ポイント離れた位置に位置します。

shape2.gif (2006 バイト)

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

一番 上に戻る

[z-index]

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

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

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

shape4.gif (572 バイト)

<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 バイト)

<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 バイト)

<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>

一番 上に戻る

回転

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

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

一番 上に戻る

flip

次の表に従って、[ 反転 スタイル] 属性を使用して、x 軸または y 軸上の図形を反転させることができます。

説明
x 回転した図形を y 軸について反転する (x 座標を反転する)
y x 軸を中心に回転した図形を反転する (y 座標を反転)

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

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

トップに戻 る トップに戻る

まとめ

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

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