Home/Menu

スタイルなCSSの基礎講座

テキスト

◆ はじめに

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

◆ テキスト系プロパティ

text-alignプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
ブロックレベル要素ブラウザ次第そして、文字方向によるyesNN6,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 noNN6,IE5.5はNGですがIE5はなぜかOK
[サンプル]

ちゃいちゃん: ちゃいちゃん top

ちゃいちゃん: ちゃいちゃん middle

ちゃいちゃん: ちゃいちゃん bottom(なぜか、IE5.5だとbottomが効かない、N6なら大丈夫)

----------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のみテスト)
全要素nonenoNN6,IE5.5blinkのみNG
[サンプル]

下線のちゃいちゃん!text-decoration: underline

上線のちゃいちゃん!text-decoration: overline

取消線のちゃいちゃんパパ!text-decoration: line-through

上下線のちゃいちゃん!text-decoration: underline overline

ブリンクのちゃいちゃん!text-decoration: blink

----------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のみテスト)
全要素normalyesNN6,IE5.5

letter-spacingプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyesNN6,IE5.5

word-spacingプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素normalyesNN6

text-transformプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素noneyesNN6,IE5.5

text-indentプロパティ

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

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

white-spaceプロパティ

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

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

text-shadowプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素nonenoNN6,IE5.5ともにNG
[サンプル]

ちゃいちゃんは「一生懸命生きること」実践したよ!
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ!
ちゃいちゃんのローマ字でのスペルは、
Chaichan Chaichanです!

ちゃいちゃんは「一生懸命生きること」実践したよ!
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ!
ちゃいちゃんのローマ字でのスペルは、
Chaichan Chaichanです!

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

Home/Menu/スタイルシート概説リファレンス