[位置] ([スタイル ビルダ] ダイアログ ボックス)
更新 : 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 インデックス] 値を割り当ててください。
参照
概念
参照
[フォント] ([スタイル ビルダ] ダイアログ ボックス)
[テキスト] ([スタイル ビルダ] ダイアログ ボックス)