このページではJavaScriptをONにしてください。

CSS Reference

A

B

background-color
background-color: #F00;

背景色を指定する際に使用します。
カラーコード(#000000,#FFFなど)やカラーネーム(red,blueなど)、RGB(rgb(0,255,0)など)でも指定できます。
モダンブラウザでは更にRGBA(透明度/アルファチャンネル)の指定も可能です。
transparentを入れると背景色を無指定(透明)にします。

background-color:transparent;

background-image
background-image: url(“../images/wall.png”);

背景画像を指定する際に使用します。
<BODY>・<TABLE>・<P>・<DIV>・<SPAN>などの要素にも背景画像を指定することができます。
背景画像はURLで指定しますので、スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、 外部スタイルシートファイルからの相対パスで指定しなくてはならないので注意してください。

background-size
background-size: 値;

背景画像のサイズを指定する際に使用します。
長さやパーセンテージで指定する場合、値を2つ記述するとそれぞれ記述した順に幅と高さを表します。
1つだけ指定した場合には、もう1つはautoと解釈されます。
負の値を指定することはできません。

auto
自動的に算出される(初期値)。
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する。
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する。
長さ
背景画像の幅・高さを指定する。
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する。
border-radius
border-radius: 左上 右上 右下 左下;

ボックスの4つのコーナーの角丸をまとめて指定する際に使用します。
楕円半径の値は、長さかパーセンテージで指定します。
長さで指定する場合には、px・em・ptなどの単位を使用できます。
また、パーセンテージで指定する場合には、ボーダーボックスの幅と高さに対する楕円半径のパーセンテージを指定します。
指定する値が0の場合、コーナーの形状は四角になります。

box-shadow
box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;

ボックスに1つまたは複数の影をつける際に使用します。
影は2~4つの長さの値で定義されますが、任意で色とinsetキーワードを指定することもできます。
insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。
長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。
複数の影を指定する場合には、カンマ( , )区切りで影のリストを複数指定します。

使用例

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

C

color
color: #000;

文字色を指定する際に使用します。
カラーコード(#000000,#FFFなど)やカラーネーム(red,blueなど)、RGB(rgb(0,255,0)など)でも指定できます。
モダンブラウザでは更にRGBA(透明度/アルファチャンネル)の指定も可能です。
文字色を指定する際には、同時に背景色も指定するようにしてください。
ユーザーの環境で背景色が指定されている場合には、背景色と文字色の関係により文字が読みにくくなってしまうことがあるからです。

D

E

F

font-size
font-size: 12px;

フォントのサイズを指定する際に使用します。

数値で指定
数値にpxやemやexなどの単位をつけて指定します。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
またemとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。
数値には負の値は指定できません。
%で指定
%値で指定します。
キーワードで指定
xx-small・x-smal・small・medium・large・x-large・xx-largeの7段階があり、mediumが標準サイズです。
1段階上がると1.2倍のサイズになります。
また、smaller・largerを指定すると大きさが1段階上下します。
font-weight
font-weight: bold;

数値で指定
100、200、300、400、500、600、700、800、900でフォントの太さを指定します。
太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。
標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。
キーワードで指定
normal
標準の太さです。(数値で400を指定した場合と同じ)
bold
一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter
相対的に一段階細くします。
bolder
相対的に一段階太くします。

G

H

I

J

K

L

linear-gradient()
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

線形グラデーションを指定する際に使用します。
仕様ではbackground-imageプロパティやlist-style-imageプロパティなど、 画像を扱うことのできるどのプロパティにも指定できる値とされています。
ただし、現在のところFirefoxなどのMozilla系ブラウザはグラデーションの指定をbackground-imageプロパティ、 およびbackgroundプロパティの値としてのみサポートしています。
開始位置と角度を指定すると、グラデーションの方向を定義することができます。
開始位置はleft・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。
角度はdegなどの単位を付けた角度値で指定します。
開始位置と角度は省略可能ですが、その場合には初期値のtopになります。
また、グラデーションの開始色と終了色をカンマ( , )区切りで指定しますが、 さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。

使用例

background: linear-gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);

M

margin
margin: 10px;

外側の余白をまとめて指定する際に使用します。
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合:[上下左右]
値を2つ指定した場合:[上下][左右]
値を3つ指定した場合:[上][左右][下]
値を4つ指定した場合:[上][右][下][左]
マージンには負の値を指定することもできます。
マージンに負の値を指定することで複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため注意が必要です。

N

O

P

padding
padding: 10px;

内側の余白をまとめて指定する際に使用します。
上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合:[上下左右]
値を2つ指定した場合:[上下][左右]
値を3つ指定した場合:[上][左右][下]
値を4つ指定した場合:[上][右][下][左]
パディングには負の値を指定することができません。

Q

R

S

T

text-shadow
text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;

テキストに影をつける際に使用します。
このプロパティでテキストに影を付ける際には、2つまたは3つの長さと影の色を指定します。
最初の2つの長さはテキストから影の距離で、正の値は右下、負の値は左上に影が表示されます。
また、3つ目の長さは影のぼかし半径ですが、この値を省略するとぼかしの無い影となります。

U

V

W

X

Y

Z

OTHER

擬似クラス
要素名: 擬似クラス {プロパティ名: 値;}

:active
要素名: active {プロパティ名: 値;}

ユーザーの操作で要素がアクティブになった際のスタイルを指定します。
a:activeでは”クリックされてから離されるまでの状態”です。

:hover
要素名: hover {プロパティ名: 値;}

ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定します。
a:hoverでは”カーソルは乗っているがクリックはされていない状態”です。

:link
要素名: link {プロパティ名: 値;}

未訪問リンクのスタイルを指定します。

:visited
要素名: visited {プロパティ名: 値;}

訪問済みリンクのスタイルを指定します。

PAGE TOP