1.水平方向の位置を設定する
text-align : キーワード;
＜キーワード＞
left : 左寄せ
right : 右寄せ
center : 中央寄せ
justify : 均等割り付け
＊justifyはtext-justifyと併用しないと効果がありません。
（例）
<div style="text-align:left;">左寄せです</div>
<div style="text-align:center;">中央寄せです</div>
<div style="text-align:right;">右寄せです</div>
（結果）
左寄せです
中央寄せです
右寄せです
2．垂直方向の位置を設定する
vertical-align : キーワード;
＜キーワード＞
baseline : 標準の文字位置（デフォルト）
super : 上付き
sub : 下付き
top : 上詰め
middle : 中詰め
bottom : 下詰め
(例1)
これは<span style="vertical-align:baseline;">標準（ベースライン）</span>です。
これは<span style="vertical-align:super;">上付き</span>です。
これは<span style="vertical-align:sub;">下付き</span>です。
(結果1）
これは標準（ベースライン）です。
これは上付きです。
これは下付きです。
(例2)
<TABLE border="1" width="400" height="100">
<TBODY>
<TR>
<TD style="vertical-align: top;">上詰めです</TD>
<TD style="vertical-align: middle;">中詰めです</TD>
<TD style="vertical-align: bottom;">下詰めです</TD>
</TR>
</TBODY>
</TABLE>
(結果2）
| 上詰めです | 中詰めです | 下詰めです |
3．文字を装飾する
text-decoration : キーワード;
＜キーワード＞
none : 装飾されません（デフォルト）。リンク文字の下線を消す事が出来ます。
underline : 文字に下線を引きます。
overline : 文字に上線を引きます。
line-through : 文字に取消線を引きます。
blink : 文字を点滅させます（InternetExpｌorerでは点滅しません）
○半角スペースで区切る事で複数設定出来ます。
○キーワードにnoneを設定すると装飾されません。（リンク文字の下線を消す時に有効）
(例)
<div style="text-decoration : underline overline;">文字に下線と上線を引きます</div>
<div style="text-decoration :line-through;">文字に取消線を引きます</div>
<a href="http://oogatak.ninja-x.jp/" style="text-decoration:none>HTML講座へ</a>
（結果）
文字に下線と上線を引きます
文字に取消線を引きます
初心者による初心者のためのHTML講座へ
4．文字を均等割り付けする
text-justify : キーワード;
＜キーワード＞
auto : 通常表示（デフォルト）
distribute-all-lines : 均等割り付けします。
＊text-justifyはtext-align:justifyと併用しないと効果がありません。
（例）
<h5 style="text-align: justify;" style="text-justify: distribute-all-lines;">均等割付です</h5>
（結果）
均等割付です
5．文字の間隔を設定する
letter-spacing : キーワード 又は 数値指定;
＜キーワード＞
normal（デフォルト）しかありません。
＜数値指定＞
文字と文字の間隔を数値で指定し、単位を付けます。
マイナス値を指定すると文字間が詰まります。
(例)
<div style="letter-spacing:15px;">文字の間隔を１５ピクセルに設定</div>
（結果）
文字の間隔を１５ピクセルに設定
text-indent : 数値指定 又は %指定;
＜数値指定＞
１つ上位（親要素）のボックス領域の左端からの位置を単位付の数値で指定
＜%指定＞
１つ上位（親要素）のボックス領域の割合で指定
（例）
<div style="text-indent : 40px;">インデントを４０ピクセルに 設定しました</div>
<div style="text-indent : 40%;">インデントを４０％に 設定しました</div>
（結果）
インデントを４０ピクセルに 設定しました
インデントを４０％に 設定しました
7．大文字、小文字を揃えたい
test-transform : キーワード;
＜キーワード＞
none : 入力されたままの表示（デフォルト）
capitalize : 各単語の先頭文字のみ大文字表示
uppercase : 全ての文字を大文字表示
lowercase : 全ての文字を小文字表示
(例)
<div style="text-transform:none;">AbCdEf(そのまま)</div>
<div style="text-transform:capitalize;">ghijkl（先頭を大文字に)</div>
<div style="text-transform:uppercase;">MnOpQr（大文字に)</div>
<div style="text-transform:lowercase;">sTuVwXyZ（小文字に)</div>
（結果）
AbCdEf(そのまま)
ghijkl（先頭を大文字に)
MnOpQr（大文字に)
sTuVwXyZ（小文字に)
8．スモールキャップ文字を使う
font-variant: キーワード;
＜キーワード＞
small-caps:スモールキャップ文字に置換
normal:標準状態で表示（デフォルト）
○スモールキャップとは、小文字も大文字に変換され、なおかつ大文字より文字のサイズが小さく表示されます。
（例）
<div style="font-variant:small-caps;">これがsmall-capsです。</div>
（結果）
これがsmall-capsです。
9．折り返しを禁止する
white-space : キーワード;
＜キーワード＞
normal : 自動で改行されます（デフォルト）。
nowrap :自動的な折り返しを禁止することができます。
(例)
<TABLE border="1">
<TBODY>
<TR>
<TD width="200"><div style="white-space:normal;">キーワードがnormal : 自動で改行されます</div></TD>
<TD width="200"><div style="white-space:nowrap;">キーワードがnowrap : 折り返しを禁止する</div></TD>
</TR>
</TBODY>
</TABLE>
（結果）
キーワードがnormal : 自動で改行されます |
キーワードがnowrap : 折り返しを禁止する |
10．縦書きにする
writing-mode:キーワード;
＜キーワード＞
tb-rl ：文章を縦書きに指定する。
lr-tb：文章を横書きに指定する。
(例)
<div style="writing-mode:tb-rl;">
文章を縦書きにする
文章を縦書きにする
文章を縦書きにする
</div>
（結果）
文章を縦書きにする
文章を縦書きにする
文章を縦書きにする
11．下線位置を指定する。
text-underline-position : キーワード ;
この属性はtext-decoration : underlineを設定していないと効果がありません。
＜キーワード＞
above：下線をテキストの上に表示(縦書きの場合は右線)
below：下線をテキストの下に表示(縦書きの場合は左線)
(例１)
<div style="writing-mode:tb-rl; text-decoration: underline;" text-underline-position:below;">
文章を縦書きにする
文章を縦書きにする
文章を縦書きにする</div>
(例２)
<div style="writing-mode:tb-rl; text-decoration: underline; text-underline-position:below;">
文章を縦書きにする
文章を縦書きにする
文章を縦書きにする</div>
（結果１）
文章を縦書きにする
文章を縦書きにする
文章を縦書きにする
（結果２）
文章を縦書きにする 文章を縦書きにする 文章を縦書きにする
12．文字の流れる方向を指定する。
direction:キーワード;
＜キーワード＞
ltr：文章を左から表示していく。
rtl：文章を右から表示していく。
unicode-bidi:キーワード;
＜キーワード＞
embed：ユニコードに準じて文字方向を制御する。
bidi-override：direction属性で文字方向を制御する。
(例)
<div style="direction:rtl; unicode-bidi:embed;">文字の流れる方向を指定</div>
<div style="direction:ltr; unicode-bidi:embed;">文字の流れる方向を指定</div>
<div style="direction:rtl; unicode-bidi:bidi-override;">文字の流れる方向を指定</div>
<div style="direction:ltr; unicode-bidi:bidi-override;">文字の流れる方向を指定</div>
（結果）
文字の流れる方向を指定
文字の流れる方向を指定
文字の流れる方向を指定
文字の流れる方向を指定
13．ルビの配置を指定する。
ruby-align:キーワード;
＜キーワード＞
auto： ルビを自動で指定してくれます。
left：ルビを左に指定します。
center：ルビを真ん中に指定します。
right：ルビを右に指定します。
distribute-letter： ルビを均等に指定します。
distribute-space：ルビ前後に余白を入れて均等に指定します。
l ine-edge： 前後のテキストの状態によって指定します。
(例１)
<ruby style="ruby-align:left;"> <rb>HTML</rb><rt>HyperText Markupt Language</rt></ruby>＆ <ruby style="ruby-align:left;"> <rb>CSS</rb><rt>Cascading Style Sheet</rt> </ruby><BR>(例２)
<ruby style="ruby-align:distribute-letter;">
<rb>HTML</rb><rt>HyperText Markupt Language</rt></ruby>＆
<ruby style="ruby-align:distribute-letter;">
<rb>CSS</rb><rt>Cascading Style Sheet</rt>
</ruby>
（結果１）
（結果２）