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

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

更新 : 2007 年 11 月

[スタイルビルダ] ダイアログボックスの [エッジ] ページでは、HTML 要素を囲む領域の境界およびマージンを設定するカスケードスタイルシート (CSS) スタイル属性を定義できます。これらの属性を HTML 要素に直接適用、または CSS スタイル規則に追加できます。

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

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

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

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

外部スタイルシートに定義された CSS スタイルにエッジ属性を追加するには

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

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

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

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

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

処理手順

UI 要素

[余白]

要素を囲む四角形領域とほかの要素の距離を制御する属性を設定します。1 つ以上のフィールド ([上]、[下]、[左]、または [右]) に値を入力し、単位を [px] (既定)、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%] の中から選択します。たとえば、[上] フィールドと [下] フィールドに「50」と入力し、既定の単位オプションを受け入れた場合は、次の CSS マークアップが挿入されます。

MARGIN-TOP: 50px; margin-bottom:50px

メモ :
マージン値には正の数も負の数も指定できます。

[パディング]

要素とそのマージンの間、またはオブジェクトに境界がある場合は、要素とその境界の間のスペースの量を制御する属性を設定します。1 つ以上のフィールド ([上]、[下]、[左]、または [右]) に値を入力し、単位を [px] (既定)、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%] の中から選択します。たとえば、[上] フィールドと [下] フィールドに「50」と入力し、既定の単位オプションを受け入れた場合は、次の CSS マークアップが挿入されます。

PADDING-TOP: 50px; PADDING-BOTTOM:50px

メモ :
埋め込み値は正の数である必要があります。

[境界線]

次の属性は、要素を囲む四角形の領域の境界を制御します。

[変更するエッジを選択]
書式を指定する境界のエッジを設定します。[すべて]、[上]、[下]、[左]、または [右] を選択します。境界スタイルを選択するまで、スタイルにコードは追加されません。
[スタイル]
指定した境界に適用するスタイルを設定します。[<設定なし>]、[なし]、[実線]、[二重線]、[溝]、[すじ]、[インセット]、または [アウトセット] を選択します。たとえば、選択するエッジに [上]、スタイルに [直線] を選択すると、次のコードが追加されます。

BORDER-TOP-STYLE:solid
[幅]
指定した境界の幅を設定します。[<設定なし>] (オプションを選択しない)、[細枠]、[中]、[太線]、または [カスタム] を選択します。[カスタム] を選択した場合は、横のフィールドに数値を入力し、単位オプションとして [px] (既定値)、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%] を選択します。たとえば、選択するエッジに [上]、スタイルに [直線]、幅に [カスタム] を選択し、フィールドに「50」と入力し、既定の単位オプションを受け入れた場合は、次のコードが追加されます。

BORDER-TOP:50px solid
[色]
スタイル内で選択した境界の色を設定します。ドロップダウンリストで色を選択するか、省略記号ボタン (...) ボタンをクリックして [カラーピッカー] ダイアログボックスを表示し、追加する色を選択します。たとえば、選択するエッジに [上]、スタイルに [直線]、色に [青] を選択すると、次のコードが追加されます。

BORDER-TOP:blue solid