テキストのフォント、背景イメージと背景色、間隔とレイアウトプロパティ、リストのエレメントの外観など、CSS ルールのプロパティを定義する方法について説明します。

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

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

設定できる CSS タイププロパティについて、いくつかを以下に説明します。

Font-family

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

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

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

カラー

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

Font-size

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

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

背景プロパティは、Web ページの任意のエレメントに適用できます。例えば、テキスト、テーブル、ページなどのページエレメントの背後に背景色や背景イメージを追加するスタイルを作成できます。また、背景イメージの位置も設定できます。

設定できる CSS 背景プロパティについて、いくつかを以下に説明します。

背景イメージ

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

Background-repeat

背景イメージの繰り返しの有無と、繰り返しの方法を指定します。リピート属性は、両方のブラウザーでサポートされています。

  • 「no-repeat」を選択すると、イメージはエレメントの開始位置に 1 回表示されます。

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

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

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

背景の固定

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

Background-position(X)、Background-position(Y)

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

背景色

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

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

タグとプロパティの間隔と整列の設定を定義できます。

Letter-spacing

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

Text-indent

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

Vertical-align

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

Text-align

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

White-space

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

Display

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

Word-sapcing

単語間のスペースを設定します。特定の値を指定するには、ポップアップメニューから「(value)」を選択し、数値を入力します。2 つ目のポップアップメニューで、単位(ピクセル、ポイントなど)を選択します。

注意 : 負の値を入力することもできますが、表示はブラウザーに依存します。Dreamweaver のドキュメントウィンドウでは、この属性は表示されません。

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

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

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

フロート

フローティングエレメントのどちら側に他のエレメントを配置するかを指定します。フローティングエレメントはフロート側に固定され、周囲の他のコンテンツはその反対側に配置されます。

例えば、右にフローティングするイメージは右側に固定され、その後に追加したコンテンツはイメージの左側に配置されます。

詳しくは、http://css-tricks.com/all-about-floats/ を参照してください。

クリア

エレメントのどちら側に他のフローティングエレメントを配置しないかを指定します。

余白

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

すべて同一

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

マージン

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

幅および高さ

エレメントの幅と高さを設定します。

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

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

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

すべて同一

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

カラー

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

タイプ

ボーダーのスタイルの表示方法を設定します。スタイルの表示方法は、ブラウザーに依存します。「すべて同一」オプションをオフにすると、エレメントのそれぞれの辺のボーダースタイルを設定できます。

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

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

List-style-type

ブレットまたは番号の表示方法を設定します。タイプ属性は、両方のブラウザーでサポートされています。

List-style-position

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

List-style-image

ブレットに使用するカスタムイメージを指定します。「参照」(Windows)または「選択」(Mac OS)をクリックしてイメージを参照するか、イメージのパスを入力します。

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

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

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

位置

ブラウザーでの選択したエレメントの配置方法を以下のように指定します。

  • 「absolute」では、最も近い絶対位置または相対位置に配置された祖先を基準にして、「Placement」の各ボックスに入力した座標値を使用してコンテンツを配置します。絶対位置または相対位置に配置された祖先が存在しない場合は、ページの左上隅を基準にします。

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

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

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

Z インデックス

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

オーバーフロー

コンテナのコンテンツ(例えば、Div または P)がそのサイズを超過した場合に生じる動作を設定します。これらのプロパティは、コンテナのサイズを次のように制御します。

  • 「visible」 を選択すると、コンテンツがすべて表示されるように、コンテナのサイズが拡大します。コンテナは、右下方向に拡大します。

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

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

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

Clip

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

Placement

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

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

表示/非表示

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

  • 「inherit」 では、コンテンツの親の表示/非表示プロパティが継承されます。

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

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

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

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

Cursor

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

Filter

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

Page-break-before

設定すると、印刷時に、このスタイルによって制御されているオブジェクトの前または後で強制的に改ページします。ポップアップメニューから、設定するオプションを選択します。このオプションは 4.0 ブラウザーではサポートされませんが、将来のバージョンでサポートされる可能性があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー