Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END

02css_font-text(フォント・テキスト)

02css_font-text(フォント・テキスト)

01color

colorプロパティは、文字色の指定をします。適用要素:すべての要素

解説
○○○ ○○○○○○○○○
※CSS

HTMLと同じ指定方法
p { color: #990099; }
p { color: green; }
 
CSS独自の指定方法
p { color: #fff; }
p { color: rgb(255,255,255); }
p { color: rgb(100%,100%,100%); }

.p1 {
	color: #0000ff;
	background-color: #ffccc5;
}

※HTML
<p class="p1">文字色のサンプルです。青く表示されます。</p>
※★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


.p2 {
	font-size: 0.7em;
	background-color: #ffccc5;
}

※HTML
<p class="p2">テキストサイズのサンプルです。</p>
※★sample
★①

テキストサイズのサンプルです。

★②02font-sizeサンプル

03font-weight

font-weightプロパティは、フォントの太さを指定します。 適用要素:すべての要素

解説
normal 標準フォントサイズ(初期値)
bold 太字フォントサイズ
bolder 1段階太いフォントサイズ
lighter 1段階細いフォントサイズ
※CSS

.p3 {
	font-weight: bold;
	background-color: #ffccc5;
}

※HTML
<p class="p3">太字の指定</p>
※★sample
★①

太字の指定

★②03font-weightサンプル

04font-style

font-styleプロパティは、フォントスタイルを指定します。 適用要素:すべての要素

解説
normal 標準フォント(初期値)
italic イタリック体
oblique 斜体
※CSS

.p4 {
	font-style: italic;
	background-color: #ffccc5;
}

※HTML
<p class="p4">イタリック</p>
※★sample
★①

イタリック

★②04font-styleサンプル

05font-family

font-familyプロパティは、フォントの種類を指定します。 指定したフォントで表示できない場合に備え、カンマ( , )で区切って複数の候補を指定することができます。 適用要素:すべての要素

解説
○○○ ○○○○○○○○○
※CSS

値
フォントファミリ名で指定
フォント名で指定する方法です。
(日本語やスペースが含まれるフォントファミリ名は引用符で囲みます。) 
Safariは日本語を使ったフォントファミリー名は認識しません。 
逆にFirefoxでは日本語フォントのアルファベット表記は適用されないので、
日本語で指定する必要があります。
Windows
"MS UI Gothic"
"MS Pゴシック","MS PGothic"
"MS ゴシック","MS Gothic"
"MS P明朝","MS PMincho"
"MS 明朝","MS Mincho"
"メイリオ",Meiryo
Mac
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"
"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN"
"ヒラギノ角ゴ Pro W6","HiraKakuPro-W6"
"ヒラギノ角ゴ ProN W6","HiraKakuProN-W6"
"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std"
"ヒラギノ角ゴ StdN W8","Hiragino Kaku Gothic StdN"
"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro"
"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN"
"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro"
"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN"
"ヒラギノ明朝 Pro W6","HiraMinPro-W6"
"ヒラギノ明朝 ProN W6","HiraMinProN-W6"
"Osaka"
"Osaka-等幅","Osaka-Mono" 

総称ファミリ名で指定
ゴシック体系や明朝体系など種類で指定する方法です。 
総称ファミリ名はフォントファミリ名で指定したフォントが使えなかった場合にそなえ、
値の最後に総称ファミリ名を指定することを推奨しています。
 ゴシック体系や明朝体系など種類で指定する方法です。
また、総称ファミリ名は引用符で囲いません。
sans-serif(ゴシック体系)
serif(明朝体系)
monospace(等幅系)
cursive(筆記体系)
fantasy(装飾系)

.p5 {
	font-family: "MS P明朝","MS PMincho",
	"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
	background-color: #ffccc5;
}

※HTML
<p class="p5">このテキストのフォントには明朝体が指定されています。</p>
※★sample
★①

このテキストのフォントには明朝体が指定されています。

★②05font-familyサンプル

06font-variant

font-variantプロパティは、フォントをスモールキャップにします。 適用要素:すべての要素

解説
normal スモールキャピタルを使用しない(初期値)
small-caps スモールキャピタルを使用する
※CSS

p.sample1 {
	font-variant: normal;
}
p.sample2 {
	font-variant: small-caps;
}

※HTML
<p class="sample1">60 Plus One</p>
<p class="sample2">60 Plus One</p>

※★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

p.sample21 {
	font: italic normal bold 1em/1.5 "MS Pゴシック",sans-serif;
	background-color: #ffccc5;
}
p.sample22 {
	font: 1em "MS Pゴシック",sans-serif;
	background-color: #ffccc5;
}

※HTML
<p class="sample21">60 Plus One</p>
<p class="sample22">60 Plus One</p>
※★sample
★①

60 Plus One


60 Plus One

★②07fontサンプル

08text-decoration

text-decorationプロパティは、テキストの装飾(下線、上線、取り消し線、点滅)を指定します。 スペースで区切り、複数指定することも可能です。 適用要素:すべての要素

解説
none 装飾なし(初期値)
underline テキストに下線
overline テキストに上線
line-through テキストに取り消し線
blink テキストを点滅させる
※CSS

.p6 {
	text-decoration: underline;
	background-color: #ffccc5;
}

※HTML
<p class="p6">テキストにアンダーラインを引きます。</p>
※★sample
★①

テキストにアンダーラインを引きます。

★②08text-decorationサンプル

09text-transform

text-transformプロパティは、単語に対して大文字や小文字の指定をします。 適用要素:すべての要素

解説
none 変換しないでそのまま表示(初期値)
capitalize 単語の先頭文字を大文字に変換
uppercase 全ての文字を大文字に変換
lowercase 全ての文字を小文字に変換
※CSS

.p7 {
	text-transform: capitalize;
	background-color: #ffccc5;
}

※HTML
<p class="p7">60 plus one</p>

★①

60 plus one

★②09text-transformサンプル

10text-indent

text-indentプロパティは、文章の1行目のインデントの幅を指定します。 適用要素:ブロックレベル要素、inline-blockの要素、th要素、td要素

解説
数値 数値+単位、%値(初期値 0)
※CSS

.p8 {
	text-indent: 1em;
	background-color: #ffccc5;
}

※HTML
<p class="p8">字下げ幅を指定<br />先頭1文字字下げ</p>
※★sample
★①

字下げ幅を指定
先頭1文字字下げ

★②10text-indentサンプル

11text-align

text-alignプロパティは、位置・均等割付(ブロックレベル要素)を指定します。 適用要素:ブロックレベル要素

解説
left 左寄せで表示します(初期値:文字表記がltrの場合)
center 中央で表示します
right 右寄せで表示します
justify 両端揃えで表示します
※CSS

p.sample111 {
	text-align: left;
	background-color: #ffccc5;
}
p.sample112 {
	text-align: center;
	background-color: #ffccc5;
}
p.sample113 {
	text-align: right;
	background-color: #ffccc5;
}

※HTML
<p class="sample111">左寄せ</p>
<p class="sample112">中央</p>
<p class="sample113">右寄せ</p>
※★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

span.sample1 {
	vertical-align: super;
}
span.sample2 {
	vertical-align: sub;
}

※HTML
<p>100m<span class="sample1">2</span></p>
<p>H<span class="sample2">2</span>O</p>
※★sample
★①12vertical-alignサンプル

13line-height

line-heightプロパティは、行の高さを指定します。 適用要素:すべての要素

解説
normal ブラウザに依存します(初期値)
数値 数値+単位、%値、数値のみ
数値のみ指定した場合は、子要素に相対値が継承され、単位を付けた場合は、絶対値が継承されます
※CSS

p.sample131 {
	line-height: 1.5;
}
p.sample132 {
	line-height: 100%;
}

※HTML
<p class="sample131">行の高さの指定<br />行の高さ1.5</p>
<p class="sample132">行の高さの指定<br />行の高さ100%</p>

※★sample
★①

行の高さの指定
行の高さ1.5

行の高さの指定
行の高さ100%

★②13line-heightサンプル

14letter-spacing

letter-spacingプロパティは、文字の間隔を指定します。 適用要素:すべての要素

解説
normal 標準で表示(初期値)
数値 数値+単位
※CSS

p.sample141 {
	letter-spacing: 0;
	background-color: #ffccc5;
}
p.sample142 {
	letter-spacing: 0.5em;
	background-color: #ffccc5;
}
p.sample143 {
	letter-spacing: 1em;
	background-color: #ffccc5;
}

※HTML
<p class="sample141">標準の文字間隔</p>
<p class="sample142">文字間隔0.5em</p>
<p class="sample143">文字間隔1em</p>
※★sample
★①

標準の文字間隔

文字間隔0.5em

文字間隔1em

★②14letter-spacingサンプル

15word-spacing

word-spacingプロパティは、単語の間隔を指定します。

解説
normal 標準で表示(初期値)
数値 数値+単位
※CSS

p.sample1 {
	word-spacing: 0;
}
p.sample2 {
	word-spacing: 0.5em;
}
p.sample3 {
	word-spacing: 1em;
}

※HTML
<p class="sample1">Standard word interval</p>
<p class="sample2">Word interval 0.5em</p>
<p class="sample3">単語間隔1em</p>
※★sample
★①15word-spacingサンプル

16white-space

white-spaceプロパティは、ホワイトスペース(スペース、タブ、改行等)の仕方を指定します。 適用要素:すべての要素

解説
normal 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。
自動改行します。(初期値)
nowrap 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。
自動改行しません。
pre 連続するホワイトスペースをまとめずに、記述されたまま表示します。
自動改行せず、ソースコードの改行で改行します。
*ieは標準モードでのみ機能。
pre-wrap 連続するホワイトスペースをまとめずに、記述されたまま表示します。
自動改行します。
pre-line 連続するホワイトスペースをまとめ、1つの半角スペースとして表示します。
自動改行せず、ソースコードの改行で改行します。
※CSS

.p16 {
	white-space: nowrap;
	background-color: #ffccc5;
}

※HTML
<p class="p16">値:nowrapで自動折り返しを禁止しています。</p>
※★sample
★①

値:nowrapで自動折り返しを禁止しています。

★②16white-spaceサンプル

17direction

directionプロパティは、文字表記の方向を指定します。 インライン要素の場合は、unicode-bidiプロパティも指定して下さい。 適用要素:すべての要素

テキスト出力を右から左へ。

解説
ltr 左から右へ表示(初期値)
rtl 右から左へ表示
※CSS

.p17 {
	direction: rtl;
	background-color: #ffccc5;
}

※HTML
<p class="p17">テキスト出力を右から左へ。</p>
※★sample
★①

テキスト出力を右から左へ。

★②17directionサンプル

18unicode-bidi

unicode-bidiプロパティは、Unicodeの文字表記の方向を上書きを指示します。

解説
normal 制御しない(初期値)
embed 指定した要素がインライン要素の場合、directionプロパティの指定内容で上書き
UNICODEの特殊文字で要素の先頭に「LRE」もしくは「RLE」、最後に「PDF」を付けた場合と同様の結果になります
bidi-override 指定した要素がインライン要素もしくは、インライン要素のみ含むブロックレベル要素の場合、directionプロパティの指定内容で上書き
UNICODEの特殊文字で要素の先頭に「LRO」もしくは「RLO」、最後に「PDF」を付けた場合と同様の結果になります
※CSS

p {
	direction: rtl;
	unicode-bidi: bidi-override;
}

※HTML
<p>テキスト出力を右から左へ。</p>
※★sample
★①18unicode-bidiサンプル

19content

contentプロパティは、内容を挿入します。 ※ieは標準モードでのみ機能(ie7以下は未対応) 適用要素:before擬似要素、after擬似要素

解説
normal 内容を挿入しない(初期値)
none 内容を挿入しない
文字列 挿入する文字列を指定
uri 挿入するuriを指定
カウンタ カウンタ関数を設定し、カウンタを付けます
attr(属性名) 指定した属性の値を表示
※CSS

.sample19:before {
	content: "Copyright(C)";
}
.sample19:after {
	content: ". All Rights Reserved.";
}

※HTML
<p class="sample19">Web tateda-yoshio</p>
※★sample
★①

Web tateda-yoshio

★②19contentサンプル

20content/quotes

content/quotesプロパティは、内容を挿入し、引用符を指定します。 ※ieは標準モードでのみ機能(ie7以下は未対応)、safari、chromeは未対応。 適用要素:すべての要素

解説
文字列 文字列 開始引用符と終了引用符をスペースで区切って指定
引用符を入れ子にすることもできます(引用符を半角スペースで区切って記述します)。
例:quotes: "{" "}" "(" ")";
ダブルクォーテーション( " )を指定する場合はバックスラッシュ( \ )でエスケープしておくかシングルクォーテーションで括ります。
none 引用符を表示しない

contentプロパティ
open-quote(開始引用符を挿入、入れ子の深さに応じた引用符を使用)
close-quote(終了引用符を挿入、入れ子の深さに応じた引用符を使用)
no-open-quote(引用符の入れ子の深さを一段階深く)
no-close-quote(引用符の入れ子の深さを一段階浅く)

※CSS
.sample20 {
	quotes: "{" "}";
}
.sample20:before {
	content: open-quote;
}
.sample20:after {
	content: close-quote;
}

※HTML
<p>.text <span class="sample20"> color: #0000ff; </span></p>
※★sample
★①

.text color: #0000ff;

★②20content/quotesサンプル