CSS プロパティの設定



テキストのフォント、背景イメージと背景色、間隔とレイアウトプロパティ、リストのエレメントの外観など、CSS ルールのプロパティを定義することができます。 最初に新しいルールを作成し、次に以下のいずれかのプロパティを設定します。

CSS タイププロパティの定義

[CSS ルール定義] ダイアログボックスの [タイプ] カテゴリを使用して、CSS スタイルの基本的なフォントおよびタイプの設定を定義します。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [タイプ] を選択し、スタイルプロパティを設定します。

    以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。

    Font-family
    スタイルのフォントファミリーを 1 つまたは複数設定します。 ブラウザのテキストに使用されるのは、リストにあるフォントのうち、ユーザーのシステムにインストールされている最初のフォントです。 Internet Explorer 3.0 でも表示できるようにするには、最初に Windows のフォントを指定してください。 フォント属性は、両方のブラウザでサポートされています。

    Font-size
    テキストのサイズを定義します。 数値とサイズ単位を選択して特定のサイズを選択することも、相対的なサイズを選択することもできます。 ピクセルを使用すると、ブラウザでテキストが変形されなくなります。 サイズ属性は、両方のブラウザでサポートされています。

    Font-style
    フォントスタイルとして [normal]、[italic]、または [oblique] を指定します。 初期設定は [normal] です。 スタイル属性は、両方のブラウザでサポートされています。

    Line-height
    テキストが配置される行の高さを設定します。 この設定は一般に行間と呼ばれます。 [normal] を選択すると、フォントサイズに適した高さが自動的に計算されます。または、正確な数値を入力し、使用する単位を選択します。ラインの高さ属性は、両方のブラウザでサポートされています。

    Text-decoration
    テキストにアンダーライン、オーバーライン、または取り消し線を付けます。テキストを点滅させることもできます。 標準テキストの初期設定は [none] です。 リンクの初期設定は [underline] です。 このオプションを [none] に設定すると、特別なクラスを定義することによって、リンクからアンダーラインを削除できます。飾り属性は、両方のブラウザでサポートされています。

    Font-weight
    特定または相対的な太さをフォントに適用します。 [normal] は 400、[bold] は 700 に相当します。 ウエイト属性は、両方のブラウザでサポートされています。

    Font-variant
    テキストにスモールキャプスを設定します。 Dreamweaver のドキュメントウィンドウでは、この属性は表示されません。 バリアント属性は、Internet Explorer ではサポートされていますが、Netscape Navigator ではサポートされていません。

    Text-transform
    選択範囲の各単語の最初の文字を大文字にするか、あるいはテキストのすべての文字を大文字または小文字にするかを設定します。 大文字/小文字属性は、両方のブラウザでサポートされています。

    Color
    テキストカラーを設定します。 カラー属性は、両方のブラウザでサポートされています。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルの背景プロパティの定義

[CSS ルール定義] ダイアログボックスの [背景] カテゴリを使用して、CSS スタイルの背景設定を定義します。 背景プロパティは、Web ページの任意のエレメントに適用できます。 たとえば、テキスト、テーブル、ページなどのページエレメントの背後に背景色や背景イメージを追加するスタイルを作成できます。 また、背景イメージの位置も設定できます。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [背景] を選択し、必要なスタイルプロパティを設定します。

    以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。

    Background-color
    エレメントの背景色を指定します。 背景色属性は、両方のブラウザでサポートされています。

    Background-image
    エレメントの背景イメージを指定します。背景イメージ属性は、両方のブラウザでサポートされています。

    Background-repeat
    背景イメージの繰り返しの有無と、繰り返しの方法を指定します。 リピート属性は、両方のブラウザでサポートされています。
    • [no-repeat] を選択すると、イメージはエレメントの開始位置に 1 回表示されます。

    • [repeat] を選択すると、エレメントの背後にイメージが水平および垂直方向にタイル状に表示されます。

    • [repeat-x] または [repeat-y] を選択すると、イメージが水平または垂直方向に帯状に表示されます。 イメージは、エレメントの境界内に収まるように切り抜かれます。

    注意: [repeat] プロパティを使用して body タグを再定義すると、繰り返しのない背景イメージを設定できます。

    Background-attachment
    背景イメージを元の場所に固定するか、コンテンツと共にスクロールするかを指定します。 ブラウザによっては、[fixed] オプションを指定しても [scroll] と同様に処理されることがあります。 この属性は Internet Explorer ではサポートされていますが、Netscape Navigator ではサポートされていません。

    Background-position (X)、Background-position (Y)
    背景イメージを最初に配置する位置を、エレメントを基準として指定します。 このオプションを使用して、背景イメージをページの縦方向 (Y) 中央および横方向 (X) 中央に揃えることができます。添付プロパティが [fixed] の場合は、この位置はエレメントではなくドキュメントウィンドウが基準になります。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルのブロックプロパティの定義

[CSS ルール定義] ダイアログボックスの [ブロック] カテゴリを使用して、タグとプロパティの間隔および整列を定義します。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [ブロック] を選択し、以下のいずれかのスタイルプロパティを設定します。 以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。
    Word-sapcing
    単語間のスペースを設定します。 特定の値を指定するには、ポップアップメニューから [(value)] を選択し、数値を入力します。 2 つ目のポップアップメニューで、単位 (ピクセル、ポイントなど) を選択します。
    注意: 負の値を入力することもできますが、表示はブラウザに依存します。 Dreamweaver のドキュメントウィンドウでは、この属性は表示されません。

    Letter-spacing
    文字間のスペースを拡張または縮小します。 文字間のスペースを縮小するには、負の値 (-4 など) を指定します。 文字間隔の設定は、テキストの行揃え設定に優先します。 文字間隔属性は、Internet Explorer 4 以降および Netscape Navigator 6 でサポートされています。

    Vertical-align
    このオプションを適用するエレメントの縦方向の整列を指定します。 Dreamweaver では、この属性は <img> タグに適用された場合にのみ、ドキュメントウィンドウに表示されます。

    Text-align
    エレメント内のテキストの整列方法を指定します。 テキストの行揃え属性は、両方のブラウザでサポートされています。

    Text-indent
    テキストの最初の行をどれだけインデントするかを指定します。 負の値を入力してインデントを解除することもできますが、表示はブラウザに依存します。 Dreamweaver では、この属性はタグがブロックレベルのエレメントに適用された場合にのみ、ドキュメントウィンドウに表示されます。 テキストインデント属性は、両方のブラウザでサポートされています。

    White-space
    エレメント内のホワイトスペースの処理方法を指定します。 次の 3 つのオプションから選択します。[normal] を選択すると、ホワイトスペースは表示されません。[pre] を選択すると、テキストは pre タグに囲まれているものとして処理されます。したがって、スペース、タブ、リターンなどのすべてのホワイトスペースが残ります。[nowrap] を選択した場合は、br タグの位置でのみテキストが折り返されます。 Dreamweaver のドキュメントウィンドウでは、この属性は表示されません。 White-space 属性は、Netscape Navigator および Internet Explorer 5.5 でサポートされています。

    Display
    エレメントの表示または非表示、およびエレメントの表示方法を指定します。 [none] を選択すると、エレメントは非表示になります。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルのボックスプロパティの定義

[CSS ルール定義] ダイアログボックスの [ボックス] カテゴリを使用して、ページ上のエレメントの配置を制御するタグおよびプロパティの設定を定義します。

余白およびマージンを適用する場合は、エレメントの個々の辺に設定を適用できます。また、[すべて同一] を使用して、エレメントのすべての辺に同じ設定を適用することもできます。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [ボックス] を選択し、以下のいずれかのスタイルプロパティを設定します。 以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。
    Width および Height
    エレメントの幅と高さを設定します。

    Float
    エレメントのどちら側に他のエレメント (テキスト、絶対位置の Div、テーブルなど) を回り込ませるかを設定します。 他のエレメントは、通常どおりフローティングエレメントの周囲に配置されます。 フロート属性は、両方のブラウザでサポートされています。

    Clear
    どちら側で AP エレメントを禁止するかを定義します。 [Clear] で指定した側に AP エレメントが表示されるとき、Clear 属性が設定されているエレメントはその下に移動します。 Clear 属性は、両方のブラウザでサポートされています。

    Padding
    エレメントの内容とそのボーダー (ボーダーがない場合はマージン) との間のスペースの量を指定します。 [すべて同一] オプションをオフにすると、エレメントのそれぞれの辺の余白を設定できます。

    すべて同一
    オンにすると、エレメントの上下左右に同じ余白プロパティが適用されます。

    Margin
    エレメントのボーダー (ボーダーがない場合は余白) と他のエレメントとの間のスペースの量を指定します。 Dreamweaver では、この属性はブロックレベルのエレメント (段落、見出し、リストなど) に適用された場合にのみドキュメントウィンドウに表示されます。 [すべて同一] オプションをオフにすると、エレメントのそれぞれの辺のマージンを設定できます。

    すべて同一
    オンにすると、エレメントの上下左右に同じマージンプロパティが適用されます。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルのボーダープロパティの定義

[CSS ルール定義] ダイアログボックスの [ボーダー] カテゴリを使用して、エレメントを囲むボーダーの幅、カラー、スタイルなどの設定を定義します。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [ボーダー] を選択し、以下のいずれかのスタイルプロパティを設定します。 以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。
    タイプ
    ボーダーのスタイルの表示方法を設定します。 スタイルの表示方法は、ブラウザに依存します。 [すべて同一] オプションをオフにすると、エレメントのそれぞれの辺のボーダースタイルを設定できます。

    すべて同一
    オンにすると、エレメントの上下左右に同じボーダーのスタイルプロパティが適用されます。

    Width
    エレメントのボーダーの太さを設定します。 幅属性は、両方のブラウザでサポートされています。 [すべて同一] オプションをオフにすると、エレメントのそれぞれの辺のボーダー幅を設定できます。

    すべて同一
    オンにすると、エレメントの上下左右に同じボーダー幅が適用されます。

    Color
    ボーダーのカラーを指定します。 各辺のカラーを個別に設定できますが、表示はブラウザに依存します。 [すべて同一] オプションをオフにすると、エレメントのそれぞれの辺のボーダーカラーを設定できます。

    すべて同一
    オンにすると、エレメントの上下左右に同じボーダーカラーが適用されます。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルのリストプロパティの定義

[CSS ルール定義] ダイアログボックスの [リスト] カテゴリでは、リストタグのリスト設定 (ブレットサイズやタイプなど) を定義します。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [リスト] を選択し、以下のいずれかのスタイルプロパティを設定します。 以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。
    List-style-type
    ブレットまたは番号の表示方法を設定します。 タイプ属性は、両方のブラウザでサポートされています。

    List-style-image
    ブレットに使用するカスタムイメージを指定します。 [参照] (Windows) または [選択] (Macintosh) をクリックしてイメージを参照するか、イメージのパスを入力します。

    List-style-position
    リスト項目のテキストを折り返してインデントを行うか (外側)、またはテキストを折り返して左マージンから表示するか (内側) を設定します。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルの位置プロパティの定義

位置スタイルプロパティは、選択した CSS スタイルに関連付けされたコンテンツをどのようにページに配置するかを指定します。

  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [位置] を選択し、必要なスタイルプロパティを設定します。

    以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。

    Position
    ブラウザでの選択したエレメントの配置方法を以下のように指定します。
    • [absolute] では、最も近い絶対位置または相対位置に配置された祖先を基準にして、[Placement] の各ボックスに入力した座標値を使用してコンテンツを配置します。絶対位置または相対位置に配置された祖先が存在しない場合は、ページの左上隅を基準にします。

    • [relative] では、ドキュメントのテキストフローでのブロックの位置を基準として、[Placement] の各ボックスに入力した座標値を使用してコンテンツブロックを配置します。 たとえば、相対位置で 20px の上と左の座標をエレメントに指定すると、それぞれがエレメントをフローの標準位置から 20px 右および 20px 下に移動します。 また、上、左、右、または下の各座標を指定し、または指定せずに、エレメントを相対位置に配置し、絶対位置の子のコンテキストを設定することができます

    • [fixed] では、ブラウザの左上を基準として、[Placement] の各ボックスに入力した座標値を使用してコンテンツを配置します。 ユーザーがページをスクロールする場合、コンテンツはこの位置に固定されたままになります。

    • [static] では、テキストフロー内の位置にコンテンツを配置します。 これは、配置可能なすべての HTML エレメントの初期設定の位置です。

    Visibility
    コンテンツの初期表示を設定します。 [Visibility] プロパティを指定しない場合、初期設定により、コンテンツは親タグの値を継承します。 body タグの初期設定の可視性を表示できます。 以下の可視性オプションのいずれかを選択します。
    • [inherit] では、コンテンツの親の表示/非表示プロパティが継承されます。

    • [visible] では、親の値には関係なく、コンテンツが表示されます。

    • [hidden] では、親の値には関係なく、コンテンツは非表示になります。

    Z-Index
    コンテンツの重ね順を指定します。 Z-Index が大きいエレメントが、Z-Index が小さい (または、何も設定されてない) エレメントの上に表示されます。 プラスとマイナスの両方の値を指定できます。 コンテンツが絶対位置に配置されている場合は、[AP エレメント] パネルを使用して重ね順を簡単に変更できます。

    Overflow
    コンテナのコンテンツ (たとえば、Div または P) がそのサイズを超過した場合に生じる動作を設定します。 これらのプロパティは、コンテナのサイズを次のように制御します。
    • [visible] を選択すると、コンテンツがすべて表示されるように、コンテナのサイズが拡大します。 コンテナは、右下方向に拡大します。

    • [hidden] を選択すると、コンテナのサイズは変更されず、これより大きいコンテンツは切り捨てられます。 スクロールバーは表示されません。

    • [scroll] を選択すると、コンテンツがコンテナのサイズを超えているかどうかにかかわらず、コンテナにスクロールバーが表示されます。 スクロールバーの表示を明示的に指定すると、動的な環境でスクロールバーが表示されたり非表示になったりすることによる混乱を回避できます。 このオプションは、ドキュメントウィンドウでは表示されません。

    • [auto] を選択すると、コンテナのコンテンツがボーダーに収まらない大きさになった場合にのみスクロールバーが表示されます。 このオプションは、ドキュメントウィンドウでは表示されません。

    Placement
    コンテンツブロックの位置とサイズを指定します。 ブラウザでの位置の解釈は、[Position] の設定により異なります。 サイズの値は、コンテンツブロックのコンテンツが指定サイズを越えた場合は無視されます。

    初期設定では、位置とサイズの単位はピクセルです。 単位として、pc (パイカ)、pt (ポイント)、in (インチ)、mm (ミリメートル)、cm (センチメートル)、(ems)、(exs)、% (親の値に対する割合) を指定することもできます。 単位は、値の後にスペースを入れず続けて入力します (例 : 3mm)。

    Clip
    コンテンツのどの部分を表示するかを定義します。 切り抜き領域を指定すれば、JavaScript のようなスクリプト言語でその領域にアクセスしてプロパティを操作し、ワイプなどの特殊効果を作成することができます。 このようなワイプは、[プロパティの変更] ビヘイビアを使用して設定できます。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。

CSS スタイルの拡張プロパティの定義

拡張スタイルプロパティには、Filter、改ページオプション、および Cursor オプションがあります。

注意: Dreamweaver にはこの他にも多数の拡張プロパティがありますが、それらのプロパティにアクセスするには [CSS スタイル] パネルを開く必要があります。 利用可能な拡張プロパティのリストを表示するには、[CSS スタイル] パネル ([ウィンドウ]-[CSS スタイル]) を開き、このパネルの下部にある [カテゴリビューの表示] ボタンをクリックして [拡張] カテゴリを展開します。
  1. [CSS スタイル] パネルが開いていない場合は、Shift + F11 キーを押して開きます。
  2. [CSS スタイル] パネルの上部ペインで既存のルールまたはプロパティをダブルクリックします。
  3. [CSS ルール定義] ダイアログボックスで [拡張] を選択し、以下のいずれかのスタイルプロパティを設定します。 以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。
    Page-break-before
    設定すると、印刷時に、このスタイルによって制御されているオブジェクトの前または後で強制的に改ページします。 ポップアップメニューから、設定するオプションを選択します。 このオプションは 4.0 ブラウザではサポートされませんが、将来のバージョンでサポートされる可能性があります。

    Cursor
    このスタイルによって制御されているオブジェクト上にポインタが移動するとポインタイメージが変化するように設定します。 ポップアップメニューから、設定するオプションを選択します。 この属性は、Internet Explorer 4.0 以降および Netscape Navigator 6 でサポートされています。

    Filter
    このスタイルによって制御されているオブジェクトに、ぼかしや反転などの特殊効果を適用します。 ポップアップメニューから効果を選びます。

  4. オプションの設定が終了したら、パネルの左側で別の CSS カテゴリを選択してさらにスタイルプロパティを設定するか、[OK] をクリックします。