[デザイン] ビューでの余白、パディング、および大きさの設定

ブロック レベル項目の幅または高さあるいはその両方のプロパティは、選択した項目の四角形のサイズ変更ハンドル をダブルクリックして簡単に追加または削除できます。また、[デザイン] ビューでは、ブロック レベル項目の任意の辺の余白やパディングを、選択した項目の端をドラッグするか、項目の角から伸びている行ハンドルをドラッグして簡単に設定できます。

画像の左側の余白

サイズ変更ハンドルは、選択したブロック レベル項目の右側と下側のそれぞれの中央、および右下角に表示されます。余白を設定するには、項目の端をドラッグするか、ピンク色の余白ハンドルを使用します。パディングを設定するには、Shift キーを押しながら項目の端をドラッグするか、青色の間隔ハンドルを使用します。項目の余白はピンク色に表示され、間隔の領域は青色に表示されます。ドラッグすると、新しい余白はオレンジ色で表示され、新しいパディングは緑色で表示されます。

これらの方法は、画像、表、レイヤー、アプレット、インライン フレームで使用できます。また、段落、見出し (<h1>、<h2> など)、リストとリスト項目、フォームとフォーム要素、位置設定のない <div> タグ、<address> タグ、<blockquote> タグ、水平線、<center> タグが含まれるブロック レベル項目でも使用できます。どの方法でも、Microsoft Expression Web では、関連付けられているスタイル適用の設定に基づき、インライン スタイルまたはクラス セレクタを使用したスタイルを作成して書式が生成されます。これらの設定を変更するには、「生成された CSS の設定」を参照してください。

ハンドルは項目を選択したときに表示されます。またはブロック レベル項目を選択した後に、項目のブロックを囲む点線の枠線を選択するか、[デザイン] ビューで項目の上部に表示される項目のブロック レベル タブを選択するか、[クイック タグ セレクタ] バーで項目のタグを選択した場合に表示されます。たとえば、画像をクリックするとすぐにハンドルは表示されますが、段落などのブロック レベル項目を選択してもハンドルは表示されません。ハンドルを表示するには、段落の "p" ブロック レベル タブ、段落のブロックを囲む点線、または [クイック タグ セレクタ] バーで段落の <p> タグをクリックします。また、ブロック レベル項目のハンドルや、余白とパディングのパターンを表示するには、[表示] メニューの [視覚補助] サブメニューで [ブロック選択] を選択します。

ブロック レベル項目の余白、パディング、大きさを設定するには

1. Web ページを [デザイン] ビューで表示し、項目を選択します。

   項目の四隅に行ハンドルとサイズ変更ハンドルが表示されます。ハンドルが表示されない場合は、次の操作のいずれか、または複数の操作を行います。

   • ブロック レベル項目を選択している場合は、[表示] メニューの [視覚補助] をポイントし、[表示] をクリックします。[表示] メニューの [視覚補助] を再度ポイントして、[ブロック選択] をクリックします。

   • 項目のブロックを囲む点線をクリックします。

   • 項目の上部の [視覚補助] タブをクリックします。

   • 編集ウィンドウの上部のクイック タグ セレクタ バーで、項目のタグをクリックします。

2. 次の操作のいずれか、または複数の操作を行います。

   • 余白を設定するには、設定する辺のピンク色の余白ハンドルまたは端をドラッグします。

   • パディングを設定するには、Shift キーを押しながら、設定する辺の青色のパディング ハンドルまたは端をドラッグします。

   • 幅のプロパティのみを追加または削除するには、項目の右側のサイズ変更ハンドルをダブルクリックします。

   • 高さのプロパティのみを追加または削除するには、項目の下側のサイズ変更ハンドルをダブルクリックします。

   • 幅のプロパティと高さのプロパティを追加または削除するには、項目の右下角のサイズ変更ハンドルをダブルクリックします。

関連項目

概念

枠線、パディング、背景のプロパティの設定

テキストの配置

生成されるカスケード スタイル シート

視覚補助

クイック タグ セレクタ