次の方法で共有

Positioning Elements in Design View

  • [アーティクル]

 

発行: 2016年4月

HTML デザイナーで HTML ページまたは ASP.NET Web ページを作成すると、要素は物理的に上から下へ配置されます。  既定では、ページがブラウザーにレンダリングされるとき、要素は上から下へ同じ順序でレンダリングされます。  これは、フロー レイアウトと呼ばれます。  

また、横軸と縦軸の座標に合わせて 2 次元でページ上の任意の位置に要素を配置することもできます。  このレイアウト オプションは、スタイルを介して使用できる配置オプションを利用します。  

デザイン ビューでは、ページ上に要素をドラッグすることより位置を決定することも、要素を選択してから、その要素に配置オプションを適用することもできます。  デザイン ビューでは、要素はページ上の配置された位置に表示されます。  要素のタブ ハンドルをクリックしてドラッグすることで、要素の位置を変更できます。  ソース ビューでは、個々の要素のマークアップ内に配置オプションを設定できます。  

ページがレンダリングされると、ブラウザーは、指定された配置情報を使用して要素を表示します。

フロー レイアウト

要素に配置スタイル プロパティがない場合、要素はページの上から下へ、そして、ページ (またはその要素のコンテナー要素) の dir 属性の設定またはブラウザーの言語設定に従って、左から右へまたは右から左へ配置されます。  このレイアウトを使用する HTML ドキュメントは、すべての Web ブラウザーで表示できます。  ページのサイズを変更すると要素の位置が変更される場合があります。  

ページに対してフロー レイアウトを採用する場合、table 要素内に要素を配置したり、配置スタイル プロパティまたはテキスト配置プロパティを持つ div 要素を使用したりできます。  ただし、要素はオーバーラップできません。  ページのサイズが変更したとき、テーブルおよびセル幅に対して絶対単位が使用されているかパーセントが使用されているかによって、要素が移動する場合があります。  

2 次元配置

個々の要素に配置オプションを適用することにより、ページ上の正確な位置に要素を配置できます。

ページに追加する新しい要素に対しても配置オプションを指定できます。

Microsoft Visual Web Developer Web 開発ツールでは、カスケード スタイル シートの W3C 仕様に対応した配置オプションを指定できます。  配置オプションは、W3C HTML 4.0 規格を実装したすべてのブラウザーで有効です。これには、XHTML 1.1 をサポートするブラウザーも含まれます。  

次のようなオプションがあります。

  • absolute

    要素は、left, right、top、および bottom の各スタイル プロパティの任意の組み合わせで定義されたページ内の位置にレンダリングされます。  0、0 の位置は、現在の要素の親に基づいて定義されます。  親は、位置情報を持つ最初のコンテナー要素です。  たとえば、現在の要素が配置情報を持つ div 要素内にある場合、その div 要素の位置に基づいて絶対位置が計算されます。  位置情報を持つコンテナーが現在の要素に存在しない場合は、body 要素に基づいて位置情報が計算されます。  

  • relative

    要素は、left スタイル プロパティと top スタイル プロパティで定義されたページ内の位置にレンダリングされます。  このオプションは、ページのフローでの要素の位置に対して 0、0 の位置が定義される点が absolute オプションと異なります。  フローには、相対位置を使用し、top と left の両方が 0 に設定された要素が基準として表示されます。  

    注意

    絶対位置または相対位置を使用する要素は、ページのマークアップ内のそれぞれの宣言での順番とは異なる順番でページ上に表示される可能性があるため、混乱する場合があります。  たとえば、ソース ビューで、マークアップ内の最初の要素としてボタンを定義している場合でも、その後、そのボタンの位置を設定した結果、ボタンは、レンダリングされたページまたはデザイン ビューに最後の要素として表示される場合があります。  

  • static

    要素がフロー レイアウトでレンダリングされる場合、2 次元配置は使用されません。  テーマまたはスタイル シートから継承される設定をオーバーライドする個々のコントロールに対して、配置オプションを設定する場合に、このオプションを選択します。  

Visual Web Developer では、Not Set という配置オプションもあります。このオプションを使用すると、すべての既存の配置情報を個々のコントロールからまたは将来追加されるコントロールからも削除できます。

静的テキストまたは要素グループの配置

フローティング静的テキストまたは要素グループを 1 ユニットとして作成するには、ページにレイヤーを追加します。  レイヤーは配置情報を持った div 要素で、ドラッグしてページ上を移動できます。  div 要素内にテキストを入力したり、要素をドラッグしたりできます。  Visual Web Developer の [書式] メニューには、レイヤーを追加するためのコマンドが含まれています。また、div 要素を独自に作成して、手動で配置情報を追加することもできます。  

グリッド配置

絶対位置または相対位置を使用する際に、配置基準としてピクセルを使用する場合 (つまり、left プロパティと top プロパティの単位がピクセルである場合)、要素を非表示のグリッドにスナップするオプションを設定できます。  これは、ページに要素を配置するのに便利です。  詳細については、「[ルーラーとグリッド] ([オプション] ダイアログ ボックス - [HTML デザイナー])」を参照してください。  

要素のレイヤー化

絶対位置または相対位置を使用する場合、要素をオーバーラップできます。その場合、要素は、オーバーラップした状態でブラウザーにレンダリングされます。  テーブルを使用して要素を配置している場合、オブジェクトのオーバーラップはできません。  

絶対位置または相対位置を持つ要素には、3 次元で要素の前後位置を指定できる z-index プロパティを設定できます。  2 つの要素が同じ領域を共有している場合、より高い z-index 属性を持つ要素が前に表示されます。  デザイン ビューで、位置を設定するコマンドを使用すると、z-index プロパティが自動的に設定されます。値は、一番後ろを意味する 100 から始まります。  ソース ビューで配置プロパティを追加する場合は、手動で z-index プロパティを追加する必要があります。  

参照

NIB: How to: Position Elements in Design View
[ルーラーとグリッド] ([オプション] ダイアログ ボックス - [HTML デザイナー])
[検証] ([オプション] ダイアログ ボックス - [テキスト エディター] - [HTML])