スタイルシート講座〜テキスト編
それではテキスト編です。
まずは文字色の指定です。
colorの後に指定します。色は16進指定とパーセント、カラー（文字）指定とできますが、ここではカラー指定をして見ます。
ＨＥＡＤ宣言：
<style type="text/css">
.class1 {color:red;}
.class2 {color:green;}
.class3 {color:blue;}
<style>
ＢＯＤＹ宣言：
<p class="class1">文字色を変えてみました。</p>
<p class="class2">文字色を変えてみました。</p>
<p class="class3">文字色を変えてみました。</p>
文字色を変えてみました。
文字色を変えてみました。
文字色を変えてみました。
さあ次は文字の位置を変えてみましょう。text-alignです。
left 左寄せ
right 右寄せ
center センタリング
になります。
ＨＥＡＤ宣言：
<style type="text/css">
.class4 {text-align:left;}
.class5 {text-align:right;}
.class6 {text-align:center;}
<style>
ＢＯＤＹ宣言：
<p class="class4">文字を左に寄せました。</p>
<p class="class5">文字を右に寄せました。</p>
<p class="class6">文字をセンタリングしました。</p>
文字を左に寄せました。
文字を右に寄せました。
文字をセンタリングしました。
次は文字の均等割り当てです。text-align:justifyで行いますが、
この指定はタグに直接text-align:justifyをしたうえで、text-justify:distribute-all-lineを指定して
行います。
ＨＥＡＤ宣言：
<style type="text/css">
h2 {text-align:justify;}
h2.class7 {text-justify:auto;}
<style>
ＢＯＤＹ宣言：
<h2 class="class7">文字を均等割り当てしました。</h2>
実行結果：
文字を均等割り当てしました。
最後は縦書きです。こちらはwriting-modeでtb-rlを指定します。
ＨＥＡＤ宣言：
<style type="text/css">
.class8 {writing-mode:tb-rl;}
<style>
ＢＯＤＹ宣言：
<p class="class8">文字を縦書きにしました。</p>
実行結果：
文字を縦書きにしました。
