ぱそおーるCSS講座

水平方向の位置を設定する☆
text-align : キーワード;

この属性はブロックレベル要素に対して設定します。
<h1〜h6><p><div><table>などがブロックレベル要素です。

キーワードは４種類あります。

1. left : 左寄せ
2. right : 右寄せ
3. center : 中央寄せ
4. justify : 均等割り付け

特殊なのは4のjustifyだけです。
均等割り付けする場合はtext-justifyと併用しないと効果がありません。

記述例
<div style="text-align : justify;text-justify : distribute-all-lines;">

通常の記述例
<h5 style="text-align : center;">

こんな感じです

垂直方向の位置を設定する
vertical-align : キーワード、数値指定、%指定;

この属性は、インライン要素とテーブルのセルに使われます。
画像に使用するとテキストの位置を変える事も出来ます。
数値指定、%指定も出来ますが、対応ブラウザの関係上キーワードがよく使われています。

キーワードは８種類です。

1. baseline : ベースライン（デフォルト）
2. super : 上付き
3. sup : 下付き
4. top : 上段揃え
5. middle : 中段揃え
6. bottom : 下揃え
7. text-top : テキストの上
8. text-bottom : テキストの下

記述例
<span style="vertical-align : sub;">あいうえお</span>

あいうえおかきくけこさしすせそ

<span>タグは特定の文字にスタイルを適用する時に使います。
<span>タグ自体には効果がありません。スタイルシートを使う時にのみ使用します。

記述例
<td style="vertical-align : top;">

上段揃え

中段揃え

下段揃え

記述例
<img src="sample.gif" style="vertical-align : middle;">うさぎちゃん

文字を均等割り付けする☆
text-justify : キーワード;

キーワードは２種類です。

1. auto : 通常表示（デフォルト）
2. distribute-all-line : 均等割り付けします。

均等割り付けする場合は、text-alignと併用しないと適用されません。

文字の行間を設定する☆
line-height : キーワード、数値指定、%指定、倍率指定;

%指定、倍率指定の場合はマイナスの値が設定出来ません。
キーワードはnormal（デフォルト）しかありません。

%指定は現在のフォントサイズを100%としてサイズを設定します。
倍率指定は現在のフォントサイズを1として倍率を設定します。

記述例
<div style="line-height : 70%;">

記述例
<div style="line-height : 3;">

文字の間隔を設定する
letter-spacing : キーワード、数値指定;

キーワードはnormal（デフォルト）しかありません。

記述例
<div style="letter-spacing : 15px;">

インデントを設定する
text-indent : 数値指定、%指定;

この属性はブロックレベル要素に対して設定します。

%指定の場合は親要素のボックス領域を100%としてサイズを設定します。
マイナス指定すると、左側にインデントされます。

記述例
<div style="text-indent : 20px;">

文字の装飾
text-decoration : キーワード;

半角スペースで区切る事で複数設定出来ます。
キーワードにnoneを設定すると装飾されません。（リンク文字の下線を消す時に有効）
blinkはIEでは表示出来ません（通常表示になります）

キーワードは５種類です。

1. none : 装飾されません（デフォルト）リンク文字の下線を消す事が出来る。
2. underline : 文字に下線を引きます。
3. overline : 文字に上線を引きます。
4. line-through : 文字に取消線を引きます。
5. blink : 文字を点滅させます（IEでは点滅しません）

記述例
<div style="text-decoration : underline overline;">

空白、改行を指定する
write-space : キーワード;

キーワードは３種類です。

1. normal : デフォルト設定。ソース内の空白や改行は自動で調節されます。
2. pre : ソース内の改行や空白をそのまま表示します。
3. nowrap : 連続する空白や改行を一つの半角スペースとして表示します。
   折り返しがされません。

preの詳細はこちらを参考にしてください。

nowrapは下を参考にしてください。

normal表示です。
通常はブラウザの右端に来たら自動的に改行されます。


nowrapを指定すると、上のように改行されません。
nowrapを指定していても<br>タグを使えば改行されます。

アルファベットの表示を設定する
test-transform : キーワード;

この属性を設定する事で本文のアルファベットを大文字や小文字に変更出来ます。
また、先頭文字のみ変更させる事も出来ます。

キーワードは４種類です。

1. none : 入力されたままの表示（デフォルト）
2. capitalize : 各単語の先頭文字のみ大文字表示
3. uppercase : 全ての文字を大文字表示
4. lowercase : 全ての文字を小文字表示

記述例
<div style="text-transform : capitalize;">

<div style="text-transform : uppercase;">

ワード間を設定する。
word-spacing : キーワード、数値指定;

スペースで区切られたワード（単語）間を設定します。
キーワードはnormal（デフォルト）しかありません。

記述例
<div style="word-spacing : 100px;">