図形の配置
このトピックでは、WINDOWS インターネット エクスプローラー 9 の時点で非推奨となった機能である VML について説明します。 VML に依存する Web ページとアプリケーションは、SVG またはその他の広くサポートされている標準に移行する必要があります。
注意
2011 年 12 月の時点で、このトピックはアーカイブされています。 その結果、積極的に維持されなくなりました。 詳細については、「 アーカイブされたコンテンツ」を参照してください。 Windows インターネット エクスプローラーの現在のバージョンに関する情報、推奨事項、ガイダンスについては、「Internet エクスプローラー Developer Center」を参照してください。
VML を使用して Web ページ上で図形を描画および色付けする方法を学習しました。 このトピックでは、VML を使用して Web ページ上にグラフィックスを正確に配置します。
VML では、CSS2 の Box Model セクションと Visual Rendering Model セクションで定義されているのと同じ構文を使用して、Web ページ上に図形を配置します。 静的、相対、または絶対を使用して、ベース ポイントが Web ページ上のどこにあるかを判断できます。 その後、 上 と 左 のスタイル属性を使用して、図形の格納ボックスを配置する基点からのオフセットを指定できます。
また、z-index を使用して、Web ページ上の図形の Z オーダーを指定することもできます。
さらに、VML は 回転 と 反転 を提供し、図形を回転または反転します。
このトピックの内容:
static
既定の位置スタイルは静的です。このスタイルは、テキスト フロー内の現在のポイント (基点) に図形を配置し、 上 および 左 のスタイル属性の設定を無視するようにブラウザーに指示します。
たとえば、次の VML 表現では、次の図に示すように、赤い楕円は "図形の先頭" というテキストの直後に配置されます。
<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>
先頭に戻るrelative
位置スタイル属性を "relative" に設定すると、テキスト フロー内の現在のポイント (基点) からのオフセットを含むボックスを配置できます。 オフセットは、 上 と 左 のスタイル属性の設定によって決まります。 相対として配置された包含ボックスは、テキスト フロー内のスペースを占有することに注意してください。
たとえば、次の VML 表現では、次の図に示すように、赤い楕円は左から 20 ポイント、テキスト フローの現在のポイントを基準にして上から 10 ポイント配置されます。
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>
absolute
位置スタイル属性を "absolute" に設定すると、親要素 (図形を含む位置指定された要素) の左上隅 (基点) からの正確な距離を含むボックスを配置できます。 absolute として配置されている包含ボックスは、テキスト フロー内の領域を占有しません。
たとえば、次の VML 表現では、赤い楕円は要素 (Web ページ全体) 内 <body> に含まれているため、基点は Web ページの左上隅にあります。 次の図に示すように、楕円の格納ボックスは、Web ページの左上隅を基準にして、左から 20 ポイント、上から 10 ポイントの位置に配置されます。
<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-index スタイル属性を使用して z オーダーを制御できます。 この属性の値には、0、正の整数、または負の整数を指定できます。 Z インデックス値が大きいグラフィックは、Z インデックス値が小さいグラフィックの上に表示されます。 両方のグラフィックスの z インデックス値が同じ場合、HTML コードの最後に表示されるグラフィックが一番上に表示されます。
たとえば、次の VML 表現では、青い四角形の上に赤い楕円が表示されます。 これは、赤い楕円の z インデックス値が青い四角形の z インデックス値より大きいためです。
<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 インデックスを変更すると、赤い楕円が青い四角形の後ろに移動します。
<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 インデックスを使用して通常のテキスト フローの背後にグラフィックスを配置できます。
<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='..を指定するとします。rotation:90'、図形を時計回りに 90 度回転させることができます。
flip
次の表に従って、 flip スタイル属性を使用して、x 軸または y 軸の図形を反転できます。
| 値 | 説明 |
|---|---|
| x | 回転した図形を y 軸の周りで反転する (x 座標を反転) |
| y | 回転した図形を x 軸の周りで反転する (y 座標を反転) |
flip プロパティでは、x と y の両方を指定できます。
たとえば、「 style='..」と入力するとします。flip:x y'、 x 軸と y 軸の両方で図形を反転します。
まとめ
学習した内容に基づいて、次の手順に従って、Web ページ上に図形を正確に配置できます。
- Web ページに図形を表示する場所と、図形のサイズを決定します。
- 基本点を決定するには 、style='position:relative (または relative)' を指定します。
- 基準点からのオフセットを指定するには、 左 と 上 を使用します。
- 幅と高さを使用して、図形の格納ボックスのサイズを指定します。
- 図形の z オーダーを指定するには、z インデックスを使用します。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示