資料

CSSプロパティ一覧

アルファベット順

BCDEFHILMOPRSTUVWZ▲ PAGE TOP

B

プロパティ名 記述例・値
background
背景のの指定を一括で記述します。
background: url(image/back.gif) left top repeat-y #87ceeb;
この例では「背景画像」「横位置」「縦位置」「繰り返し」「背景色」の順に記述しています。
「背景画像」url(画像へのパス):CSSファイルから見たパス指定を記述
「横位置」left:左 center:中央 right:右 **px **% 等:数値指定
「縦位置」top:上 center:中央 bottom:下 **px **% 等:数値指定
「繰り返し」repeat-y:縦方向 repeat-x:横方向 no-repeat:繰り返しなし
「背景色」#******:カラー番号(16進) ***:カラー名
「スクロール」fixed:固定 scroll:固定しない(デフォルト)
background-attachment
背景画像を固定表示します。
background-attachment: fixed;
fixed:固定 scroll:固定しない(デフォルト)
background-color
背景景色を指定します。
カラー名指定background-color: gray;
カラー番号指定background-color: #e60000;
カラー名またはカラー番号:#16進数で記述
background-image
背景画像を指定します。
background-image: url(image/back.gif);
url(画像へのパス):CSSファイルから見たパス指定を記述
background-position
背景画の位置を指定します。
方向指定 background-position: left center;
数値指定 background-position: 100px 50%;
横方向 left:左 center:中央 right:右
縦方向 top:上 center:中央 bottom:下
数値指定 **px:単位 **%:割合
background-repeat
背景画の繰り返し表示を指定します。
background-repeat: repeat-y;
repeat-x :横方向に並べる
repeat-y :縦方向に並べる
no-repeat:繰り返しなし
repeat :敷き詰める(デフォルト)
border
枠線のの指定を一括で記述します。
border: 1px solid #ff0000;
この例では「太さ」「種類」「色」の順に記述しています。
「太さ」**px :数値指定
「種類」solid:実線 double:二重線 groove:谷型線 ridge:山型線
     inset:凹型 outset:凸型 dotted:点線 dashed:大きな点線
     none:線なし
「色」#****** :カラー番号指定 *** :カラー名指定
border-collapse
テーブルセル枠線の重なりを指定します。
border-collapse: collapse;
collapse :線を重ねて表示
separate:間隔をあけて表示(デフォルト)
border-color
枠線の色を指定します。
カラー名指定border-color: gray;
カラー番号指定border-color: #e60000;
カラー名またはカラー番号:#16進数で記述
border-spacing
テーブルセルの間隔を指定します。
※IE6・7非対応
border-spacing: 10px;
**px:数値指定
border-style
枠線の種類を指定します。
border-style: solid;
solid:実線 double:二重線 groove:谷型線 ridge:山型線
inset:凹型 outset:凸型 dotted:点線 dashed:大きな点線
none:線なし
border-width
枠線の幅を一括で指定します。
border-width: 1px;
**px:数値指定
thin:細い線 medium:中間の太さ  thick:太い線
border-***
枠線の四方いずれかのの指定を一括で記述します。
border-bottom: 1px solid #ff0000;
この例では下辺の指定を「太さ」「種類」「色」の順に記述しています。
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
「太さ」**px :数値指定
「種類」solid:実線 double:二重線 groove:谷型線 ridge:山型線
     inset:凹型 outset:凸型 dotted:点線 dashed:大きな点線
     none:線なし
「色」#****** :カラー番号指定 *** :カラー名指定
border-***-color
枠線の四方いずれかの色を指定します。
カラー名指定border-left-color: gray;
カラー番号指定border-left-color: #e60000;
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
カラー名またはカラー番号:#16進数で記述
border-***-style
枠線の四方いずれかの種類を指定します。
border-left-style: dotted;
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
solid:実線 double:二重線 groove:谷型線 ridge:山型線
inset:凹型 outset:凸型 dotted:点線 dashed:大きな点線
none:線なし
border-***-width
枠線の四方いずれかの幅を指定します。
border-left-style: dotted;
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
**px:数値指定
bottom
ポジション指定した際に下からの位置を指定します。
div { position: absolute; bottom: 10px; left: 30%; }
**px:数値指定 **%:割合
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

C

プロパティ名 記述例・値
caption-side
テーブルの見側しの位置を指定します。
※IE6・7非対応
caption-side: bottom;
※このスタイルはcaption要素に適用できます。
left:左 right:右 top:上 bottom:下
clear
回り込みの解除を指定します。
clear: both;
left:左 right:右 both:両方 none:なし(デフォルト)
color
文字・水平線の色を指定します。
カラー名指定color: gray;  カラー番号指定color: #e60000;
カラー名またはカラー番号:#16進数で記述
content
対象要素の前後に文字列や画像等を追加します。
※IE6・7非対応
画像を追加 div:before { content: url(image/icon.gif); }
文字を追加 div:after { content: 追加テキスト; }
※ :before または :after と組み合わせて使用します。
画像または文字を追加
cursor
マウスカーソルの形を指定します。
cursor: wait;
カーソルの値一覧
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

D

プロパティ名 記述例・値
direction
Unicodeの文章表記方向を指定します。
direction: rtl;
ltr :左から右へ(デフォルト)
rtl:右から左へ
display
表示形式を指定します。
display: inline;
block :ブロック形式で表示
inline:インライン形式で表示
list-item:リスト形式で表示
none:表示しない
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

E

プロパティ名 記述例・値
empty-cells
テーブルの空白セルの表示を指定します。
※IE6・7非対応
empty-cells: hide;
show :空白セルの枠線を表示
hide:空白セルの枠線を表示しない
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

F

プロパティ名 記述例・値
filter
IE独自の表示効果を指定します。
※IE6で透過PNG画像を表示させる際等に使用。
IE6で透過PNG画像を背景画像として読み込む場合の指定例。
.hart {
height: 146px;
width: 165px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/hart.png',sizingMethod='scale');
background: url(../images/hart.png) left center no-repeat;
_background: none ;
}
※filter内の画像パスは対象ページから見たパスを記述します。
※FILTERに関する詳細はMicrosoftホームページへ
float
回り込みを指定します。
float: left;
left :対象を左に配置・テキストなどが右側に回り込み表示
right :対象を右に配置・テキストなどが左側に回り込み表示
none :指定なし
font
フォントのの指定を一括で記述します。
font: italic normal bold 80%/150% "MS Pゴシック",sans-serif;
この例では「スタイル」「スモールキャップ」「太さ」「サイズ」/「行間」「書体」の順に記述しています。
「スタイル」italic・oblique:斜体 normal:標準(デフォルト)
「スモールキャップ」small-caps:スモールキャップを指定 normal:標準(デフォルト)
「太さ」bold:太字 normal:標準(デフォルト)
「サイズ」**px **em **pt等:数値指定 **%:割合 ※段階指定は「font-size」を参照
「行間」**px **em **pt等:数値指定
「書体」 「font-family」を参照
font-family
書体を指定します。
font: "MS Pゴシック",sans-serif;
「フォント名」"MS Pゴシック"
「フォント種類」sans-serif:ゴシック体 serif:明朝体 monospace:等幅
font-size
フォントのサイズを指定します。
font-size: 80%;
「数値指定」**px **em **pt等:数値指定 **%:割合
「7段階指定」小←xx-small x-small small medium large x-large xx-large→大
※ブラウザと表示モードによって表示結果が異なる場合があります。
font-style
フォントをイタリック体(斜体)に指定します。
font-style: italic;
italic・oblique:斜体 normal:標準(デフォルト)
font-variant
フォントをスモールキャップを指定します。
font-variant: small-caps;
small-caps:スモールキャップを指定 normal:標準(デフォルト)
font-weight
フォントの太さを指定します。
font-variant: small-caps;
bold:太字 normal:標準(デフォルト)
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

H

プロパティ名 記述例・値
height
高さを指定します。
height: 100px;
**px:数値指定 **%:割合 auto:内容に合わせる(デフォルト)
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

I

プロパティ名 記述例・値
ime-mode
IME(日本語入力システム)の初期状態を指定します。
※IEのみ対応
ime-mode: inactive;
active:IMEオン・日本語入力モード
inactive:IMEオフ・英数字入力モード
disabled:IME使用不可・英数字入力モード
auto:自動(デフォルト)
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

L

プロパティ名 記述例・値
left
ポジション指定した際に左からの位置を指定します。
div { position: absolute; left: 10px; top: 30%; }
**px :数値指定 **% :割合
letter-spacing
字間を指定します。
letter-spacing: 0.5em;
**px **em等 :数値指定
line-break
文章の禁則処理を指定します。
※IEのみ対応
line-break: strict;
normal:禁則処理なし strict:禁則処理あり
line-height
行間を指定します。
line-height: 1.5em;
**px :数値指定 **% :割合
list-style
リストのマーカーを一括で指定します。
list-style: square inside url(image/mark.gif);
この例では「種類」「位置」「マーカー画像」の順に記述しています。
「種類」 「list-style-type」を参照
「位置」outside:リストの外側 inside:リスト領域の内側
「マーカー画像」url(画像へのパス):CSSファイルから見たパス指定を記述
list-style-image
リストのマーカーの画像を指定します。
list-style-image: url(image/mark.gif);
url(画像へのパス):CSSファイルから見たパス指定を記述
list-style-position
リストのマーカー画の位置を指定します。
list-style-position: outside;
outside:リストの外側 inside:リスト領域の内側
list-style-type
リストのマーカーの種類を指定します。
list-style-type: square;
リストマーカー一覧を表示
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

M

プロパティ名 記述例・値
margin
外側の余白を一括指定します。
margin: 5px 10px 15px 20px; [上]と[右]と[下]と[左]を指定
margin: 5px 10px; [上下]と[左右]を指定
margin: 5px; [上下左右]を指定
margin: 10px auto; 対象をセンター揃えに指定(左右をautoに指定)
margin: 10px 0px 10px auto; 対象を右揃えに指定(左をautoに指定)
**px等:数値指定 **% :割合 auto自動
margin-***
外側の余白の四方いずれかを指定します。
margin-bottom: 20px; [下]のみ指定
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
**px等:数値指定 **% :割合 auto自動
max-height
最大の高さを指定します。
※IE6非対応
max-height: 350px;
**px :数値指定 **% :割合
max-width
最大の高さを指定します。
※IE6非対応
max-width: 350px;
**px :数値指定 **% :割合
min-height
最小の高さを指定します。
※IE6非対応
min-height: 350px;
**px :数値指定 **% :割合
min-width
最小の幅を指定します。
※IE6非対応
min-width: 350px;
**px :数値指定 **% :割合
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

O

プロパティ名 記述例・値
overflow
指定範囲を超える要素の表示を指定します。
overflow: hidden;
visible:指定範囲を超えて表示する
hidden:指定範囲外を表示しない
scroll:スクロールバーを表示する
auto:状況に応じスクロールバーを表示する
autoでのスクロールバーの出現方法はブラウザによって差があります。
overflow-***
指定範囲を超える要素の表示を縦横個別指定します。
overflow-x: hidden;
対象の方向は「x(横)」「y(縦)」のいずれか。
visible:指定範囲を超えて表示する
hidden:指定範囲外を表示しない
scroll:スクロールバーを表示する
auto:状況に応じスクロールバーを表示する
autoでのスクロールバーの出現方法はブラウザによって差があります。
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

P

プロパティ名 記述例・値
padding
内側の余白を一括指定します。
padding: 5px 10px 15px 20px; [上]と[右]と[下]と[左]を指定
padding: 5px 10px; [上下]と[左右]を指定
padding: 5px; [上下左右]を指定
**px等:数値指定 **%:割合
padding-***
内側の余白の四方いずれかを指定します。
padding-top: 5px;
対象の辺は「left(左)」「right(右)」「top(上)」「bottom(下)」のいずれか。
**px等:数値指定 **%:割合
page-break-***
印刷時の改ページ部分を指定します。
page-break-after: always;
対象の位置は「before(直前)」「after(直後)」のいずれか。
before(直前)
auto:自動
always:直前で改ページ
avoid:直前の改ページを禁止
after(直後)
auto:自動
always:直後で改ページ
avoid:直後の改ページを禁止
position
ボックスの配置方法を指定します。
div {position: absolute; top: 50px; left: 50px;}
static:通常の位置に表示
relative:通常の位置を基準とした相対的な位置指定
absolute:親要素を基準とした絶対的な位置指定
fixed:ウィンドウを基準とした絶対的な位置指定 + 位置の固定
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

R

プロパティ名 記述例・値
right
ポジション指定した際に右からの位置を指定します。
div { position: absolute; right: 10px; top: 30%; }
**px :数値指定 **% :割合
ruby-align
ルビ(ふりがな)の位置を指定します。
※IEのみ対応
ruby-align: distribute-space;
auto:自動 left:左揃え center:中央揃え right:右揃え
distribute-letter:両端揃え distribute-space:均等 line-edge:行端揃え
ruby-overhang
ルビ(ふりがな)の位置を指定します。
※IEのみ対応
ruby-overhang: auto;
auto:はみ出す whitespace:スペースまではみ出す none:はみ出さない
ruby-position
ルビ(ふりがな)の位置を指定します。
※IEのみ対応
ruby-position: above;
above:上部 inline:右側
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

S

プロパティ名 記述例・値
scrollbar-***-color
スクロールバのの色を指定します。
※IEのみ対応
scrollbar-base-color: #ff0000; 一括指定
scrollbar-face-color: #ff8c00; ボタン部分を指定
scrollbar-track-color: #fff8dc; レール部分を指定
scrollbar-arrow-color: #ffffff; 矢印を指定
scrollbar-highlight-color: #fff8dc; 内側のハイライトを指定
scrollbar-shadow-color: #d2691e; 内側の影を指定
scrollbar-3dlight-color: #ffebcd; 外側のハイライトを指定
scrollbar-darkshadow-color: #8b0000; 外側の影を指定
カラー名またはカラー番号:#16進数で記述
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

T

プロパティ名 記述例・値
table-layout
表の表示方法を指定します。
table-layout: fixed;
auto:自動レイアウト fixed:固定レイアウト
text-align
行揃えを指定します。
text-align: right;
left:左揃え center:中央揃え right:右揃え justify:両端揃え
text-decoration
文字の装飾を指定します。
text-decoration: underline;
underline:下線 overline:上線 line-through:抹消線 none:なし
blink:点滅(IE非対応)
text-indent
文章の1行目の字下げを指定します。
text-indent: 1em;
**px **em等:数値指定 **%:割合
text-justify
文章の均等配置を指定します。
※IEのみ対応
p { text-align: justify;text-justify: distribute-all-lines;}
※ text-align: justify; と併用する必要があります。
auto:自動
distribute:単語間隔と文字間隔を調整
distribute-all-lines:途中改行や最終行も調整
inter-word:単語間のみによる調整
inter-cluster:単語間隔を持たない言語向け
inter-ideograph:単語間隔と文字間隔を調整
newspaper:単語間隔と文字間隔を調整
kashida:アラビア語向け
text-overflow
文章が指定範囲を超える場合の省略符号を指定します。
※IEのみ対応
text-justify: distribute-all-lines;
ellipsis:はみ出た場合に「...」を表示 clip:「...」を表示しない
text-transform
大文字・小文字の変換を指定します。
text-transform: capitalize;
capitalize:単語の先頭文字を大文字に変換
uppercase:すべてを大文字に変換
lowercase:すべてを小文字に変換
none:指定なし
text-underline-position
下線の表示位置を指定します。
※IEのみ対応
text-underline-position: above;
above:文字の上に表示
below:文字の下に表示
top
ポジション指定した際に上からの位置を指定します。
div { position: absolute; left: 10px; top: 30%; }
**px :数値指定 **% :割合
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

U

プロパティ名 記述例・値
unicode-bidi
Unicodeの文章表記方向を指定します。
p { direction: rtl; unicode-bidi: bidi-override;}
normal:制御なし embed:directionの指定内容を組み込み
bidi-override:directionの指定内容で上書き
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

V

プロパティ名 記述例・値
vertical-align
文字の上下位置を指定します。
vertical-align: top;
テキストへの指定
super:上付き文字  sub:下付き文字  baseline:標準位置
画像への指定
baseline:標準位置  top:画像横の上部  middle:画像横の中央
bottom:画像横の下部  **px **%等:数値・割合
テーブル
への指
baseline:先頭行のベースライン  top:上部に表示
middle:中央に表示  bottom:下部に表示
visibility
表示・非表示を指定します。
visibility: hidden;
visible:表示する  hidden:表示しない
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

W

プロパティ名 記述例・値
white-space
改行、半角スペース、タブの扱いを指定します。
white-space: nowrap;
normal:標準  nowrap:自動改行しない  pre:書いたままの形
width
幅を指定します。
wisth: 300px;
**px:数値指定 **%:割合 auto:内容に合わせる(デフォルト)
word-break
改行の扱いを指定します。
※IEのみ対応
word-break: break-all;
normal:英語:単語の区切りで改行  break-all:単語内でも改行
keep-all:単語の区切りで改行
word-spacing
単語の間隔を指定します。
word-spacing: 0.5em;
**px **em等:数値指定
word-wrap
指定範囲内に収まり切らない長い英単語の扱いを指定します。
※IEのみ対応
word-wrap: break-word;
normal:単語の途中で自動改行しない  break-word:単語内でも改行
writing-mode
文字の表記方向(縦横)を指定します。
※IEのみ対応
writing-mode: tb-rl;
tb-rl:縦書き  lr-tb:横書き
BCDEFHILMOPRSTUVWZ▲ PAGE TOP

Z

プロパティ名 記述例・値
z-index
ポジション指定した際の重なり順を指定します。
z-index: 0;
※ positionで「relative」「absolute」「fixed」に指定している場合に有効。
順序を数値で指定(0 に近いほど背面に表示)  auto:記述順
zoom
拡大率を指定します。
※IEのみ対応
zoom: 1.5;
**:数値指定(単位なし) **%:割合
BCDEFHILMOPRSTUVWZ▲ PAGE TOP
list page page top