DreamweaverのCSSプロパティパネルでレイアウトオプションを使用する方法 - CSS上部のダミー

CSS Designerのプロパティパネルの上部には、ページレイアウトの作成に使用されます。これらのオプションを使用して、高さ、幅、配置、配置、および間隔を指定します。これらの設定は、イメージを整列させ、タグを配置して複数列のレイアウトを作成するなどの作業を行うために、クラスおよびIDスタイルを使用してページレイアウトを作成するのに最適です。

<！ -

幅：

• タグなど、寸法を指定できる任意の要素の幅を指定します。サイズオプションは、ピクセル（px）、ポイント（pt）、ピカ（pc）、パーセント（％）、em、rem、ex、およびchです。 高さ：

• 寸法を指定できる要素の高さを指定します。 最小値と最大値

  • 幅： タグおよびその他のブロック要素の最小幅と最大幅を指定します。これらのオプションは、幅をブラウザウィンドウのパーセンテージとして指定する場合に便利です。たとえば、デザインの幅をブラウザのウィンドウの80％に設定してから、最大幅を1000ピクセルに設定して、レイアウトが1000ピクセルよりも広く伸びないようにすることができます。 <！ - 2 - >

    最小値と最大値：

  • タグと他のブロック要素の最小高さと最大高さを指定します。 マージン：

  • 要素の周りのスペース量を設定します。マージンを使用すると、イメージのテキストと2つのタグの間など、要素の端とページ上の他の要素との間にスペースを作成できます。上、右、下、左それぞれに余白を設定することができます。パディングは、ピクセル、ポイント、インチ、センチメートル、ミリメートル、ピクカ、em、exs、およびパーセンテージで測定されます。 <！ - 3 - >

    パディング：

  • 要素の枠内のスペース量を設定します。たとえば、パディングを使用して、タグの境界線とその内容の間にスペースを作成することができます。上、右、下、左にパディングを個別に設定できます。パディングは、ピクセル、ポイント、インチ、センチメートル、ミリメートル、ピクカ、em、exs、およびパーセンテージで測定されます。 パディングと余白の間隔を設定するのは難しいことがあります。マージンとパディングをイメージやタグなどの要素に追加すると、その要素の全体的なサイズと、レイアウトで必要なスペースの量が増えます。

    位置：

• [位置]オプションは、[プロパティ]パネルの[レイアウト]セクションの下部から利用でき、要素がページ上に配置される方法を変更します。配置は、ブロックレベルの要素（表、リスト、ヘッダー、段落、タグなど）をブラウザーに表示する方法を大幅に変更する可能性があります。 継承：

  • このデフォルトオプションを指定する必要はありません。別のオプションが選択されていない限り、各要素は親要素の位置を継承します。 静的：

  • コンテンツをドキュメントのフロー内のその場所に配置します。デフォルトでは、 配置可能なすべてのHTML要素は静的です。 絶対： 上部および左の座標を使用して、ブラウザウィンドウの左上隅または要素を含む要素の左上隅を基準にした要素の位置を制御します。

  • 固定： ブラウザの左上隅を基準にして要素を配置します。ユーザーがページを上下にスクロールしても、固定配置を使用する要素の内容は変わりません。

  • 相対： 要素をページに挿入する点またはそのコンテナを基準にして相対的な位置を使用します。

  • 浮動小数点： 画像やタグなどの要素をページやその他のコンテナの左右に並べ、テキストやその他の要素を囲むようにします。 「浮動小数点数」フィールドのアイコンをクリックして、「継承」、「右」、「左」、または「なし」の4つのオプションを指定します。

    

  • クリア： フローティングコンテンツが領域の左右または要素の両側に重ならないようにします。このオプションは、サイドバーを作成するために使用される

  • タグなどのフローティング要素が、ページのフッタを作成するために使用されるタグなど、別のブロックレベルの要素と重なっている場合に便利です。 Overflow-xおよび-y： タグなどのコンテナが要素の高さまたは幅全体に収まらない場合、ブラウザに要素の内容を表示する方法を伝えます。オーバーフローオプションは

  • 表示： コンテナの定義された高さまたは幅を超えて拡張されている場合でも、イメージやテキストなどのコンテンツを表示したままにします。

  • 隠し： コンテンツがコンテナのサイズを超えた場合、コンテンツを切り取ります。このオプションはスクロールバーを提供しません。

  • スクロール： 内容が要素のサイズを超えているかどうかにかかわらず、スクロールバーをコンテナに追加します。

  • Auto： スクロールバーは、コンテナのコンテンツが境界を超えた場合にのみ表示されます。

  • 表示： ブラウザで要素を描画するかどうか、またはどのように描画するかを指定します。たとえば、[なし]を選択して、インラインを選択するか、要素を非表示にするか、非表示にするかによって、並べ替えられていないリストの位置を水平から垂直に変更します。表示オプションをスクリプト言語とともに使用すると、要素の表示を動的に変更できます。

• 可視性： ブラウザが要素を表示するかどうかを制御します。 Visibilityオプションは

• Inherit： 要素に含まれています（デフォルト）。

  • 表示： 要素が表示されます。

  • 非表示： 要素が表示されません。

  • 折りたたみ： HTMLテーブルで使用する。折りたたみを使用して、テーブルレイアウトの残りの部分に影響を与えることなく、列または行を削除することができます。

  • Z-インデックス： 要素の積み重ね順序を制御するZ座標上の要素の位置を制御します。高い番号の要素は、低い番号の要素と重なります。

• 不透明度： 要素の不透明度を0（完全に透明）から1.0（完全に不透明）に制御します。たとえば、入力した場合。 5の不透明度フィールドでは、要素の不透明度が50％に低下します。