CSSで使われる単位

%（パーセント）

どの割合に対してかは使われるプロパティによって変わる

em

フォントサイズを1とした場合の相対値

ex

小文字の高さを1とした場合の相対値

px

ピクセル、画面の画素1つを1とする。

pt

ポイント、もともと印刷等の単位、1/72インチ

pc

パイカ、12ポイント

in

インチ、2.54cm

mm

ミリメートル

cm

センチメートル

ブロック要素関連のプロパティ・余白

margin

コンテンツ外側の余白を指定します。

margin   4辺一括で指定します。一括で指定することをショートハンドと言います。

個別で指定する時は以下の通り。

margin-top 上

margin-right 右

margin-bottom 下

margin-left 左

上下と左右が同じサイズの時は、まとめて書くこともできます。その場合前のほうが上下、後ろのほうが左右です。

（例）margin:10px 20px;   この例の場合上下が10px、左右が20pxということです。

また上下とは別に、左右だけまとめて書くこともできます。その場合上、左右、下の3つが並びます。

（例）margin:10px 20px 5px;   この例の場合上が10px、左右が20px、下が5pxということです。

padding

コンテンツ内側の余白を指定します。

padding   4辺一括で指定します。個別で指定する時は以下の通り。

padding-top 上

padding-right 右

padding-bottom 下

padding-left 左

また上下と左右が同じサイズの時は、まとめて書くこともできます。その場合前のほうが上下、後ろのほうが左右です。

（例）padding:10px 20px;   この例の場合上下が10px、左右が20pxということです。

ブロック要素関連のプロパティ・枠線

border   4辺一括で指定します。個別で指定する時は以下の通り。

border-top 上

border-right 右

border-bottom 下

border-left 左

borderはプロパティをまとめて指定することができます。

（記述例）border: 30px solid #333333;

width

線の幅を設定します。色々な単位の指定でも出来ますが、以下のような指定もできます。

• thin   細い
• medium 標準
• thick  太い

（記述例）border-width: 30px;

style

枠線のスタイルを設定します。以下のようなスタイルがあります。

• none ボーダーなし
• dotted 点線
• dashed 破線
• solid 実線
• double 2本線
• groove 立体的にくぼんだ線
• ridge 立体的に盛り上がった線
• inset 陥没
• outset 浮上

（記述例）border-style: solid;

color

枠線の色を指定します。

（記述例）border-color: #333333;

ビジュアル関係のプロパティ

display

どのような見た目、表示にするかの設定です。

• block   ブロック要素
• inline インライン要素
• list-item  リスト要素
• none  非表示

（記述例）display: block;

position

各要素をどのように配置するかです。通常top、left等の位置指定といっしょに設定します。

• static 通常通り
• relative 通常位置からの相対配置
• absolute 絶対配置
• fix 固定配置（スクロールしても位置が固定したまま。）

（記述例）position: relative;

top

right

bottom

left

位置のオフセット（始点からの距離）の設定に使います。

（記述例）top: 30px;

float

指定の位置に画像などを寄せます。rightやleftを指定するとあとに続くボックス、テキストが横の位置に回り込みます。

• left 左寄せ
• right 右寄せ
• none なし

（記述例）flost: left;

clear

floatで指定した回り込みを解除します。

• left 左寄せ解除
• right 右寄せ解除
• both 左寄せ右寄せ両方の解除
• none なし

（記述例）clear: both;

z-index

ボックスを3次元的に重ねていきます。数字が大きいものほど手前に表示されます。

（記述例）z-index: 1;

overflow

コンテンツがボックスに収まりきらないときの処理です。

• visible ボックスを押し広げてすべて表示、デフォルトです
• hidden はみ出た部分は表示しない
• scroll スクロールバーが付く
• auto ブラウザ毎の自動処理

（記述例）overflow: auto;

visibility

コンテンツの可視、不可視

• visible 可視
• hidden 不可視

（記述例）visibility: hidden;

背景関連のプロパティ

backgroundは背景系の指定に使います。プロパティをまとめて指定することができます。

（記述例）background: #333333 url("sample.gif") repeat scroll;

color

背景の色を指定します。

• RGB値
• キーワード
• transparent 透過

（記述例）background-color: #333333;

image

背景画像をurlで指定します。

（記述例）background-image: url("../image/sample.gif");

repeat

背景画像のリピートの指定です。

• repeat Y軸X軸両方向へリピート、デフォルト
• repeat-y Y軸方向へリピート
• repeat-x X軸方向へリピート
• no-repeat リピートなし

（記述例）background-repeat: repeat-y;

attachment

背景画像の設置の仕方

• scroll スクロールすると背景画像もスクロール、デフォルト
• fixed スクロールしても背景画像は固定

（記述例）background-attachment: fixed;

position

背景画像のもとのボックスに対する位置指定

• top 上端に設置
• center 中央に設置
• bottom 下端に設置
• left 左に設置
• center 中央に設置
• right 右に設置
• ピクセル単位やパーセントで指定も可能、X軸、Y軸の順

（記述例）background-position: top;

リスト関連のプロパティ

list-styleはリストの外観の指定に使います。プロパティをまとめて指定することができます。

（記述例）list-style: square inside;

type

先頭に付くマーカーの指定。

• disc 黒ドット、デフォルト
• circle 白抜きドット
• square 四角
• decima 数字
• lower-roman ローマ数字小文字
• upper-roman ローマ数字大文字
• lower-alpha ローマ字小文字
• upper-alpha ローマ字大文字
• none なし

（記述例）list-style-type: circle;

image

マーカーに画像を使うときの指定。

（記述例）list-style-image: url("../image/sample.gif");

position

マーカーを置く位置の指定。

• outside 文字列の外側に置く、デフォルト
• inside 文字列の内側に置く

（記述例）list-style-position: inside;

テーブル関連のプロパティ

csption-side

caption（そのテーブルの説明書き）の表示位置を設定します。

• top 上
• right 右
• bottom 下
• left 左

（記述例）csption-side: bottom;

layout

テーブルのレイアウトに関する設定。

• auto 自動
• fixed 固定、内容にかかわらず横幅を固定します

（記述例）table-layout: fixed;

border-collapse

テーブルの各セルの枠線を重ねて表示するか離して表示するかです。

• collapse 重ねて表示
• separate 離して表示、こちらがデフォルトのブラウザが多いようです

（記述例）border-collapse: collapse;

border-spacing

separateを設定した場合の隣のセルとの間隔を設定します。

（記述例）border-spacing: 2px;

縦横別に指定する場合は次のように記述します。

（記述例）border-spacing: 2px 5px; 

この場合縦が2px横が5pxです。