CSSチュートリアル⑥ DW4のCSSプロパティの詳細解説

Dreamweaver4 の CSS スタイルには、W3C 仕様で定義されているすべての CSS1 属性が含まれており、これらの属性は、次のように Type、Background、Block、Box、Border、List (List)、Positioning (Positioning)、および Extensions (Extensions) の 8 つの部分に分割されます。以下に詳しく説明します。

1. タイプ

タイプパネルは主に、テキストのフォント、サイズ、色、効果などの基本的なスタイルを設定するために使用されます。設定する際は、変更が必要な属性のみを設定し、変更する必要のない属性は空のままにします。

注: * が付いた属性名は、ドキュメントの編集時にスタイル効果を表示できないことを意味します。効果を確認するには、ブラウザで開く必要があります。

フォント: フォントファミリーを設定します。フォントファミリーとは何ですか?テキストに複数のフォントを設定し、最初のフォントで表示できない文字があった場合に、2 番目以降のフォントが自動的に表示されるようにすることを指します。対応する CSS プロパティは「font-family」です。

注: Dreamweaver4 には 6 シリーズの英語フォントが組み込まれており、通常、より見栄えの良い「Verdana、Arial、Helvetica、sans-serif」シリーズの英語フォントを使用します。これらのフォント ファミリを使用しない場合は、フォント シリーズを自分で編集する必要があります。ドロップダウン ボックスの下部にある [フォント リストの編集] から新しいフォント ファミリを作成するか、フォント名を直接記述することができます。カンマで区切ってドロップダウン ボックスに手動で入力します。中国語の Web ページのデフォルトのフォントは Song Diagnostic です。通常は空白のままにし、フォントを選択しません。

サイズ: テキストのサイズを定義します。数値と測定単位を選択して特定のフォント サイズを選択することも、相対的なフォント サイズを選択することもできます。ブラウザ内でテキストが歪まないように、単位としてピクセルを使用することをお勧めします。一般に、小さなフォントには比較的標準的な 12px が使用されます。対応する CSS プロパティは「font-size」です。

注: CSS における長さの単位は、絶対的な長さの単位と相対的な長さの単位に分けられます。一般に、一般的に使用される絶対的な長さの単位は次のとおりです。 px: (ピクセル) 長さはディスプレイの解像度に応じて決定されます。

pt: (フォント サイズ) Windows システムによって定義されたフォント サイズに従って長さを決定します。

mm、cn、in: (ミリメートル、センチメートル、インチ) 表示されている実際のサイズに基づいて長さを決定します。このような単位は、モニターの解像度が変わっても変わりません。

相対的な長さの単位は次のとおりです:

em: 現在のテキストのサイズ。例: {font-size:2em} は、テキスト サイズが元のサイズの 2 倍であることを意味します。

例: 現在の文字「x」の高さ。通常はフォント サイズの半分です。

%: サイズを現在のテキストのパーセンテージとして定義します。例: {font-size:300%} は、テキスト サイズが元のサイズの 3 倍であることを意味します。

小、大: 現在のサイズより 1 レベル小さい、または 1 レベル大きいサイズを示します。 style: フォント スタイルを標準、斜体、または斜体として定義します。 Italic と Oblique は斜体のフォントです。デフォルト設定は「通常」です。対応する CSS プロパティは「font-style」です。

注: Italic と Oblique はどちらも斜体フォントです。それらの違いは、Italic は斜体フォントであるのに対し、Oblique は斜体フォントであることです。斜体のないフォントの場合は、Oblique を使用する必要があります。

行の高さ: テキストが配置される行の行の高さを設定します。デフォルトは「標準」ですが、自分で正確な値を入力して測定単位を選択することもできます。より直観的な書き方はパーセンテージを使用することです。たとえば、140% は行の高さがテキスト サイズの 1.4 倍に等しいことを意味します。対応する CSS プロパティは「line-height」です。

装飾: テキストに下線、上線、スルーライン、点滅を追加します。これらの効果は同時に存在させることができ、効果の前のチェックボックスを選択するだけです。対応する CSS プロパティは「text-decoration」です。

注: リンクのデフォルト設定は [下線] ですが、[なし] を選択すると下線を削除できます。ブリンク（フラッシュ効果）はNCブラウザのみで見ることができます。

太さ: フォントの太字テキストのポイント サイズを指定します。標準は 400 に相当し、太字は 700 に相当します。太字の場合は、通常、太字が使用されます。対応する CSS プロパティは「font-weight」です。

バリアント: フォントのバリアントを選択できます。スモールキャップが選択されている場合、このスタイル領域の文字はすべて大文字になります。対応する CSS プロパティは「font-variant」です。

大文字: 選択範囲内の各単語の最初の文字を大文字に変換するか、単語をすべて大文字またはすべて小文字にします。パラメータ: Capitalize (単語の最初の文字を大文字にする)、uppercase (大文字に変換)、 lowercase (小文字に変換)、none (変換しない)。対応する CSS プロパティは「text-transform」です。

色: テキストの色を定義します。対応するCSSプロパティは「color」です。

注: CSS で色の値を表すには 3 つの方法があります:

l #RRGGBB 形式は、赤、緑、青の 3 色の値の組み合わせです。各色の値は 2 です。 -digit 「00～FF」の16進数 正の整数とします。例: #FF0000 は赤を意味し、#FFFF00 は黄色を意味します。

l rgb(R,G,B) 形式。RGB は 0 ～ 255 の範囲の 3 色の値です。たとえば、rgb(255,0,0) は赤を意味し、rgb(255,255,0) は黄色を意味します。

l 色の名前を使用します。 CSS では、すでに定義されている色の名前を使用できます。たとえば、赤は赤を意味し、黄は黄色を意味します。

2. 背景

背景パネルは主に、背景色、背景画像、背景画像コントロールなどの要素の背景を設定するために使用されます。一般的には、BODY（ページ）、TABLE（テーブル）、p（エリア）の設定です。

背景色: 要素の背景色を設定します。対応する CSS プロパティは「background-color」です。

背景画像: 要素の背景画像を設定します。対応する CSS プロパティは「background-image」です。

繰り返し: 背景画像を繰り返すかどうか、またどのように繰り返すかを決定します。繰り返しなし: 要素の先頭に画像を 1 回表示します。繰り返し: 要素の背景部分に画像を水平方向と垂直方向に並べて表示します。 [Repeat-x] および [Repeat-y]: それぞれ水平方向と垂直方向に繰り返します。デフォルトは [Repeat] です。対応する CSS プロパティは「background-repeat」です。

注: 要素の BODY を定義すると、ページの背景を繰り返すかどうかを制御できます。

添付ファイル: 背景画像またはコンテンツのスクロールを修正しました。パラメータfixedは固定背景を示し、scrollはコンテンツとともにスクロールする背景を示します。対応する CSS プロパティは「background-attachment」です。

注: 要素の BODY を定義すると、ページの背景を固定できます。

水平: 背景画像の水平位置を指定します。 left (左)、center (中央)、right (右) を指定できます。また、20px は背景が左から 20 ピクセルであることを意味します。対応する CSS プロパティは「background-position」です。

垂直: 背景画像の垂直位置を指定します。上 (top)、中央 (center)、下 (下) として指定できます。数値で指定することもできます。対応する CSS プロパティは「background-position」です。

注: 水平位置と垂直位置は同じ CSS プロパティを使用するため、設定する場合は注意してください。

3. ブロック

ブロックパネルは主に、オブジェクトテキストのテキスト間隔、配置、上付き文字、下付き文字、配置、最初の行のインデントなどを設定するために使用されます。

単語の間隔: 単語間の間隔を設定します。マイナスの値も設定可能です。対応する CSS プロパティは「word-spacing」です。

注: 一般に、IE はこの属性をサポートしておらず、MAC プラットフォーム上の IE4+ でのみ使用できます。

文字間隔: 文字間の間隔を設定します。負の値も指定可能です。中国語も文字であるため、このパラメータで文字間の間隔を設定できます。対応する CSS プロパティは「letter-spacing」です。

垂直方向の配置: 要素の垂直方向の配置を指定します。 sub (下付き)、super (上付き)、top (上揃え)、middle (中央揃え)、bottom (下揃え) を指定できます。対応する CSS プロパティは「vertical-align」です。

テキストの配置: テキストの配置を設定します。 Left（左揃え）、Right（右揃え）、Center（中央）、Justify（両端揃え）。対応する CSS プロパティは「text-align」です。

テキストのインデント: テキストの最初の行のインデント値を設定します。負の値を指定すると、テキストの最初の行が外側に引っ張られます。各段落の前に 2 つのスペースを残すには、em を 2em に設定します。これは、em が現在のフォント サイズであり、2em が 2 文字のサイズであるためです。対応する CSS プロパティは「text-indent」です。

空白: 要素内の空白文字の処理方法を設定します。 3 つのオプションから選択できます: Normal はすべての空白文字を圧縮します; Pre はこれらの空白文字を pre タグ内のテキストと同じように処理します (つまり、スペース、タブ、復帰などを含むすべての空白文字が圧縮されます) ) 予約済み); Nowrap は、br タグに遭遇した場合にのみテキストを折り返すことを指定します。対応する CSS プロパティは「空白」です。
4. ボックス

ボックスパネルは主にオブジェクトの境界、間隔、高さ、幅、浮動方法を設定します。

幅: 要素の幅を定義します。対応する CSS プロパティは「width」です。

高さ: 要素の高さを定義します。対応する CSS プロパティは「高さ」です。

注: 幅と高さによって定義されるオブジェクトは、主に画像、表、レイヤーなどです。

Float: 要素がどのように浮動するかを定義します。 left はオブジェクトが左側に浮かぶことを意味し、right はオブジェクトが右側に浮かぶことを意味し、 none はオブジェクトが浮かないことを意味します。対応する CSS プロパティは「float」です。

クリア: 要素をフローティングにできません。 left は左側でフローティング オブジェクトが許可されていないことを意味し、right はフローティング オブジェクトが右側で許可されていないことを意味し、 none は両側でフローティング オブジェクトが許可され、両方のフローティング オブジェクトが許可されていないことを意味します。対応する CSS プロパティは「clear」です。

パディング: 要素のコンテンツとその境界線の間のスペースを定義します (要素に境界線がない場合、それはページの余白を指します)。 top (上部パディング)、right (右パディング)、bottom (下部パディング)、および left (左パディング) の値をそれぞれ設定できます。対応する CSS プロパティは、「padding;padding-top;padding-right;padding-bottom;padding-left」です。

マージン: 要素の境界線と他の要素の間の距離を定義します (境界線がない場合は、コンテンツ間の距離を意味します)。 top（上枠）、right（右枠）、bottom（下枠）、left（左枠）の値をそれぞれ設定できます。対応する CSS プロパティは、「margin; margin-top; margin-right; margin-bottom; margin-left」です。

以下は、フィラー、境界線、境界線の関係図です:

5. 境界線

境界線パネルでは、オブジェクトの境界線の幅、色、スタイルを設定できます。

幅: 要素の側面の幅を設定します。 Top（上幅）、Right（右幅）、Bottom（下幅）、Left（左幅）の値をそれぞれ設定できます。対応する CSS プロパティは、「border; border-top; border-right; border-bottom; border-left」です。

色: 境界線の色を設定します。各エッジの色を個別に設定できます。対応する CSS プロパティは、「border-color; border-top-color; border-right-color; border-bottom-color; border-left-color」です。

注: 異なる色を設定することで明るいエッジ効果と暗いエッジ効果を作成し、要素を立体的に見せることができます。

style: 境界線のスタイルを設定します。なし（枠線なし）、点線（点線）、破線（破線）、実線（実線）、ダブル（二重線）、グルーブ（溝）、リッジ（凸溝）、インセット（凹エッジ）に設定可能、アウトセット (凸エッジ) およびその他の境界線スタイル。対応する CSS プロパティは「border-style」です。

注: 点線 (点線) と破線 (破線) は、IE5.5 以降または MAC プラットフォームでサポートされている必要があります。サポートされていない場合、効果は実線になります。

6. リスト

リストパネルでは、リスト項目のスタイル、リスト項目の画像、位置を設定できます。

タイプ: リスト項目で使用されるデフォルトのタグを設定します。設定できるスタイルは、ディスク（実線の円）、サークル（中空の円）、スクエア（正方形）、10進数（アラビア数字）、ローワーローマ（小文字のローマ数字）、アッパーローマン（大文字のローマ数字）、ローワーです。 -アルファ (英小文字)、アルファ大文字 (英大文字)、なし (黒丸なし)。対応する CSS プロパティは「list-style-type」です。

箇条書き画像: リスト項目の画像を設定します。値は、画像の URL アドレスまたはパスです。 対応する CSS プロパティは「list-style-image」です。

位置: リスト項目がテキスト内にあるか、テキスト外にあるかを設定します。内側: リスト項目マークがテキストの内側に配置されます。 外側: リスト項目マークがテキストの外側に配置されます。対応する CSS プロパティは「list-style-position」です。

7. 配置

配置パネルは、レイヤー内のオブジェクトの配置に相当します。HTML の p タグに相当します。定義は CSS 定義のレイヤーとして考えることができます。

タイプ: オブジェクトの配置方法を設定します。 Absolute (絶対的な位置決め)、Relative (相対的な位置決め)、および Static (特別な位置決めなし) の 3 つの方法があります。対応するCSSプロパティは「position」です。

可視性: オブジェクト配置レイヤーの初期表示状態を設定します。 3 つの状態があります: Inherit (親レイヤーの表示プロパティを継承)、Visible (オブジェクトが表示されます)、および Hidden (非表示)。対応する CSS プロパティは「visibility」です。

Z-Index: オブジェクトの重なり順を設定します。大きい番号のレイヤーは、小さい番号のレイヤーの上に表示されます。変数の値は正または負の値になります。対応する CSS プロパティは「z-index」です。

オーバーフロー: レイヤーのコンテンツがレイヤーのサイズを超えた場合の処理​​方法を設定します。処理方法は 4 つあります。visible はレイヤーのサイズを大きくしてレイヤーのすべてのコンテンツを表示します。hidden はレイヤーのサイズを変更せず、レイヤーを超えたコンテンツを切り取ります。常にスクロールを表示します。バー; 自動、コンテンツがレイヤーの境界を超えた場合にのみスクロール バーが表示されます。対応する CSS プロパティは「オーバーフロー」です。

配置: オブジェクト配置レイヤーの位置とサイズを設定します。 left（左配置）、top（上配置）、width（幅）、height（高さ）をそれぞれ設定できます。対応する CSS プロパティは「left、top、width、height」です。

クリップ: 位置決めレイヤーの表示領域を定義します。領域外は不可視領域となり透明になります。これは、位置決めレイヤー上に長方形のマスクを配置した効果として理解できます。対応する CSS プロパティは「clip」です。

注: このパラメータは絶対位置指定でのみ有効です。

注: [タイプ] で絶対配置が設定されている場合、絶対配置レイヤーがオブジェクトに追加されます。このCSSで作成したレイヤーは通常のレイヤーと同様にプロパティパネルがあり、レイヤー管理パネルにも表示されます。この位置決めレイヤーのプロパティ パネルを設定することで上記のパラメーターを変更できますが、このプロパティ パネルで変更した値はオブジェクト タグの後ろにインライン スタイルとして追加されます。次の図は位置決めレイヤーのプロパティ パネルです。 8. 拡張機能 )

改ページ: 印刷時にスタイル制御オブジェクトの前後で改ページを強制します。

Before: オブジェクトの前に表示されるページ区切り文字を設定します。 「常に」に設定すると、ページ区切り文字が常にオブジェクトの前に挿入されます。対応する CSS プロパティは「page-break-before」です。

変更後: オブジェクトを設定した後に表示されるページ区切り文字。 「常に」に設定すると、常にオブジェクトの後に改ページが挿入されます。対応する CSS プロパティは "'> です。

注: 上記の IE5 は、常に値と空の値 (null) のみをサポートします。

Cursor: スタイルによって制御されるオブジェクト上をマウスがスライドするときにマウスの形状を変更します。手に設定 (手の形)、十字線 (「十」の形)、テキスト (「I」の形)、待機 (待機)、デフォルト (デフォルト)、ヘルプ (ヘルプ)、e-resize (東矢印)、ne-resize (北東の矢印)、n-resize (北の矢印)、nw-resize (北西の矢印)、w-resize (西の矢印)、sw-resize (南西の矢印)、s-resize (南の矢印)、se-resize (南東)矢印)、および自動 (自動)

フィルター: スタイルにフィルター効果を追加します。この属性には多くの内容が含まれるため、次の章でフィルタについて個別に紹介します。

2. フィルター

CSS は、いくつかの組み込みマルチメディア フィルター効果を提供し、画像、テキスト コンテナーなどの標準 HTML 要素に視覚的なフィルターや変換効果を追加できます。 Dreamweaver4 では、以下に示すように、16 個のフィルターから選択できます:

それでは、Dreamweaver4 でこれらの CSS フィルターを便利に使用する方法を見てみましょう。

カスタム スタイル「.filter」を作成し、フィルター ドロップダウン ボックスでアルファ フィルターを選択します。「Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=?, FinishX= ? , FinishY=?)" の不透明度パラメータは 50 に設定され、以下に示すように後続のパラメータはすべて削除されます。

OK を押すと、「.filter」カスタム スタイルが作成されます。このスタイルを画像に適用します。 , 画像は半透明です。このスタイルを表に適用すると、表も半透明になります。すべてのフィルター効果はブラウザーでのみ表示されることに注意してください。以下は元のコードです: