カスケーディング スタイル シート(CSS) ガイド

最終更新日:1998年4月16日

このページでは, HTML のスタイルを指定する カスケーディング スタイル シート( CSS :Cascading Style Sheets)に関する情報を提供します。


このページは, WWW コンソーシアム (W3C: Wolrld Wide Web Consortium)の Web Style Sheets ページと Cascading Style Sheets, level 1 (REC-CSS1-961217) の一部を,作者の Håon Wium Lie 氏の許可を頂き翻訳,公開しています。

H?on Wium Lie と表示されている UA (ユーザ エージェント = Web ブラウザ)もあると思います。正しい文字はリング付き'a'です。

TOC

CSS 開発の背景

カスケーディング スタイル シート(CSS: Cascading Style Sheets)は, Web デザイナとユーザの必要に応じて特別に開発されました。 CSS スタイル シートは, ドキュメントのフォント, 色, 空白等の表現の設定が可能です。

1994年 CERN で CSS の作業が開始され, 1996年12月に W3C 推奨 となりました。CSS1は, デザイナーがどのようにドキュメントを表現すべきかを, スタイル ートで書き, 属性を設定するように定義された言語です。CSS1 の属性は,一般的なスクリーン ベースの表現をカバーします。CSS1 への追加で幾つかの CSS ベース以外の仕様が有効になります:

W3C による現在と将来のスタイル シート活動の詳細情報は, W3C activity: Style Sheets ページをご覧ください。

The Web Design Group の著した comprehensive guide to CSS では,スタイル シートの 誤った使われ方 を指摘しています。

基本概念 [Go Top]

スタイル シートの設計はとても簡単です。覚える必要があるのは, わずかな HTML といくつかの基本的な DTP (デスクトップ パブリシィング)の専門用語です。 例えば, 'H1' 要素のテキストの色を青を設定するのには:

H1 { color: blue }

上の例は簡単な CSS のルールです。ルールは2つの主な部分, セレクター('H1')と宣言('color: bule')から成ります: 宣言は2つの部分, 属性('color')と値('bule')を持ちます。 上の例では, HTML ドキュメント描画に必要な属性を与え, 自身のスタイル シートとして満足させます。 別のスタイル シートと(CSS の基本的な特徴の一つは, スタイル シートは結合されることです)結合して, ドキュメントの最終的な表示を決定します。

セレクタは HTML と スタイル シートを結合します。また, すべての HTML 要素の型がセレクタにする事が可能です。


HTML への組み込み

スタイル シートを表示に働きかける命令を, それらの存在を UA が認識していなければなりません。 HTML の仕様では HTML とスタイル シートの結合方法を定義しています。

<HTML>
  <HEAD>
    <TITLE>タイトル</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
      HREF="http://style.com/foo" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: bule }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>ヘッドラインは青</H1>
    <P STYLE="color: green">段落の中は緑。
  </BODY>
</HTML>

この例にはスタイルと HTML を結び付ける4つの方法が使用されています: LINK 要素の使用は外部のスタイル シートと結び付けます, ' HEAD ' 要素の中の ' STYLE ' 要素は CSS の '@import' 記法を使用してスタイル シートを取り込みます,
BODY 内の要素の STYLE 属性です。 後のオプションでは内容とスタイルは混合され, 古いスタイル シートの対応する効果は失われます。

LINK 要素は別のスタイル シートを参照し, 取り込まれたスタイル シートは,留め置かれたスタイル シートと併合されます。


グループ化

スタイル シートのサイズを節約するのに, コンマで分けられたリストでセレクターを同じグループすることができます:

H1, H2, H3 { font-family: helvetica }

同じように宣言もグループ化することができます:

H1 {
  font-wight: bold;
  font-size: 12pt;
  font-height: 14pt;
  font-family: helvetica;
  font-variant: normal;
  font-style: normal;
}

さらに, いくつかの属性にはそれら自身のグループ化があります:

H1 { font: bold 12pt/14pt helvetica }

この例は, 前の例と同等です。


継承

最初の例では,' H1 ' 要素の色に青が設定されています。強調の中身は 'H1' 要素に含まれるとみなします。

<H1>ヘッドライン<EM>は</EM>重要です!</H1>

もし ' EM ' 要素に色が割り当てられていない場合, 強調されている"は"は上位要素の色を継承します。 例えば, ここでは青になります。他のスタイル属性, 例えば font-fmily font-size も同じように継承します。 さらに, いくつかの属性にはそれら自身のグループ化があります:

ドキュメントの省略スタイル属性を設定すると, 全ての表示要素に伝わり要素の属性に設定することができます。 HTML ドキュメントでは ' BODY ' 要素がこの機能を有します。

BODY {
  color: black;
  background: url(texture.gif) white;
}

いくつかのスタイル属性は上位要素から下位要素への継承を行いません。 なぜこのような事があるのかを, たびたび考えさせられます。 例えば background 属性は継承しませんが, 上位要素の背景は省略値が適用されます。

また, 属性値は別の属性に対する割合になります:

P { font-size: 10pt }
P { font-height: 120% } /* font-size に対して, 12pt */

クラス セレクタ

要素を超えた細やかな制御を行うために, HTML に新しい属性 CLASS を追加しました。 BODY 要素内の全要素はクラス化でき, クラスはスタイル シートに対応付けられます:

<HTML>
  <HEAD>
    <TITLE>タイトル</TITLE>
    <STYLE TYPE="text/css">
      H1.passtoral { color: #00FF00 }
    </STYLE>
  </HEAD>
  <BODY>
    <H1 CLASS=passtoral>緑にする方法</H1>
  </BODY>
</HTML>

クラス化された要素は通常, ドキュメント構造の上位要素から値を継承する継承規則が適用されます。

セレクタのタグ名を省略することにより, クラスの全要素に対応付けることができます。

.pastoral { color: green } /* 全要素が pastoral クラス */

識別子セレクタ

HTML はまたドキュメント全体で一意の値を保証する ID 属性も取り入れています。 これにより重要なスタイル シート スタイルシートセレクタとすることができ, それは先行する'#'により対応付けられます。

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>幅広のテキスト</P>

上の例では, 1番目のセレクタは ID 属性値により ' P ' 要素に一致します。

2番目のセレクタは要素の型(' H1 ')と ID 値の両方が指定されているので, 'P' 要素には一致しません。


文脈セレクタ

継承は CSS デザイナーの労力を省きます。 全てのスタイル属性を設定する代わりに, 一つの省略時スタイル属性と, 例外リストを作成します。 ' H1 '内の' EM '要素に異なる色を与える一つの指定方法は:

H1 { color: bule }
EM { color: red }

このスタイル シートでは, 全ての強調部分は, 'H1'の内でも外でも赤になります。 'H1'内の'EM'要素だけを赤にする指定方法は:

H1 EM { color: red }

セレクタはスタック(積み上げ)された要素の中からパターンを探し出します。 このセレクタの型は文脈セレクタと関連付けられます。 文脈セレクタは空白によつて分けられた, いくつかの単独のセレクタから構成されます。

文脈セレクタは要素の型, CLASS 属性, ID 属性または, これらの組み合わせを見ることができます:

DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: bule }
DIV.sidenote H1 { font-size: large }

いくつかの文脈セレクタをグループ化することもできます:

H1 B, H2 B, H1 EM, H2 EM { color: red }

これは次と同等です:

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

コメント

CSS スタイル シート内のコメント テキストは, C 言語のそれと同様です。

EM { color: red } /* 赤, 絶対赤!! */

擬似クラスと擬似要素 [Go Top]

CSS1ではスタイルは通常ドキュメント構造の中に位置する要素は基本に結び付けられます。 この簡単なモデルは多様なスタイルに対して十分ですが, いくつかの固有の効果に対応することができません。 CSS1の擬似クラスと擬似要素の結合の拡張は, 整形処理に拡張情報を与えます。

擬似クラスと擬似要素は CSS セレクタに使用されますが, HTML コードには存在しません。むしろ, それらは状況に応じて UA により挿入されスタイル シートと結び付けられるべきです。それらは振る舞いを記述する便利な方法であり, クラス 要素 を関連付けます。


アンカ擬似クラス

ユーザ エージェントは通常,到達済みアンカーを再表示します。CSS1では A 要素の擬似クラスで通して処理されます。

A:link { color: red }  /* 未到達リンク */
A:visited { color: bule }  /* 到達済リンク */
A:active { color: lime }  /* 活動中リンク */

印刷術的擬似要素

いくつかの印刷術的(Typographical)効果は非構造的要素に関連付けられていますが, むしろそれらは印刷術的な項目として整形されます。CSS1 では, 2つの印刷術的な項目が擬似要素を通して関連付けることができます: 要素の先頭行(' first-line ')と先頭文字(' first-letter ')です。


first-line 擬似要素

first-line 擬似要素はキャンバスに整形された先頭行に特別なスタイルを適用するのに使用します。

<STYLE TYPE="text/css">
  P:first-line { font-style: small-caps }
</STYLE>

<P>The first line of an articale in Newsweek.

テキスト ベースの UA での整形はこのようになります:

THE FIRST LINE OF AN
article in Newsweek.

first-letter 擬似要素

first-letter 擬似要素は印刷技術的な効果の"initial caps"と"drop caps"に使用されます。

<HTML>
  <HEAD>
    <TITLE>タイトル</TITLE>
    <STYLE TYPE="text/css">
      P {font-size: 12pt; line-height: 12pt }
      P:first-letter { font-size: 200%; float: left }
      SPAN { text-transform: uppercase }
    </STYLE>
  </HEAD>
  <BODY>
    <P><SPAN>最初の</SPAN>数単語はエコノミストの記事です。>/P>
  </BODY>
</HTML>

擬似要素セレクタ

しばらくお持ちください。


多重擬似要素

しばらくお持ちください。

カスケード [Go Top]

しばらくお持ちください。

整形モデル [Go Top]

しばらくお持ちください。

CSS1 属性 [Go Top]

スタイル シートは,スタイル 属性に割り当てられた値によりドキュメントの表現に影響を与えます。このセクションでは,スタイル 属性と対応する有効値のリストの定義を挙げます。


属性値の記法

次のテキストは,それぞれの属性の有効値が,文法に続いて列挙されています:

Value: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: [<family-name> , ]* <family-name>
Value: <url>? <color> [ / <color> ]?
Value: <url> || <color>

"<"と">"の中の語は,型の値を与えます。もっとも一般的な型は,<length>,<percentage>,<url>,<member>と<color>です。さらに特殊な型(例. < font-family > と < border-style >)は,対応する属性の元で記述されます。

他の語は,引用を除き,本来の意味を持つキーワードです。スラッシュ(/)とコンマ(.)は,そのままの意味を持ちます。

出現順のなかで,幾つかの並び方は,それらが出現するすべてを表わしています。バー(|)は二者択一: どちらか一方が出現する。2重バー(A || B)は,A または B の二者択一または両方を表わします。大括弧([])はグループ化です。並置は,2重バーよりも優先され,2重バーはバーより優先されます。たとえば,"a b | c || d e"は"[ a b ] | [ c || [ d e ]]"と同等です。

どの型,キーワードまたはグループ付けには,次のモデファイアーの1つが後に続くかもしれない:

フォント属性 [Go Top]

CSS1 では, font-family , font-style , font-variant , font-weight , font-size , font の属性が定義されています。


font-family - フォント ファミリー
値:
[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値:
UA依存
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

この属性は要素の垂直位置決めに影響を及ぼします。あるキーワードの設定は上位要素に関連します。

baseline
要素のベースラインに配置されます。
middle
要素の垂直中心点に配置されます。
sub
下付き要素
super
上付き要素
text-top
text-bottom
top
bottom
BODY { font-family: gill, helvetica, sans-serif }
<family-name>
選択するフォント ファミリーの名前。例では, "gill"と"helvetica"がファミリー名です。
<generic-family>
例では, 最後の値が一般的なファミリー名です。次の一般的ファミリー名が定義されています:

スタイル シート デザイナーは,一般的なフォント ファミリー名を最終代替として示す事を推奨します。

フォント名が空白を含むときは引用すること:

BODY { font-family: "new century schoolbook", serif }

<BODY STYLE="font-family: 'My own font', fantasy">

font-style - フォント スタイル
値:
normal | italic | oblique
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

'font-style'属性は,フォント ファミリー内の normal ("roman"または"upright"もみなす),italic または oblique の中から選びます。

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

上の例では,強調された'H1'のテキストは,普通のフェースで表現されます。


font-variant - 変体フォント
値:
normal | small-caps
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

フォント ファミリー内のもう一つの異体は small-caps です。small-caps フォントでは,小文字を大文字のように扱います,しかし小さいサイズで若干比率が異なります。
font-variant 属性は,そのフォントを選びます。

H3 { font-variant: small-caps }
EM { font-style: oblique }

font-weight - フォント幅
値:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

'font-weight'属性は,フォントの重みを選びます。値は'100'から'900'までの並び,そらの各数字は重みを示し少しづつ前のものより暗くなります。'normal'キーワードは,'400','bold'は'700'と同義です。他のキーワードのとき,フォント名と数字比率が9段階のリストから選んだ結果,'normal'と'bold'はしばしば見分けがつかなくなります。

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 } /* bold */

フォント重みの'bolder'と'lighter'値は,上位からの重みを継承した相対値となります。

STRONG { font-weight: bolder }

下位要素は,キーワードの値でなく合成された重みを継承します。


font-size - フォント サイズ
値:
<absolute-size> | <relative-size> | <length> | <percentage>
初期値:
midium
適用要素:
全要素
継承:
yes
パーセンテージ:
上位要素のフォント サイズに対する比率
<absolute-size>
<absolute-size>キーワードは,UA により計算され保存されたフォント サイズ テーブルのインデックスです。
有効値: [ xx-small | x-small | small | medium | large | x-large | xx-large ]
コンピュータ画面上では,近接インデックスとのスケーリング係数に1.5を推奨します。もし,'medium'フォントが10ptの場合,'large'フォントは,おそらく15ptとなります。ことなる媒体では異なるスケーリング係数が必要と思われます。
<relative-size>
<relative-size>キーワードは,フォント サイズのテーブルと上位要素のフォント サイズから相対的に解釈されます。
有効値: [ larger | smaller ].
例えば,もし上位要素のフォント サイズが'medium'で値が'large'の場合,現行要素のフォント サイズは,'lage'となる。
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

もし,スケーリング係数に1.5が推奨された場合,最後の3つの定義はまったく同じです。


font - フォント
値:
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値:
短縮属性は定義できません
適用要素:
全要素
継承:
yes
パーセンテージ:
font-size line-height で有効

'font'属性は,スタイル シートの font-family , font-style , font-variant , font-weight , font-size 設定と同じ立場の短縮属性です。

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

2番目のルールのフォント サイズの比率(80%)は,上位要素のフォント サイズ対する割合です。3番目のルールの線幅は自身のフォント サイズに対する割合です。

色と背景属性 [Go Top]

これらの属性は,要素の色(しばしば前景色と呼ばれます)と背景を記述します。一つの背景色と(または)背景イメージが設定ができます。イメージの位置,繰り返しと,それらをキャンバスに対して固定するかスクロールさせるかどちらかを設定できます。

'color'属性は普通に継承します。背景属性は継承することはありませんが,'background-color'未設定時に上位要素の背景が透過されます。なぜなら'background-color'値の初期値は'transparent'だからです。


color - 色
値:
<color>
初期値:
UA 依存
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

この属性は要素のテキスト色(前景色)を記述します。
これらは,異なった方法で赤を指定します:

EM { color: red }              /* natural language */
EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

background-color - 背景色
値:
<color> | transparent
初期値:
transparent
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の背景色を記述します。

H1 { background-color: #F00 }

background-image - 背景イメージ
値:
<url> | none
初期値:
none
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の背景イメージを設定します。背景イメージを設定する場合,さらに背景色を設定すると,それが使用されイメージは無効になります。イメージが有効のときは,最上位の背景色が上書きされています。

BODY { background-image: url(marble.gif) }
P { background-image: none }

background-repeat - 背景繰り返し
値:
repeat | repeat-x | repeat-y | no-repeat
初期値:
repeat
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

もし背景イメージが指定されていると,'background-repeat'の値はイメージの繰り返し方法を決定します。

'repeat'値はイメージが水平方向と垂直方向に両方に繰り返す事を意味します。'repeat-x'(repeat-y)値はイメージの繰り返しが水平方向(垂直方向)に,一方から他方へのイメージ帯が作成されます。'no-repeat'値ではイメージは繰り返されません。

BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
}

background-attachment - 背景連結
値:
scroll | fixed
初期値:
scroll
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

もし背景イメージが指定されていると,'background-attachment'の値はキャンバスに固定されているとみなすか,コンテントと一緒にスクロールするのかを決定します。

BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
}

background-position - 背景位置
値:
[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値:
0% 0%
適用要素:
ブロック要素
継承:
no
パーセンテージ:
要素自身のサイズに対する比率

もし背景イメージが指定されていると,'background-position'の値は,それの位置の初期値を指定します。

'0% 0%'が対の値で,イメージの左上の角は,要素のコンテントを囲む矩形の左上の角に置かれます。値の対が'100% 100%'はイメージの右下の角は,要素のコンテントを囲む矩形の右下に置かれます。'14% 84%'が対の値で,イメージの14%横,84%下の位置は,要素の14%横,84%下の位置に置かれます。

'2cm 2cm'が対の値で,イメージの左上の角は,要素の左上の角から2cm右,2cm下の位置に置かれます。

もし,値にパーセンテージまたは,長さの一方を与えるなら,水平方向のみ設定され,垂直位置は50%になる。もし,2つの値が与えられた場合,水平位置が優先される。長さとパーセンテージの組み合わせた値は許されます(例.'50% 2cm')。負位置は許されます。

キーワード値で背景イメージの位置が指示できます。キーワードは,パーセンテージの値または,長さの値と組み合わせることはできません。組み合わせ可能なキーワードとそれらの解釈は次のとおりです。

examples:
BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
BODY { background: url(banner.jpeg) center }       /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

もし,背景イメージがキャンバスに固定されている場合(' backgrond-attachment '属性を参照),イメージは要素でなくキャンバスの相対位置に置かれます。

BODY {
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: 100% 100%;
}

上の例では,イメージはキャンバスの右下に置かれます。


background - 背景
値:
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値:
全要素
適用要素:
ブロック要素
継承:
no
パーセンテージ:
background-position で有効

'background'属性は,すべての背景属性の設定に対する短縮属性です。(' background-color ',' background-image ',' background-repeate ',' background-attachment ',' background-position ')

テキスト属性 [Go Top]

word-spacing - 語間隔
値:
normal | <length>
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

単語間の間隔の省略値の長さの単位の指示を付加します。値は負数でもかまいませんが,仕様上の制限を受けます。

H1 { word-spacing: 0.4em }

ここでは,'H1'要素の各単語間隔を'1em'に指示します。


letter-spacing - 文字間隔
値:
normal | <length>
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A

文字間の間隔の省略値の長さの単位の指示を付加します。値は負数でもかまいませんが仕様上の制限を受けます。

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

結果的に,2つの文字間の間隔が省略値と異なる場合,UAが文字間隔を合成することはありません。


text-decoration - テキスト装飾
値:
none | [ underline || overline || line-through || blink ]
初期値:
normal
適用要素:
全要素
継承:
no,下の説明を参照
パーセンテージ:
N/A

この属性は,要素のテキスト付加する装飾を記述します。もし, 要素が非テキスト(e.g.HTMLの' IMG '要素)または,空要素(e,g. '<EM></EM>)の場合,この属性は作用しない。'blink'値でテキストは点滅します。

この属性は継承しませんが,要素は上位要素と一致すべきです。例えば,ある要素が下線であれば下位要素も線を引くべきです。下位要素が異なる'color'値でないとき下線の色は同じです。

A:link, A:visited, A:active { text-decoration: underline }

上の例では,全リンク(i.e. 'HREF'属性を持つ' A '要素)のテキストは下線付きになります。

UA は'blink'キーワードを受け付けるでしょうが,点滅効果の支援は必須でありません。


vertical-align - 垂直配置
値:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値:
baseline
適用要素:
全要素
継承:
no,下の説明を参照
パーセンテージ:
N/A

この属性は,要素のテキスト付加する装飾を記述します。もし, 要素が非テキスト(e.g.HTMLの'IMG'要素)または,空要素(e,g. '<EM></EM>)の場合,この属性は作用しない。'blink'値でテキストは点滅します。

この属性は継承しませんが,要素は上位要素と一致すべきです。例えば,ある要素が下線であれば,下位要素も線を引くべきです。下位要素が異なる'color'値でないとき,下線の色は同じです。


text-transform - テキスト変形
値:
capitalize | uppercase | lowercase | none
初期値:
none
適用要素:
全要素
継承:
yes
パーセンテージ:
N/A
capitalize
各単語の最初の文字を大文字にします
uppercase
要素の全文字を大文字にします
lowercase
要素の全文字を小文字にします
none
継承を無効にします

text-align - テキスト整列
値:
left | right | centyer | justify
初期値:
UA 依存
適用要素:
ブロック要素
継承:
no,下の説明を参照
パーセンテージ:
N/A

この属性は要素のテキストの整列方法を記述します。


text-indent - テキスト字下げ
値:
<length> | <percentage>
初期値:
0
適用要素:
ブロック要素
継承:
yes
パーセンテージ:
上位要素の幅に対する比率

この属性は最初の整形行の前に現れる字下げの指定します。


line-height - 行高
値:
normal | <number> | <length> | <percentage>
初期値:
normal
適用要素:
全要素
継承:
yes
パーセンテージ:
要素自身のフォント サイズに対する比率

この属性は隣接する行のベースライン間の距離を設定します。

ボックス属性 [Go Top]


margin-top - 上部余白
値:
<length> | <percentage> | auto
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の上部マージンに対する比率

この属性は要素の上部マージンを設定します。


margin-right - 右側余白
値:
<length> | <percentage> | auto
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の上部マージンに対する比率

この属性は要素の右マージンを設定します。


margin-bottom - 下部余白
値:
<length> | <percentage> | auto
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の上部マージンに対する比率

この属性は要素の下部マージンを設定します。


margin-left - 左側余白
値:
<length> | <percentage> | auto
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の上部マージンに対する比率

この属性は要素の左マージンを設定します。


margin - 余白
値:
[ <length> | <percentage> | auto ]{1,4}
初期値:
短縮属性は定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の上部マージンに対する比率

スタイル シートの同じ場所で, margin 属性は ' margin-top ',' margin-right ',' margin-bottom ' と ' margin-left ' 属性の短縮属性です。

もし。4つの長さ値が指定された場は 'top','right','bottom'と'left'それぞれ適用します。 もし, 1つの値のみの場合は全ての縁に適用され, 2または3つの場合, 無い値は向かい側から取られます。

BODY { margin: 2em } /* 全マージン セットは 2em */
BODY { margin: 1em 2em } /* 上下 = 1em, 左右 = 2em */
BODY { margin: 1em 2em 3em } /* 上=1em, 右=2em, 下=3em, 左=2em */

上の最後の例と下の例は同等です:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;  /* 向かい側から写される */
}

padding-top - 上部パディング
値:
<length> | <percentage>
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素に対する比率

この属性は要素の上部パディングを設定します。 パディング値への負数の指定はできません。


padding-right - 右側パディング
値:
<length> | <percentage>
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の幅に対する比率

この属性は要素の右側パディングを設定します。


padding-bottom - 下部パディング
値:
<length> | <percentage>
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の幅に対する比率

この属性は要素の下部パディングを設定します。


padding-left - 左側パディング
値:
<length> | <percentage>
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の幅に対する比率

この属性は要素の左側パディングを設定します。


padding - パディング
値:
[ <length> | <percentage> ]{1,4}
初期値:
0
適用要素:
全要素
継承:
no
パーセンテージ:
上位要素の幅に対する比率

スタイル シートの同じ場所で, 'padding' 属性は ' padding-top ',' padding-right ',' padding-bottom ' と ' pading-left '属性の短縮属性です。

もし。4つの長さ値が指定された場は 'top','right','bottom' と 'left' それぞれ適用します。
もし, 1つの値のみの場合は全ての縁に適用され, 2または3つの場合, 無い値は向かい側から取られます。


border-top-width - 上部縁取り幅
値:
thin | medium | thick | <length>
初期値:
medium
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の上部縁取りの幅を設定します。 縁取り幅への負数の指定はできません。

thin
太い幅で外縁を描きます
medium
中ぐらいの幅で外縁を描きます
thick
細い幅で外縁を描きます

border-right-width - 右側縁取り幅
値:
thin | medium | thick | <length>
初期値:
medium
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の右側縁取りの幅を設定します。


border-bottom-width - 下部縁取り幅
値:
thin | medium | thick | <length>
初期値:
medium
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の下部縁取りの幅を設定します。


border-left-width - 左側縁取り幅
値:
thin | medium | thick | <length>
初期値:
medium
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素の左側縁取りの幅を設定します。


border-width - 外縁幅
値:
[ thin | medium | thick | <length> ]{1,4}
初期値:
短縮属性はには定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

スタイル シートの同じ場所で, border-width 属性は ' border-width-top ',' border-width-right ',' border-width-bottom ' と ' border-width-left ' 属性の短縮属性です。

これらには1から4つの値が可能で, 次のように評価されます。


border-color - 外縁色
値:
<color>{1,4}
初期値:
color 属性の値
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

border-color 属性は外縁の色を設定します。

'border-color' は1から4の値の値が設定でき, 前出の ' border-width ' のように異なる縁に値が設定されます。


border-style - 外縁様式
値:
none | dotted | dashed | solid | double | groove | inset | outset
初期値:
none
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

border-style 属性は外縁の様式を設定します。

これは1から4の値の値が設定でき, 前出の ' border-width ' のように異なる縁に値が設定されます。

外縁様式の意味:

none
外縁は描かれない(' border-width ' 値にかかわらず)
dotted
外縁は要素の背景の上に点線で描かれる
dashed
外縁は要素の背景の上に長線で描かれる
solid
外縁は実線で描かれる
double
外縁は要素の背景の上に二重線で描かれる
groove
3次元の溝は 'color' 値の色を元に描かれる。
ridge
3次元の出っ張りは 'color' 値の色を元に描かれる。
outset
3次元の outset は 'color' 値の色を元に描かれる。

border-top - 上部外縁
値:
< border-top-width > || < border-style > || < color >
初期値:
短縮属性には定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

これは要素の上部外縁に様式と色を設定する短縮属性です。

H1 { border-bottom: thick solid red }

上のルールでは, H1 要素の幅, 様式と色を設定します。向かい側の値に, これらの初期値が設定されます。


border-right - 右側外縁
値:
< border-right-width > || < border-style > || < color >
初期値:
短縮属性には定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

これは要素の右側外縁に様式と色を設定する短縮属性です。


border-bottom - 下部外縁
値:
< border-bottom-width > || < border-style > || < color >
初期値:
短縮属性には定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

これは要素の下部外縁に様式と色を設定する短縮属性です。


border-left - 左側外縁
値:
< border-left-width > || < border-style > || < color >
初期値:
短縮属性には定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

これは要素の左側外縁に様式と色を設定する短縮属性です。


border - 外縁
値:
< border-width > || < border-style > || < color >
初期値:
短縮属性には定義できません
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

これは要素の4隅の外縁に,同じ様式と色を設定する短縮属性です。

次の2つのルールは同等です。

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
}

width - 幅
値:
<length> | <percentage> | auto
初期値:
auto
適用要素:
ブロック要素
継承:
no
パーセンテージ:
上要素の幅に対する比率

この属性はテキスト要素に適用されますが, 画像のような要素との置き換えで最も利用されます。


height - 高さ
値:
<length> | auto
初期値:
auto
適用要素:
ブロック要素
継承:
no
パーセンテージ:
上要素の幅に対する比率

この属性はテキスト要素に適用されますが, 画像のような要素との置き換えで最も利用されます。


float - 囲み
値:
left | right | none
初期値:
none
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

値が 'none' の場合, テキストの現れる場所に要素が表示されます。'left' ('right') 値の場合は, 要素は左(右)に移動し, 要素の右(左)側をテキストが囲み込みます。


clear - 囲み解除
値:
none | left | right | both
初期値:
none
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

囲みが適用されている要素の側面に, この属性は指定されます。 さらに, 属性値にリストされる側面の囲み要素は解除されます。

分類の属性 [Go Top]

これらの属性はカテゴリにより分類される要素に,多くの視覚的仕様パラメータを設定します。


display - 表示
値:
block | inline | list-item | none
初期値:
block
適用要素:
全要素
継承:
no
パーセンテージ:
N/A

この属性は要素のキャンバスへの表示方法を記述します。


white-space - 空白
値:
normal | pre | nowrap
初期値:
normal
適用要素:
ブロック要素
継承:
yes
パーセンテージ:
N/A

この属性は要素内の空白の処理方法を記述します: 'normal' (空白は折り畳まれる), 'pre' (HTML の PRE タグのように振る舞う), 'nowrap' ( BR 要素でゆるされる改行)


list-style-type - リスト型スタイル
値:
disc | circle | square | decimal | lower-case | upper-roman | lower-alpha | upper-alpha | none
初期値:
disc
適用要素:
' display ' に 'list-item' 値を持つ要素
継承:
yes
パーセンテージ:
N/A

この属性はリスト項目のマーカの決定に使用されます。 list-style-image が none または URL によりイメージが示されたいる場合は表示できません。


list-style-image - リスト画像スタイル
値:
<url> | none
初期値:
none
適用要素:
' display ' に 'list-item' 値を持つ要素
継承:
yes
パーセンテージ:
N/A

この属性はリスト項目のマーカに使用される画像を設定します。画像が有効の場合, list-style-type マーカを置き換えます。


list-style-position - リスト位置スタイル
値:
inside | outside
初期値:
disc
適用要素:
display に list-item 値を持つ要素
継承:
yes
パーセンテージ:
N/A

list-style-positon の値はリスト項目のマーカを描く場所を決定します。


list-style - リスト スタイル
値:
<keyword> || <position> || <url>
初期値:
短縮属性には定義できません
適用要素:
' display ' に 'list-item' 値を持つ要素
継承:
yes
パーセンテージ:
N/A

'list-style' 属性はスタイル シートの ' list-style-type ', ' list-style-image ' と 'list-style-position ' 属性を設定する短縮属性です。