Home » Archive: 6 月 2008
アーカイブ｜6 月2008
font-size：文字サイズ
font-sizeプロパティは、文字の大きさ（フォントサイズ）を指定します。値にはキーワードの他、単位、パーセント等がありますが、相対値指定が望ましいとされます。（IEではpx指定の場合、ユーザー側でフォントサイズ切り替えが出来ない。）
- プロパティ
-
font-size
- 値
-
単位 | キーワード(下記参照)
xx-small | x-small | small | medium | large | x-large | xx-large
- 対象
-
すべての要素
- 継承の有無
-
継承
- ポイント
-
アクセシビリティ上、単位指定なら em | % などの相対指定が望ましいとされる。
font-sizeサンプル
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-weight：文字の太さ
font-weightプロパティは、文字の太さを指定します。キーワード、数値指定ともに、ある段階までしか表示効果なし。またboldとbolderの表示結果に大差はありません。
- プロパティ
-
font-weight
- 値
-
キーワード(下記参照)
normal | bold | bolder | lighter | 100-900
- 対象
-
すべての要素
- 継承の有無
-
継承
font-weightサンプル
font-weight:normal; あいうえお
font-weight:bold; あいうえお
font-weight:bolder; あいうえお
font-weight:lighter; あいうえお
font-weight:100; あいうえお
font-weight:200; あいうえお
font-weight:300; あいうえお
font-weight:400; あいうえお
font-weight:500; あいうえお
font-weight:600; あいうえお
font-weight:700; あいうえお
font-weight:800; あいうえお
font-weight:900; あいうえお
font-variant：スモールキャピタル
font-variantプロパティは、スモールキャピタル表示指定です。スモールキャピタルはアルファベットの大文字を大文字のまま小さなサイズで表示。IE6未対応。IE7対応。
- プロパティ
- font-variant
- 値
-
キーワード(下記参照)
normal | small-caps
- 対象
- すべての要素
- 継承の有無
- 継承
font-variantサンプル
FONT-VARIANT: normal;
font-variant: small-caps;
font-style：斜体文字
- プロパティ
-
font-style
- 値
-
キーワード(下記参照)
normal | italic | oblique
- 対象
-
すべての要素
- 継承の有無
-
継承
現状 italic | oblique の差はなし。
font-family：フォント指定
font-familyプロパティは、要素内の文字書体を指定します。フォント名は複数指定が可能で、各フォント名をコンマ（,）で区切ります。ユーザーの利用環境により左から順に反映される。ＭＳ Ｐゴシックのようにスペースを含む場合は、フォント名の前後をシングルクォーテーション（’）、またはダブルクォーテション（”）の引用符で囲みます。
- プロパティ
-
font-family
- 値
-
キーワード(下記参照)
基本 serif（明朝系）
基本 sans-serif（ ゴシック系）
基本 cursive（筆記体系）
基本 fantasy（装飾）
基本 monospace（等幅）
- 対象
-
すべての要素
- 継承の有無
-
継承
- ポイント
-
上記タイプを指定の最後に付ける事。下記サンプル参照。
font-familyサンプル
serif 明朝系
sans-serif ゴシック系
cursive 筆記体系
fantasy 装飾
monospace 等幅
指定サンプル
p{ font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3" sans-serif ; }
p{ font-family: Arial, Helvetica, sans-serif; }
visibility：表示/非表示
visibilityプロパティは、指定した要素（ボックス）の表示・非表示を指定します。要素を非表示に指定しても、該当要素のボックス分のスペースは残ります。全く表示させない場合は”display:none;”を指定。
- プロパティ
-
visibility
- 値
-
キーワード(下記参照)
visible（可視）
hidden（不可視）
collapse（不可視）
- 対象
-
すべての要素
- 継承の有無
-
継承
visibilityサンプル
サンプルvisible[サンプル]
サンプルhidden[]
サンプルcollapse[サンプル]
*collapseはIEでは機能しない
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
- 対象
-
すべての要素
- 継承の有無
-
なし