[位置] ([スタイルビルダ] ダイアログボックス)

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

[スタイルビルダ] ダイアログボックスの [位置] ページでは、カスケードスタイルシート (CSS) の位置属性を定義できます。これらの属性を HTML 要素に直接適用することも、CSS スタイル規則に追加することもできます。

位置属性をページの HTML 要素に直接適用するには

HTML デザイナのデザインビューで HTML ドキュメントを開き、書式を指定する要素を選択します。
[書式] メニューの [スタイル] をクリックして [スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [位置] をクリックします。

右側のペインに [[位置] ([スタイルビルダ] ダイアログボックス)] が表示されます。

デザインビューで選択されている要素にスタイルを適用すると、これらの要素の HTML マークアップに CSS スタイル属性がインラインで挿入されます。HTML ビューに切り替えて、挿入された新しいスタイル属性を確認します。

外部スタイルシートで定義された CSS スタイル規則に位置属性を追加するには

既存の外部スタイルシートを開き、該当するスタイルルールのセレクタに続く中かっこ ({ }) の中にカーソルを移動します。
[スタイル] メニューの [ビルドスタイル] をクリックして [スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [位置] をクリックします。

右側のペインに [[位置] ([スタイルビルダ] ダイアログボックス)] が表示されます。

メモ :
[スタイル] メニューは、外部 CSS スタイルシートを開いて編集するときに表示されます。スタイルルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルドスタイル] オプションを使用できるようになります。

CSS スタイルセレクタを目的の要素の CLASS プロパティとして割り当てると、外部スタイルシートで定義されている CSS スタイルクラスを Web ページの <BODY> 要素内の要素に適用できます。

[スタイルビルダ] ダイアログボックスの [位置] ページでは、次のオプションを使用できます。

処理手順

UI 要素

[位置モード]

後続の位置フィールドのうち、どのフィールドを使用するかを決めるモードを設定します。ドロップダウンリストで、次のオプションのうちいずれか 1 つを選択します。

[<設定なし>]
属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[標準フロー内の位置]
要素の位置を変更しません。高さと幅を指定できます。[標準フロー内の位置] を選択すると、次の CSS マークアップが挿入されます。

POSITION:static

メモ :

[位置モード] セレクタの横にあるプレビュー領域は、選択したモードに応じて更新されます。
[標準フローからのオフセット]
通常のフローでの位置を基準とした、要素の上部と左の位置を指定できます。高さと幅を指定できます。要素の通常のフローとは、スタイルが適用される前の位置です。[標準フローからのオフセット] を選択すると、次の CSS マークアップが挿入されます。

POSITION:relative
[絶対位置]
要素の上部の絶対位置、左の絶対位置、Z インデックス、高さ、および幅を指定できます。特定の位置に固定する要素には通常、絶対位置を指定します。たとえば、ほかの要素を追加および編集した場合でも、動くことがないように、ロゴは絶対位置に配置します。[絶対位置] を選択すると、次の CSS マークアップが挿入されます。

POSITION:absolute

メモ :
[位置モード] セレクタの横にあるプレビュー領域は、選択したモードに応じて更新されます。

[位置モード] を選択すると、次のオプションを使用できます。

[上]
絶対値または通常のフローでの位置に基づく値として、要素の上部の位置を設定します。値を入力し、単位オプション ([px]、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%]) を選択します。既定の単位オプションは [px] です。たとえば、「5」と入力し、既定の単位を受け入れた場合は、次の CSS マークアップが挿入されます。

TOP:5px

メモ :

このオプションは、[位置モード] リストの [標準フローからのオフセット] を選択すると使用できるようになります。
[左]
絶対値または通常のフローでの位置に基づく値として、要素の左の位置を設定します。値を入力し、単位オプション ([px]、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%]) を選択します。既定の単位オプションは [px] です。たとえば、「5」と入力し、既定の単位を受け入れた場合は、次の CSS マークアップが挿入されます。

LEFT:5px

メモ :

このオプションは、[位置モード] リストの [標準フローからのオフセット] を選択すると使用できるようになります。
[高さ]
要素の高さを設定します。値を入力し、単位オプション ([px]、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%]) を選択します。既定の単位オプションは [px] です。たとえば、「5」と入力し、既定の単位を受け入れた場合は、次の CSS マークアップが挿入されます。

HEIGHT:5px
[幅]
要素の幅を設定します。値を入力し、単位オプション ([px]、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%]) を選択します。既定の単位オプションは [px] です。たとえば、「5」と入力し、既定の単位を受け入れた場合は、次の CSS マークアップが挿入されます。

WIDTH:5px

メモ :
このオプションは、[位置モード] リストの [標準フローからのオフセット] を選択すると使用できるようになります。

メモ :
このオプションは、[位置モード] リストの [標準フローからのオフセット] を選択すると使用できるようになります。

[Z インデックス]
要素の Z オーダーを設定します。Z オーダーは、重なり合った要素の表示を制御するために使用します。Z オーダー値が大きな要素は、それが小さな値の要素の前面に表示されます。要素の Z オーダー内における順序を上げるには、正数を入力して、次の例のようにします。

Z-INDEX:99

メモ :
要素の Z オーダー内における順序を下げるには、小さい数を入力するか負数を入力します。

メモ :
[Z インデックス] と位置は関連しています。正の値を入力したたために要素が重なって表示される場合は、[Z インデックス] 値を適切に割り当てることで、どの要素をほかの要素よりも前面に配置するかを制御できます。ほかの要素よりも前面に表示する要素に対して、より高い [Z インデックス] 値を割り当ててください。

[Z インデックス] と位置は関連しています。正の値を入力したたために要素が重なって表示される場合は、[Z インデックス] 値を適切に割り当てることで、どの要素をほかの要素よりも前面に配置するかを制御できます。ほかの要素よりも前面に表示する要素に対して、より高い [Z インデックス] 値を割り当ててください。