情報技術|CSS|テキスト

colorプロパティ

文字の色を変更できる．

適用できる要素	すべての要素
継承	する

テンプレート	color: `値`;

指定できる値	値の効果
`色`	指定した色になる．

CSSの例文	p.color{ color: red; }
XHTMLの例文	<p class="color"> 先生と私 </p>
出力結果	先生と私

line-heightプロパティ

行の高さを指定できる．

適用できる要素	すべての要素
継承	する
テンプレート	line-height: `値`;

指定できる値	値の効果
normal	通常の行の高さになる．
`実数`	行の高さが指定した実数倍になる．
`長さ`	指定した単位の長さ分だけ要素を上げて表示する．
%	行の高さがフォントサイズに対して指定したパーセンテージ分だけ開く．

CSSの例文	p.line-height{ line-height: 2.2; }
XHTMLの例文	<p class="line-height"> 私はその人を常に先生と呼んでいた。だから此所でもただ先生と書くだけで本名は打ち明けない。こらは世間を憚る遠慮というよりも、その方が私に取って自然だからである。 </p>
出力結果	私はその人を常に先生と呼んでいた。だから此所でもただ先生と書くだけで本名は打ち明けない。こらは世間を憚る遠慮というよりも、その方が私に取って自然だからである。

CSSの例文

p.line-height{
line-height: 2.2;
}

XHTMLの例文

<p class="line-height">
私はその人を常に先生と呼んでいた。だから此所でもただ先生と
書くだけで本名は打ち明けない。こらは世間を憚る遠慮というより
も、その方が私に取って自然だからである。
</p>

出力結果

私はその人を常に先生と呼んでいた。だから此所でもただ先生と書くだけで本名は打ち明けない。こらは世間を憚る遠慮というよりも、その方が私に取って自然だからである。

vertical-alignプロパティ

行の中でインライン要素の位置を上下にずらすことができる．

適用できる要素	インライン要素・表のセル
継承	しない
テンプレート	vertical-align: `値`;

指定できる値	値の効果
sub	要素を下付き文字で表示する．
sup	要素を上付き文字で表示する．
%	指定した値(マイナスも可能)にline-heightプロパティで指定した行の高さをかけた分だけ要素を上げて表示する．
`長さの値`	指定した単位の長さ分だけ要素を上げて表示する．
baseline	アルファベットのベースラインに要素を揃えて表示する．
middle	要素を中央に揃えて表示する．
text-top	要素の上辺を親要素のフォント上辺に合わせて表示する．
text-bottom	要素の下辺を親要素のフォント下辺に合わせて表示する．
top	要素の上辺を要素が含まれる行の上辺に合わせて表示する．
bottom	要素の下辺を要素が含まれる行の下辺に合わせて表示する．

CSSの例文	img.vertical-align{ vertical-align: middle; }
XHTMLの例文	<p> <img src="list-style-image-gr.gif" alt="none" class="vertical-align" /> 両親と私 </p>
出力結果	両親と私

text-indentプロパティ

段落の1行目を字下げした状態で表示できる．

適用できる要素	ブロック要素
継承	する

テンプレート	text-indent: `値`;

指定できる値	値の効果
`長さ`	指定した値の分だけ初めの文字を字下げする．
%	1行に対して指定した値の割合だけ初めの文字を字下げする．

CSSの例文	p.text-indent{ text-indent: 5%; }
XHTMLの例文	<p class="text-indent"> 宅に帰って案外に思ったのは、父の元気がこの前見た時と大して変っていない事であった。 </p>
出力結果	宅に帰って案外に思ったのは、父の元気がこの前見た時と大して変っていない事であった。

text-alignプロパティ

文字の横方向の位置を指定する．

適用できる要素	ブロック要素・表のセル
継承	する

テンプレート	text-align: `値`;

指定できる値	値の効果
left	左端に揃える．
right	右端に揃える．
center	中央に揃える．
justify	両端に揃える．欧文のみ可能

CSSの例文	p.text-align{ text-align: center; }
XHTMLの例文	<p class="text-align"> 先生と遺書 </p>
出力結果	先生と遺書

white-spaceプロパティ

空白や折り返しの扱いを変える．

適用できる要素	すべての要素
継承	する

テンプレート	white-space: `値`;

指定できる値	値の効果
normal	通常どおり，半角空白や改行は1つの半角空白にまとめて表示する．
pre	空白や改行をそのまま表示する．
nowrap	折り返しを禁止する．

CSSの例文

th.white-space{
white-space: nowrap;
}

XHTMLの例文

<table border="1">
<tr><th class="white-space">下　先生と遺書　一</tb>
<td>&hellip;&hellip;私はこの夏あたりから二、三度手紙を受け取りました。</tb></tr>
<tr><th class="white-space">下　先生と遺書　二</tb>
<td>私はそれからこの手紙を書き出しました。</tb></tr>
</table>

出力結果

下　先生と遺書　一	……私はこの夏あたりから二、三度手紙を受け取りました。
下　先生と遺書　二	私はそれからこの手紙を書き出しました。

text-decorationプロパティ

文字に下線などを付ける．

適用できる要素	すべての要素
継承	しない

テンプレート	text-decoration: `値`;

指定できる値	値の効果
none	下線などの飾りを消す．
underline	下線を付ける．
overline	上線を付ける．
line-through	打ち消し線を付ける．
blink	点滅させる．

CSSの例文	p.text-decoration{ text-decoration: underline; }
XHTMLの例文	<p class="text-decoration"> こころ </p>
出力結果	こころ

その他のテキストプロパティ

letter-spacingプロパティ
word-spacingプロパティ
directionプロパティ
unicode-bidiプロパティ
text-justifyプロパティ
word-breakプロパティ
writing-medeプロパティ
text-transformプロパティ

COE documents

テキスト

文字の色を変更