次の方法で共有

カスケード スタイル シートの参照

  • [アーティクル]

カスケード スタイル シートを使用して、Web 作成者はドキュメントの外観を制御することができます。

概要およびチュートリアル

以下のトピックでは、カスケード スタイル シート ルールの作成方法、およびその HTML ページの個々の要素への適用方法について説明します。

  • セレクターについて   カスケード スタイル シートの基本的な構成要素はそのスタイル ルールです。セレクターは、スタイル設定ができるよう HTML 上の要素の選択に使用されます。セレクターがないと、ルールの適用方法が決定できません。このトピックでは、カスケード スタイル シートの宣言構文の基礎を紹介し、セレクターの使用方法について説明します。

  • 長さ単位の参照   このセクションでは、カスケード スタイル シートでサポートされる長さ単位について定義します。

  • 要素の配置について   最近のほとんどのブラウザーでは X 座標および Y 座標で HTML 要素を配置し、面内の要素を Web ドキュメント内でユーザーに近づけたり離したりする Z 軸に沿って平面に要素を重ねることができます。これらの機能を使用して、Web ページ上に正確に要素、画像、コントロール、またはテキストを配置することができます。スクリプトを使用して位置座標およびその他の動的スタイルを操作し、ページで要素をあちこちに動かし、アニメーション化した効果を作成することができます。動的スタイル、位置、および透明イメージの組み合わせることで、豊富なアニメーションのオプションセットが提供されます。

  • 色   色は HTML ページで 2 つの方法で指定できます。名前、または RGB 値による指定です。

  • 互換モードにおけるサイズと位置のプロパティ   ダイナミック HTML （DHTML) では、サイズおよび位置のプロパティを公開しているので、これを使用して Web ページの HTML 要素のサイズおよび位置を変更することができます。これらのプロパティとそのページ上の要素への関わりを理解することで、Web ページの外観を制御することができます。たとえば、これらのプロパティを使用して Microsoft Office PowerPoint または Microsoft Office Word などの他のアプリケーションのドキュメントと同様のページをデザインすることができます。

プロパティ

このセクションでは、サポートされているカスケード スタイル シート プロパティの参照トピックについて説明しています。カスケード スタイル シート プロパティのカテゴリ別リストについては、カテゴリ別のプロパティ を参照してください。

  • background   オブジェクトの異なる背景プロパティを最大 5 つまで設定します。

  • background-attachment   背景イメージをドキュメント内のオブジェクトにアタッチする方法を設定します。

  • background-color   オブジェクトのコンテンツの背景色を設定します。

  • background-image   オブジェクトの背景イメージを設定します。

  • background-position   オブジェクトの背景の位置を設定します。

  • background-repeat   オブジェクトの background-image プロパティを並べて表示する方法を設定します。

  • border   オブジェクトの周りを囲むプロパティを設定します。

  • border-collapse   テーブルの列およびセルの枠線を 1 つの枠線にするか、または 標準 HTML のように別々にするかを示す値を設定します。

  • border-color   オブジェクトの枠線の色を設定します。

  • border-style   オブジェクトの左、右、上、および下の枠線のスタイルを設定します。

  • border-left   オブジェクトの上の枠線のプロパティを設定します。

  • border-bottom-color   オブジェクトの下の枠線の色を設定します。

  • border-left-color   オブジェクトの左の枠線の色を設定します。

  • border-right-color   オブジェクトの右の枠線の色を設定します。

  • border-top-color   オブジェクトの上の枠線の色を設定します。

  • border-bottom-style   オブジェクトの下の枠線のスタイルを設定します。

  • border-left-style   オブジェクトの左の枠線のスタイルを設定します。

  • border-right-style   オブジェクトの右の枠線のスタイルを設定します。

  • border-top-style   オブジェクトの上の枠線のスタイルを設定します。

  • border-bottom-width   オブジェクトの下の枠線の幅を設定します。

  • border-left-width   オブジェクトの左の枠線の幅を設定します。

  • border-right-width   オブジェクトの右の枠線の幅を設定します。

  • border-top-width   オブジェクトの上の枠線の幅を設定します。

  • border-width   オブジェクトの左、右、上、および下の枠線の幅を設定します。

  • bottom   オブジェクトの下の位置を、ドキュメント階層で一番近いオブジェクトの下に比較して設定します。

  • clear   オブジェクトの左、右、またはその両方に浮動オブジェクトを許可するかどうかを設定します。この設定によっては、次のオブジェクトが浮動オブジェクトの後に表示されます。

  • clip   配置されたオブジェクトのどの部分を表示するかを設定します。

  • color   オブジェクトのテキストの色を設定します。

  • cursor   ポインターがオブジェクトの上に置かれたときに表示するポインターの種類を設定します。

  • direction   オブジェクトのコンテンツを読む方向を設定します。

  • display   オブジェクトを表示するかどうかを設定します。

  • font   オブジェクトの異なるフォント プロパティの組み合わせを設定します。または、6 つのユーザー設定のフォントのうち 1 つまたは複数を設定または取得します。

  • font-family   オブジェクトのテキストに使用されるフォントの名前を設定します。

  • font-size   オブジェクトのテキストに使用されるフォント サイズを示す値を設定します。

  • font-style   イタリック、標準、または斜体などのオブジェクトのフォント スタイルを設定します。

  • font-variant   オブジェクトのテキストを小さい大文字にするかどうかを設定します。

  • font-weight   オブジェクトのフォントの太さを設定します。

  • height   オブジェクトの高さを設定します。

  • left   オブジェクトの位置を、ドキュメント階層で一番近いオブジェクトの左端に比較して設定します。

  • letter-spacing   オブジェクトの文字間の追加のスペースを設定します。

  • line-height   オブジェクトの行間の距離を設定します。

  • list-style   オブジェクトの異なる list-style プロパティを最大 3 つまで設定します。

  • list-style-image   オブジェクトの list-item マーカーとしてどのイメージを使用するかを示す値を設定します。

  • list-style-position   オブジェクトのコンテンツに対して list-item マーカーの描画方法を示す変数を設定します。

  • list-style-type   オブジェクトについて定義済みの line-item マーカーの種類を設定します。

  • margin   オブジェクトの上、右、下、左の余白の幅を設定します。

  • margin-bottom   オブジェクトの下の余白のサイズを設定します。

  • margin-left   オブジェクトの左の余白のサイズを設定します。

  • margin-right   オブジェクトの右の余白のサイズを設定します。

  • margin-top   オブジェクトの上の余白のサイズを設定します。

  • max-height   要素の高さの最大値を設定します。

  • max-width   要素の幅の最大値を設定します。

  • min-height   要素の高さの最小値を設定します。

  • min-width   要素の幅の最小値を設定します。

  • overflow   コンテンツがオブジェクトの高さ、または幅を超過した場合のオブジェクトのコンテンツの処理方法を示す値を設定します。

  • padding   オブジェクトとその余白の間、または枠線がある場合はオブジェクトとその枠線の間に挿入するスペースの量を設定します。

  • padding-bottom   オブジェクトの下の枠線とコンテンツの間に挿入するスペースの量を設定します。

  • padding-left   オブジェクトの左の枠線とコンテンツの間に挿入するスペースの量を設定します。

  • padding-right   オブジェクトの右の枠線とコンテンツの間に挿入する間隔を設定します。

  • padding-top   オブジェクトの上の枠線とコンテンツの間に挿入するスペースの量を設定します。

  • page-break-after   オブジェクトの後に改ページを入れるかどうかを示す値を設定します。

  • page-break-before   オブジェクトの前に改ページを入れるかどうかを示す値を設定します。

  • position   オブジェクトに使用する配置の種類を設定します。

  • right   オブジェクトの位置を、ドキュメント階層で一番近いオブジェクトの右端と比較して設定します。

  • table-layout   テーブル レイアウトを固定するかどうかを示す値を設定します。

  • text-align   オブジェクトのテキストを左揃え、右揃え、中央揃え、または両端揃えにするかを設定します。

  • text-decoration   オブジェクトのテキストについて点滅、取り消し線、上線、または下線を設定するかを示す値を設定します。

  • text-indent   オブジェクトのテキストの最初の行のインデントを設定します。

  • text-transform   オブジェクトのテキストの表示を設定します。

  • top   オブジェクトの位置を、ドキュメント階層で一番近いオブジェクトの上と比較して設定します。

  • unicode-bidi   双方向 (右から左) アルゴリズムに関する埋め込みのレベルを設定します。

  • vertical-align   オブジェクトの縦方向の配置を設定します。

  • visibility   オブジェクトのコンテンツを表示するかどうかを設定します。

  • white-space   オブジェクトの中で自動的に改行するかどうかを示す値を設定します。

  • width   オブジェクトの幅を設定します。

  • word-spacing   オブジェクトの単語間の追加の間隔を設定します。

  • z-index   配置されたオブジェクトの積み重ね順を設定します。