[レイアウト] ([スタイル ビルダ] ダイアログ ボックス)
更新 : 2007 年 11 月
[スタイル ビルダ] ダイアログ ボックスの [レイアウト] ページでは、カスケード スタイル シート (CSS) のページ レイアウト属性を定義できます。ページ レイアウト属性によって、HTML ストリームの流れの中で要素がどのように配置されるかが決まります。これらの属性を HTML 要素に直接適用することも、CSS スタイル規則に追加することもできます。
レイアウト属性をページの HTML 要素に直接適用するには
HTML デザイナのデザイン ビューで HTML ドキュメントを開き、[ドキュメント アウトライン] ウィンドウを使用して、書式を指定する要素を選択します。
[書式] メニューの [スタイル] をクリックして [スタイル ビルダ] ダイアログ ボックスを表示します。
[スタイル ビルダ] ダイアログ ボックスの左側のペインで [レイアウト] をクリックします。
右側のペインに [[レイアウト] ([スタイル ビルダ] ダイアログ ボックス)] が表示されます。
デザイン ビューで選択されている要素にスタイルを適用すると、これらの要素の HTML マークアップに CSS スタイル属性がインラインで挿入されます。HTML ビューに切り替えて、挿入された新しいスタイル属性を確認します。
外部スタイル シートで定義された CSS スタイル規則にリスト属性を追加するには
既存の外部スタイル シートを開き、該当するスタイル ルールのセレクタに続く中かっこ ({ }) の中にカーソルを移動します。
[スタイル] メニューの [ビルド スタイル] をクリックして [スタイル ビルダ] ダイアログ ボックスを表示します。
[スタイル ビルダ] ダイアログ ボックスの左側のペインで [レイアウト] をクリックします。
右側のペインに [[レイアウト] ([スタイル ビルダ] ダイアログ ボックス)] が表示されます。
.gif "メモ") メモ : |
|---|
[スタイル] メニューは、外部 CSS スタイル シートを開いて編集するときに表示されます。スタイル ルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルド スタイル] オプションを使用できるようになります。 |
CSS スタイル セレクタを目的の要素の CLASS プロパティとして割り当てると、外部スタイル シートで定義されている CSS スタイル クラスを Web ページの <BODY> 要素内の要素 （この場合は <BODY> 自体を含む） に適用できます。
[スタイル ビルダ] ダイアログ ボックスの [レイアウト] ページでは、次のオプションを使用できます。
処理手順
UI 要素
[フロー制御]
ここで指定する一連の属性によって、HTML ドキュメント内の要素のフローが制御されます。[フロー制御] セレクタの横にあるプレビュー領域は、選択したオプションに応じて更新されます。次の属性は、ページをブラウザに表示するときの外観とパフォーマンスの両方に影響します。
[可視性]
Visibility プロパティの非表示または可視の値を設定します。[<設定なし>] (オプションを選択しない)、[非表示]、または [可視] を選択します。たとえば、[非表示] を選択すると、次の CSS マークアップが挿入されます。VISIBILITY:hidden
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[表示]
要素の DISPLAY 属性値を設定します。要素を表示するかどうか、表示する場合は要素をブロックとして表示するか、リニア フローで表示するかを指定できます。[<設定なし>] (オプションを選択しない)、[表示しない]、[ブロック要素]、または [インフロー要素] を選択します。ブロック要素は、通常は新しい行を開始し、その親コンテナより大きくすることはできません。たとえば、<BODY> 要素内で <H1> というスタイルが設定された要素は、親である <BODY> 要素よりも大きくすることはできません。インライン要素は、通常は新しい行を開始せず、その内容の高さと幅に応じてサイズが設定されます。たとえば、[ブロック要素] を選択すると、次の CSS マークアップが挿入されます。DISPLAY:block
メモ :属性値が [<設定なし>] の場合、コードはスタイルに追加されません。
メモ :Visibility プロパティと Display プロパティは関連していますが、同じではありません。要素を非表示にしても、ブラウザでページが表示されるためにかかる時間は短縮されません。ただし、ブラウザでは、表示されない要素は無視されます。結果として、ブラウザでは、表示されない要素を含むページの方が、同じ要素が単に非表示に指定されているページよりもすばやく表示されます。さらに、非表示である要素の周囲でテキストを折り返すと、テキストは空のスペースで折り返して表示されます。レイアウト プロパティを選択する際は、この依存関係について考慮してください。
[テキストフローを有効にする]
テキストがある要素の周辺でどのように流れるかを決定する属性を設定します。[<設定なし>] (オプションを選択しない)、[横にテキストを表示しない]、[右へ]、または [左へ] を選択します。たとえば、[右へ] を選択すると、次の CSS マークアップが挿入されます。FLOAT:left
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[フローティング オブジェクトの使用を有効にする]
オブジェクトがページ上のどこで浮動できるのかを制御する属性を設定します。[<設定なし>] (オプションを選択しない)、[右または左] (オブジェクトがページの左端または右端でフロートできる)、[右側のみ] (オブジェクトがページの右端でだけフロートできる)、[左側のみ] (オブジェクトがページの左端でだけフロートできる)、または [許可しない] (オブジェクトはページ上でフロートできない) を選択します。たとえば、[右側のみ] を選択すると、次の CSS マークアップが挿入されます。CLEAR:left
メモ :属性が [<設定なし>] の場合、コードはスタイルに追加されません。
[コンテンツ]
[オーバーフロー]
要素に含まれる内容が、要素の定義済みの高さと幅を超える場合に、要素の動作を制御する属性を設定します。[<設定なし>] (オプションを選択しない)、[必要に応じてスクロールバーを使用] (内容が定義済みの要素サイズより大きな場合にスクロール バーを表示)、[常にスクロールバーを使用] (スクロール バーを常に表示)、[コンテンツをクリップ]] (内容を表示できるように要素を拡張)、または [コンテンツをクリップしない] (要素サイズより大きな内容を表示しない) のいずれかを選択します。たとえば、[内容はクリップされていません。] を選択すると、次の CSS マークアップが挿入されます。OVERFLOW:visible
メモ :属性値が [<設定なし>] の場合、コードはスタイルに追加されません。
[クリップ]
要素のどの四角形部分を表示するかを制御する属性を設定します。たとえば、要素の右上端だけを表示できます。1 つ以上のフィールド ([上]、[下]、[左]、または [右]) に値を入力し、単位を [px] (既定)、[pt]、[pc]、[mm]、[cm]、[in]、[em]、[ex]、または [%] の中から選択します。
絶対的に配置された要素だけをクリッピングできます。指定する値は、要素の境界に関連します。たとえば、Top クリッピング値を 40px に設定した場合、要素の 0px (要素の上部) から 40px までの部分は表示されません。同様に、[上] フィールドと [下] フィールドに「50」と入力し、既定の単位オプションを受け入れた場合は、次の CSS マークアップが挿入されます。
CLIP: rect(50px auto 50px auto)
| メモ : |
|---|
4 つのクリッピング フィールドのいずれかに値を割り当てなかった場合、それらのフィールドには auto 値が割り当てられ、未指定の境界はクリッピングされません。 |
[ページ ブレークの印刷]
次の属性は、スタイルを使用した要素内で発生する改ページの場所を制御します。
[前へ]
[<設定なし>] (オプションを選択しない)、[自動]、または [常に改ページを挿入] を選択します。たとえば、[ページ ブレークを実行] を選択すると、次の CSS マークアップが挿入されます。PAGE-BREAK-BEFORE:always
[後ろへ]
[<設定なし>] (オプションを選択しない)、[自動]、または [常に改ページを挿入] を選択します。たとえば、[ページ ブレークを実行] を選択すると、次の CSS マークアップが挿入されます。PAGE-BREAK-AFTER:always
参照
概念
参照
[フォント] ([スタイル ビルダ] ダイアログ ボックス)