スタイルなCSSの基礎講座

◆ はじめに

つぎは、テキスト系のプロパティです。
従来、属性でやっていた行揃えやu要素、strike要素、s要素、center要素等の下線、取消線、中央揃えは、これらに代わり、スタイルシートのテキスト系のプロパティを使いましょう。

• スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
• スタイルシートのリファレンスは、こちらにありますので参照してください。
• 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。

◆ テキスト系プロパティ

text-alignプロパティ

ブロックレベル要素内で行揃えを設定するプロパティです。
設定値は、left,right,center,justify,文字列（th要素とtd要素のみ）

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素	ブラウザ次第そして、文字方向による	yes	NN6,IE5.5

[サンプル]

----------CSS2 ソース------------------------------------------------
p.gyosoroe1 {
	text-align: left;
}
p.gyosoroe2 {
	text-align: center;
}
p.gyosoroe3 {
	text-align: right;
}
---------- HTML4.01 ソース -----------------------------------------
<p class="gyosoroe1">
ちゃいちゃん
</p>
<p class="gyosoroe2">
ちゃいちゃん
</p>
<p class="gyosoroe3">
ちゃいちゃん
</p>

vertical-alignプロパティ

インライン,th,td各要素の表示される行の中で、縦方向の位置揃えを設定するプロパティです。
設定値は、実数値＋単位、%値、キーワード（baseline,top,middle,bottom,text-top,text-bottom,super,sub）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
インライン要素、th,td要素	baseline	no	NN6,IE5.5はNGですがIE5はなぜかOK

[サンプル]

----------CSS2 ソース------------------------------------------------
img#valign1{
	vertical-align: top;
}
img#valign2{
	vertical-align: middle;
}
img#valign3{
	vertical-align: bottom;
}
---------- HTML4.01 ソース -----------------------------------------
<p>
ちゃいちゃん：
<img id="valign1" src="../img/chaichan.gif" alt="ちゃいちゃん">
<em>top</em>
</p>
<p>
ちゃいちゃん：
<img id="valign2" src="../img/chaichan.gif" alt="ちゃいちゃん">
<em>middle</em>
</p>
<p>
ちゃいちゃん：
<img id="valign3" src="../img/chaichan.gif" alt="ちゃいちゃん">
<em>bottom</em>（なぜか、IE5.5だとbottomが効かない、N6なら大丈夫）
</p>

text-decorationプロパティ

文字（テキスト）に対して下線、上線、取消線、点滅を設定するプロパティです。
設定値は、キーワード（none,underline,overline,line-through,blink）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	none	no	NN6,IE5.5blinkのみNG

[サンプル]

----------CSS2 ソース------------------------------------------------
p.deco1 {
	text-decoration: underline;
}
p.deco2 {
	text-decoration: overline;
}
p.deco3 {
	text-decoration: line-through;
}
p.deco4 {
	text-decoration: underline overline;
}
p.deco5 {
	text-decoration: blink;
}
---------- HTML4.01 ソース -----------------------------------------
<p class="deco1">
下線のちゃいちゃん！<em>text-decoration: underline</em>
</p>
<p class="deco2">
上線のちゃいちゃん！<em>text-decoration: overline</em>
</p>
<p class="deco3">
取消線のちゃいちゃんパパ！<em>text-decoration: line-through</em>
</p>
<p class="deco4">
上下線のちゃいちゃん！<em>text-decoration: underline overline</em>
</p>
<p class="deco5">
ブリンクのちゃいちゃん！<em>text-decoration: blink</em>
</p>

line-heightプロパティ

line-heightプロパティは、行の高さ（行間）を設定するプロパティです。
設定値は、実数値＋単位、実数値（この値×フォントサイズ）、%値、キーワード（normal）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	normal	yes	NN6,IE5.5

letter-spacingプロパティ

letter-spacingプロパティは、文字と文字の間隔を設定するプロパティです。
設定値は、実数値＋単位、キーワード（normal）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	normal	yes	NN6,IE5.5

word-spacingプロパティ

word-spacingプロパティは、単語と単語の間隔を設定するプロパティです。
設定値は、実数値＋単位、キーワード（normal）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	normal	yes	NN6

text-transformプロパティ

text-transformプロパティは、大文字小文字表示をいろいろ設定するプロパティです。
設定値は、キーワード（none,capitalize,lowercase,uppercase）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	none	yes	NN6,IE5.5

text-indentプロパティ

text-indentプロパティは、文章の一行目のインデントを設定するプロパティです。
設定値は、実数値＋単位、%値があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素	0	yes	NN6,IE5.5

white-spaceプロパティ

white-spaceプロパティは、空白、タブ、改行をどのように設定するかのプロパティです。
設定値は、キーワード（normal,pre,nowrap）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素	normal	yes	NN6

text-shadowプロパティ

text-shadowプロパティは、文字に影を設定するかのプロパティです。（各ブラウザでのサポートは、まだないみたいです。）

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	none	no	NN6,IE5.5ともにNG

[サンプル]

----------CSS2 ソース------------------------------------------------
p.test1 {
	line-height: 200%;
	letter-spacing: 5pt;
	word-spacing: 4em;
	text-transform: uppercase;
	text-indent: 1em;
	text-shadow: #666666 2px 2px 1.3px;
}
---------- HTML4.01 ソース -----------------------------------------
<p>
ちゃいちゃんは「一生懸命生きること」実践したよ！<br>
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！<br> 
ちゃいちゃんのローマ字でのスペルは、<br>
Chaichan Chaichanです！ 
</p>
<p class="test1">
ちゃいちゃんは「一生懸命生きること」実践したよ！<br>
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！<br> 
ちゃいちゃんのローマ字でのスペルは、<br>
Chaichan Chaichanです！ 
</p>