overflow；スクロール表示
overflowプロパティは、ブロック要素内の表示方法を指定します。よく使われるのは、任意のボックスの幅や高さを指定して、はみ出した内容はスクロール表示させると言った形です。Mac IE5 では、div要素以外のブロック要素に指定すると、表示が消えてしまいます。
- プロパティ
-
overflow
- 値
-
キーワード(下記参照)
visible（指定範囲からあふれて表示）
hidden（指定範囲からあふれた部分は非表示）
scroll（指定範囲からあふれた場合はスクロールバー）
auto（指定範囲からあふれた場合はスクロールバー）
- 対象
-
ブロックレベル要素
- 継承の有無
-
なし
overflowサンプル
scroll
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：
auto
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：
visible
サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル
height：高さ指定
- プロパティ
-
height
- 値
-
単位 | キーワード(auto)
- 対象
-
すべての要素
- 継承の有無
-
なし
標準準拠モードと後方互換モードの解釈について
以下はheight指定時のブラウザの解釈についての注意事項です。
- 標準準拠モードはheightにpadding及びborderを含みません。
- 後方互換モードはheightにpadding及びborderを含みます。
上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。
width：幅指定
- プロパティ
-
width
- 値
-
単位 | キーワード(auto)
- 対象
-
すべての要素
- 継承の有無
-
なし
標準準拠モードと後方互換モードの解釈について
以下はwidth指定時のブラウザの解釈についての注意事項です。
- 標準準拠モードはwidthにpadding及びborderを含みません。
- 後方互換モードはwidthにpadding及びborderを含みます。
上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。
vertical-align：文字の配置(インライン)
vertical-alignプロパティは、インライン要素、セル要素内の垂直方向の位置を指定します。
- プロパティ
- vertical-align
- 値
-
キーワード(下記参照)
baseline
（対象のベースラインを親要素のベースラインに揃える）top
（対象の上辺を最も高い要素の上辺に揃える）middle
（対象のベースラインから親要素のフォントサイズの小文字”x”の高さの半分だけ上に揃える）bottom
（対象の下辺を行中の最も低い要素の下辺に揃える）super
（対象のベースラインを親要素の上付き文字の位置に揃える-セル要素無効）sub
（対象のベースラインを親要素の下付き文字の位置に揃える-セル要素無効）text-top
（対象の上辺を親要素のフォントの上辺に揃える-セル要素無効）text-bottom
（対象の下辺を親要素のフォントの下辺に揃える-セル要素無効） - 対象
- インラインレベルとテーブル-セル要素
- 継承の有無
- なし
- ポイント
- IEで使用の際はレイアウトに注意。Firefox等は厳密。
vertical-alignサンプル
サンプル配置
サンプル配置baseline
サンプル配置サンプル配置top
サンプル配置サンプル配置middle
サンプル配置サンプル配置bottom
サンプル配置サンプル配置super
サンプル配置サンプル配置sub
サンプル配置サンプル配置text-top
サンプル配置サンプル配置text-bottom
line-height：行間指定
line-heightプロパティは行の高さを指定しますが（行送り）、正確には要素（ボックス）の上下辺からテキストまでの距離を意味します。また、line-heightプロパティの値にパーセント指定をした親ボックス内に<h>タグを記述すると、見出しの文字の一部が欠ける場合あり。（値が小さい場合）
- プロパティ
-
line-height
- 値
-
数値 | 単位
- 対象
-
すべての要素
- 継承の有無
-
継承
line-heightサンプル
line-height:1.2
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
lineline-height:2em
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
lineline-height:250%
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
white-space：入力通りに表示
white-spaceプロパティは、半角スペースやタブや行送りなど入力通りに表示させる指定です。一般的に折り返しを “する” “しない” などの制御（縮小化しても電話番号を折り返さない等）や、コードやソースを記述する際などに使用。
指定ボックスの幅の制御はoverflowプロパティで行う。
- プロパティ
-
white-space
- 値
-
キーワード
normal（空白類文字をひとつの半角スペースにまとめ、折り返し）
pre（空白類文字をそのまま表示、折り返さない ）
nowrap（空白類文字をひとつの半角スペースにまとめ、折り返さない ）
pre-wrap（***）
pre-line（***）
- 対象
-
すべての要素
- 継承の有無
-
継承
white-spaceサンプル
normal - abcde fghij klmno pqrst uvwxy z. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n o p q r s t u v w x y z.
pre -
abcde fghij klmno pqrst uvwxy z.
abcdefghijklmnopqrstuvwxyz.
a b c d e f g h i j k l m n o p q r s t u v w x y z.
nowrap - abcde fghij klmno pqrst uvwxy z. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n o p q r s t u v w x y z.
z-index：要素の重なり
- プロパティ
-
z-index
- 値
-
数値
- 対象
-
position指定要素
- 継承の有無
-
なし
clear：回り込み解除
- プロパティ
-
clear
- 値
-
キーワード(下記参照)
left | right | both | none
- 対象
-
ブロックレベル要素
- 継承の有無
-
なし
float：配置指定
- プロパティ
-
float
- 値
-
キーワード(下記参照)
left | right | none
- 対象
-
すべての要素
- 継承の有無
-
なし
position：配置指定
- プロパティ
-
position
- 値
-
キーワード(下記参照)
static | relative | absolute | fixed
- 対象
-
すべての要素
- 継承の有無
-
なし
static | 静的（デフォルト）
relative | 相対配置（続くボックスに影響あり）
absolute | 絶対配置（続くボックスに影響を与えない）
fixed | 固定
display：表示形式
displayプロパティは、各要素の表示形式を指定します。非表示にする、ブロック要素に変換する、インライン要素に変換するといった指定ができます。
- プロパティ
-
display
- 値
-
キーワード(下記参照)
inline（インライン要素にする）
block（ブロック要素にする）
list-item（リスト要素のli要素にする ）
none（非表示）
- 対象
-
すべての要素
- 継承の有無
-
なし
border：線の指定
borderプロパティは、ボックスの上下左右のボーダー領域をコントロールします。指定できるのは線の太さ、線の種類、線の色。ボーダー領域については、下記サンプル図を参照。
- 一括指定
-
border
border-top
border-bottom
border-right
border-left
- 個別指定/線の太さ
-
border-width
border-top-width
border-bottom-width
border-right-width
border-left-width
- 個別指定/線の色
-
border-color
border-top-color
border-bottom-color
border-right-color
border-left-color
- 個別指定/線の種類
-
border-style
border-top-style
border-bottom-style
border-right-style
border-left-style
- 値 / 線の太さ
-
長さの単位 “px” が一般的
thin（細め）
medium（標準）
thick（太い）
- 値 / 線の種類
-
none（なし）
hidden（なし）
dotted（点線）
dashed（破線）
solid（実線）
double（二重線）
groove（窪み）
ridge（隆起）
inset（内側に窪み）
outset（外側に窪み）
- 値 / 線の色
-
RGB値、カラーネーム
transparent（透過）
- 対象
-
すべての要素
- 継承の有無
-
なし
- ポイント
-
標準準拠モードでは、borderはwidthに含まない。
transparentは古いタイプのブラウザでは一部未対応。
border-styleサンプル
dotted
dashed
solid
double
groove
ridge
inset
outset
padding：余白指定
paddingプロパティは、ボックスの上下左右のパディング領域（borderより内側の余白）をコントロールします。背景画像とテキストの配置、リンク領域の指定等でも使用します。パディング領域については、下記サンプル図を参照。
- プロパティ
-
padding
padding-top
padding-bottom
padding-right
padding-left
- 値
-
単位
- 対象
-
すべての要素
- 継承の有無
-
なし
- ポイント
-
標準準拠モードではpaadingはwidthに含まない
padding一括指定と指定場所
padding: 10px 20px 30px 40px; 上 10px, 右20px, 下 30px, 左 40px -------------------------------------- padding: 10px 20px 30px; 上 10px, 左右 20px, 下 30px -------------------------------------- padding: 10px 20px; 上下 10px, 左右 20px -------------------------------------- padding: 10px; 上下左右 10px
margin：余白指定
marginプロパティは、ボックスの上下左右のマージン領域（一番外側の余白）をコントロールします。また、”margin-right””margin-left”の値に”auto”を指定する事でボックスを中央に寄せます。（一部ブラウザではbodyに”text-align:center;”を指定しなければならない。）マージン領域については、下記サンプル図を参照。
- プロパティ
-
margin
margin-top
margin-bottom
margin-right
margin-left
- 値
-
単位
- 対象
-
すべての要素
- 継承の有無
-
なし
- ポイント
-
float指定と併用する際、float指定側にmarginを取るとIEで余分な余白が生じる。
margn一括指定と指定場所
margin: 10px 20px 30px 40px; 上 10px, 右20px, 下 30px, 左 40px -------------------------------------- margin: 10px 20px 30px; 上 10px, 左右 20px, 下 30px -------------------------------------- margin: 10px 20px; 上下 10px, 左右 20px -------------------------------------- margin: 10px; 上下左右 10px
text-transform：大文字小文字(英単語)
text-transformプロパティはアルファベットの小文字を大文字に、大文字を小文字に変換表示します。音声ブラウザなどアクセシビリティを考慮する際は、text-transformを指定しましょう。
音声ブラウザは英単語が大文字の場合、文字を一文字ずつ読み上げます。例えば”dog”の場合、大文字で”DOG”と記述すると音声ブラウザは”D（ディー）”、”O（オー）”、”G（ジー）”と読み上げます。
- プロパティ
-
text-transform
- 値
-
キーワード
capitalize（一文字目を大文字に変換）
uppercase（すべてを大文字に変換）
lowercase（すべてを小文字に変換）
none（なし）
- 対象
-
すべての要素
- 継承の有無
-
継承
text-transformサンプル
(X)HTML上での記述”abcde fghij capitalize”と小文字で記述しています。
abcde fghij capitalize
abcde fghij uppercase
abcde fghij lowercase
word-spacing：英単語間隔
word-spacingプロパティは半角スペースで区切られた単語と単語の間隔を指定します。半角スペースで区切られた単語間隔なので、主に欧文テキストに使用します。テキストの文字と文字との間隔（字間）のはletter-spacingプロパティです。
- プロパティ
-
word-spacing
- 値
-
単位
- 対象
-
すべての要素
- 継承の有無
-
継承
word-spacingサンプル
word-spacing:0.5em abc def ghi
word-spacing:1em abc def ghi
word-spacing:20px abc def ghi
letter-spacing ：文字間隔
letter-spacingプロパティはテキストの文字と文字との間隔（字間）を指定します。半角スペースで区切られた単語と単語との間隔はword-spacingプロパティです。
- プロパティ
-
letter-spacing
- 値
-
単位
- 対象
-
すべての要素
- 継承の有無
-
継承
- ポイント
-
Macにてレイアウトに影響を及ぼす可能性
letter-spacingサンプル
letter-spacing:0.5em
letter-spacing:1em
letter-spacing:10px
text-decoration：文字の下線
text-decorationプロパティはテキストに装飾を施します。blink（点滅）に対応しているのはNetscape,Firefox,OperaのみでIEは未対応。また、アクセシビリティ上でもblink（点滅）は使用しない事が望ましい。
- プロパティ
-
text-decoration
- 値
-
キーワード(下記参照)
none（なし）
underline（下線）
overline（上線）
line-through（打ち消し線）
blink（点滅）
- 対象
-
すべての要素
- 継承の有無
-
なし
text-decorationサンプル
リンクの下線も指定。一部未対応ブラウザあり。
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;
text-align：文字の配置指定
text-alignプロパティは、ブロック要素、セル要素内のテキストや画像などの水平方向の揃え方を指定します。justifyは単語間にある半角スペースの幅で調整を行っているため、欧文を対象とし日本語には適用しない。
- プロパティ
-
text-align
- 値
-
キーワード(下記参照)
left（左寄せ）
right（右寄せ）
center（中央寄せ）
justify（均等）
- 対象
-
ブロックレベル要素、表のセルとインラインブロック
- 継承の有無
-
継承
text-alignサンプル
text-align:right;
text-align:center;
text-align:left;
text-align:justify;
normal abc def ghi jkl mno pqr stu vwx yz. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n opqrstuvwxyz. abcdefghijklmnopqrstuvwxyz. abcdefghijklmnopqrstuvwxyz.
text-align:justify; abc def ghi jkl mno pqr stu vwx yz. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n opqrstuvwxyz. abcdefghijklmnopqrstuvwxyz. abcdefghijklmnopqrstuvwxyz.
text-indent：文頭指定
text-indentプロパティは、ブロック要素に含まれるテキストの1行目を字下げ指定します。インデント効果は行頭のみです。text-indentプロパティは、負の値（-9999px）を指定することも可能です。この場合、ブロック要素内のテキストはブラウザ上では表示されませんが、(X)HTML上では読み込まれます。
- プロパティ
-
text-indent
- 値
-
px | em など
- 対象
-
ブロックレベル要素、表のセルとインラインブロック
- 継承の有無
-
継承
text-indentサンプル
text-indent:1em;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル
text-indent:3em;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル
text-indent:20px;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル
