●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END
02css_font-text(フォント・テキスト)
サンプル例
●01color(フォント・テキスト)
●02font-size(フォント・テキスト)
●03font-weight(フォント・テキスト)
●04font-style(フォント・テキスト)
●05font-family(フォント・テキスト)
●06font-variant(フォント・テキスト)
●07font(フォント・テキスト)
●08text-decoration(フォント・テキスト)
●09text-transform(フォント・テキスト)
●10text-indent(フォント・テキスト)
●11text-align(フォント・テキスト)
●12vertical-align(フォント・テキスト)
●13line-height(フォント・テキスト)
●14letter-spacing(フォント・テキスト)
●15word-spacing(フォント・テキスト)
●16white-space(フォント・テキスト)
●17direction(フォント・テキスト)
●18unicode-bidi(フォント・テキスト)
●19content(フォント・テキスト)
●20content/quotes(フォント・テキスト)
END
02css_font-text(フォント・テキスト)
01color
colorプロパティは、文字色の指定をします。適用要素:すべての要素
値 | 解説 |
---|---|
○○○ | ○○○○○○○○○ |
※CSS
|
---|
※★sample ★① 文字色のサンプルです。青く表示されます。 ★②01colorサンプル |
---|
02font-size
font-sizeプロパティは、フォントサイズを指定します。 適用要素:すべての要素
値 | 解説 | |
---|---|---|
xx-large | 7段階のうち1番大きなフォントサイズ | |
x-large | 7段階のうち2番目に大きなフォントサイズ | |
large | 7段階のうち3番目に大きなフォントサイズ | |
medium | 標準のフォントサイズ(初期値) | |
small | 7段階のうち3番目に小さなフォントサイズ | |
x-small | 7段階のうち2番目に小さなフォントサイズ | |
xx-small | 7段階のうち1番小さなフォントサイズ | |
larger | 親要素のフォントサイズより1段階大きなフォントサイズ 親要素が7段階のフォントサイズ以外で指定されている場合は、ブラウザによってフォントサイズが異なります | |
smaller | 親要素のフォントサイズより1段階小さなフォントサイズ 親要素が7段階のフォントサイズ以外で指定されている場合は、ブラウザによってフォントサイズが異なります | |
数値 | 数値+単位、%値 |
※CSS
|
---|
※★sample ★① テキストサイズのサンプルです。 ★②02font-sizeサンプル |
---|
03font-weight
font-weightプロパティは、フォントの太さを指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | 標準フォントサイズ(初期値) |
bold | 太字フォントサイズ |
bolder | 1段階太いフォントサイズ |
lighter | 1段階細いフォントサイズ |
※CSS
|
---|
※★sample ★① 太字の指定 ★②03font-weightサンプル |
---|
04font-style
font-styleプロパティは、フォントスタイルを指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | 標準フォント(初期値) |
italic | イタリック体 |
oblique | 斜体 |
※CSS
|
---|
※★sample ★① イタリック ★②04font-styleサンプル |
---|
05font-family
font-familyプロパティは、フォントの種類を指定します。 指定したフォントで表示できない場合に備え、カンマ( , )で区切って複数の候補を指定することができます。 適用要素:すべての要素
値 | 解説 |
---|---|
○○○ | ○○○○○○○○○ |
※CSS
|
---|
※★sample ★① このテキストのフォントには明朝体が指定されています。 ★②05font-familyサンプル |
---|
06font-variant
font-variantプロパティは、フォントをスモールキャップにします。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | スモールキャピタルを使用しない(初期値) |
small-caps | スモールキャピタルを使用する |
※CSS
|
---|
※★sample ★① 60 Plus One 60 Plus One ★②06font-variantサンプル |
---|
07font
fontプロパティは、フォントに関する設定をまとめて指定します。 値はスペースで区切って指定します。また、プロパティを指定する順番は決まっていますので、下記「値」の表を参照下さい。 適用要素:すべての要素
値 |
---|
font-styleプロパティで指定する値 |
font-variantプロパティで指定する値 |
font-weightプロパティで指定する値 |
font-sizeプロパティで指定する値(省略不可) |
line-heightプロパティで指定する値(サイズの後にスラッシュ「/」 を入れ続けて記入) |
font-familyプロパティで指定する値(省略不可) |
※font-styleプロパティ、font-variantプロパティ、font-weightプロパティは、font-sizeプロパティより前に指定されていれば順不同です。 |
※CSS
|
---|
※★sample ★① 60 Plus One 60 Plus One ★②07fontサンプル |
---|
08text-decoration
text-decorationプロパティは、テキストの装飾(下線、上線、取り消し線、点滅)を指定します。 スペースで区切り、複数指定することも可能です。 適用要素:すべての要素
値 | 解説 |
---|---|
none | 装飾なし(初期値) |
underline | テキストに下線 |
overline | テキストに上線 |
line-through | テキストに取り消し線 |
blink | テキストを点滅させる |
※CSS
|
---|
※★sample ★① テキストにアンダーラインを引きます。 ★②08text-decorationサンプル |
---|
09text-transform
text-transformプロパティは、単語に対して大文字や小文字の指定をします。 適用要素:すべての要素
値 | 解説 |
---|---|
none | 変換しないでそのまま表示(初期値) |
capitalize | 単語の先頭文字を大文字に変換 |
uppercase | 全ての文字を大文字に変換 |
lowercase | 全ての文字を小文字に変換 |
※CSS
|
---|
※ ★① 60 plus one ★②09text-transformサンプル |
---|
10text-indent
text-indentプロパティは、文章の1行目のインデントの幅を指定します。 適用要素:ブロックレベル要素、inline-blockの要素、th要素、td要素
値 | 解説 |
---|---|
数値 | 数値+単位、%値(初期値 0) |
※CSS
|
---|
※★sample ★① 字下げ幅を指定 |
---|
11text-align
text-alignプロパティは、位置・均等割付(ブロックレベル要素)を指定します。 適用要素:ブロックレベル要素
値 | 解説 |
---|---|
left | 左寄せで表示します(初期値:文字表記がltrの場合) |
center | 中央で表示します |
right | 右寄せで表示します |
justify | 両端揃えで表示します |
※CSS
|
---|
※★sample ★① 左寄せ 中央 右寄せ ★②11text-alignサンプル |
---|
12vertical-align
vertical-alignプロパティは、縦方向の位置を指定します。 適用要素:インライン要素、th要素、td要素
値 | 解説 |
---|---|
baseline | 親ボックスのベースラインに揃えます(初期値) |
top | ボックスの上位置に揃えます |
middle | ボックスの中心位置に揃えます |
bottom | ボックスの下位置に揃えます |
text-top | フォントの上位置に揃えます |
text-bottom | フォントの下位置に揃えます |
super | 上付き文字で表示 |
sub | 下付き文字で表示 |
数値 | 数値+単位、%値 |
※th要素、td要素は、text-top、text-bottom、super、subは無効です。 |
※CSS
|
---|
※★sample ★①12vertical-alignサンプル |
---|
13line-height
line-heightプロパティは、行の高さを指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | ブラウザに依存します(初期値) |
数値 | 数値+単位、%値、数値のみ 数値のみ指定した場合は、子要素に相対値が継承され、単位を付けた場合は、絶対値が継承されます |
※CSS
|
---|
※★sample ★① 行の高さの指定 行の高さの指定 |
---|
14letter-spacing
letter-spacingプロパティは、文字の間隔を指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | 標準で表示(初期値) |
数値 | 数値+単位 |
※CSS
|
---|
※★sample ★① 標準の文字間隔 文字間隔0.5em 文字間隔1em ★②14letter-spacingサンプル |
---|
15word-spacing
word-spacingプロパティは、単語の間隔を指定します。
値 | 解説 |
---|---|
normal | 標準で表示(初期値) |
数値 | 数値+単位 |
※CSS
|
---|
※★sample ★①15word-spacingサンプル |
---|
16white-space
white-spaceプロパティは、ホワイトスペース(スペース、タブ、改行等)の仕方を指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
normal | 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。 自動改行します。(初期値) |
nowrap | 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。 自動改行しません。 |
pre | 連続するホワイトスペースをまとめずに、記述されたまま表示します。 自動改行せず、ソースコードの改行で改行します。 *ieは標準モードでのみ機能。 |
pre-wrap | 連続するホワイトスペースをまとめずに、記述されたまま表示します。 自動改行します。 |
pre-line | 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。 自動改行せず、ソースコードの改行で改行します。 |
※CSS
|
---|
※★sample ★① 値:nowrapで自動折り返しを禁止しています。 ★②16white-spaceサンプル |
---|
17direction
directionプロパティは、文字表記の方向を指定します。 インライン要素の場合は、unicode-bidiプロパティも指定して下さい。 適用要素:すべての要素
テキスト出力を右から左へ。
値 | 解説 |
---|---|
ltr | 左から右へ表示(初期値) |
rtl | 右から左へ表示 |
※CSS
|
---|
※★sample ★① テキスト出力を右から左へ。 ★②17directionサンプル |
---|
18unicode-bidi
unicode-bidiプロパティは、Unicodeの文字表記の方向を上書きを指示します。
値 | 解説 |
---|---|
normal | 制御しない(初期値) |
embed | 指定した要素がインライン要素の場合、directionプロパティの指定内容で上書き UNICODEの特殊文字で要素の先頭に「LRE」もしくは「RLE」、最後に「PDF」を付けた場合と同様の結果になります |
bidi-override | 指定した要素がインライン要素もしくは、インライン要素のみ含むブロックレベル要素の場合、directionプロパティの指定内容で上書き UNICODEの特殊文字で要素の先頭に「LRO」もしくは「RLO」、最後に「PDF」を付けた場合と同様の結果になります |
※CSS
|
---|
※★sample ★①18unicode-bidiサンプル |
---|
19content
contentプロパティは、内容を挿入します。 ※ieは標準モードでのみ機能(ie7以下は未対応) 適用要素:before擬似要素、after擬似要素
値 | 解説 |
---|---|
normal | 内容を挿入しない(初期値) |
none | 内容を挿入しない |
文字列 | 挿入する文字列を指定 |
uri | 挿入するuriを指定 |
カウンタ | カウンタ関数を設定し、カウンタを付けます |
attr(属性名) | 指定した属性の値を表示 |
※CSS
|
---|
※★sample ★① Web tateda-yoshio ★②19contentサンプル |
---|
20content/quotes
content/quotesプロパティは、内容を挿入し、引用符を指定します。 ※ieは標準モードでのみ機能(ie7以下は未対応)、safari、chromeは未対応。 適用要素:すべての要素
値 | 解説 |
---|---|
文字列 文字列 | 開始引用符と終了引用符をスペースで区切って指定 引用符を入れ子にすることもできます(引用符を半角スペースで区切って記述します)。 例:quotes: "{" "}" "(" ")"; ダブルクォーテーション( " )を指定する場合はバックスラッシュ( \ )でエスケープしておくかシングルクォーテーションで括ります。 |
none | 引用符を表示しない |
|
---|
※★sample ★① .text color: #0000ff; ★②20content/quotesサンプル |
---|