| プロパティ名 |
記述例・値 |
|
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：数値指定 **%：割合
|
| プロパティ名 |
記述例・値 |
|
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内の画像パスは対象ページから見たパスを記述します。
|
|
float 回り込みを指定します。
|
float: left;
left ：対象を左に配置・テキストなどが右側に回り込み表示
right ：対象を右に配置・テキストなどが左側に回り込み表示
none ：指定なし
|
|
font フォントのの指定を一括で記述します。
|
font: italic normal bold 80%/150% "ＭＳ Ｐゴシック",sans-serif;
この例では「スタイル」「スモールキャップ」「太さ」「サイズ」/「行間」「書体」の順に記述しています。
「スタイル」italic・oblique：斜体 normal：標準（デフォルト）
「スモールキャップ」small-caps：スモールキャップを指定 normal：標準（デフォルト）
「太さ」bold：太字 normal：標準（デフォルト）
「サイズ」**px **em **pt等：数値指定 **%：割合 ※段階指定は「font-size」を参照
「行間」**px **em **pt等：数値指定
「書体」 「font-family」を参照
|
|
font-family 書体を指定します。
|
font: "ＭＳ Ｐゴシック",sans-serif;
「フォント名」"ＭＳ Ｐゴシック"等
「フォント種類」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：標準（デフォルト）
|
| プロパティ名 |
記述例・値 |
|
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;
リストマーカー一覧を表示
|
| プロパティ名 |
記述例・値 |
|
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 ：数値指定 **% ：割合
|
| プロパティ名 |
記述例・値 |
|
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：右側
|
| プロパティ名 |
記述例・値 |
|
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 ：数値指定 **% ：割合
|
| プロパティ名 |
記述例・値 |
|
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：横書き
|