テキスト
文字の色や位置などを指定する属性▼文字の色を指定(color)
・文字の色を指定する属性 (ブラウザ依存/すべて/する)・色の設定についてくわしくは「基本編」をご覧ください
「color:@@;」
#RGB、rgb()、キーワード、いずれの指定でも可
ex:
緑色になります
<span style="color:#00ff00;">緑色になります</span>
▼文字の水平位置を指定(text-align)
・ 文字の水平位置(左右の関係)を指定する属性 (ブラウザ依存/ボックス/する)「text-align:@@;」
left 文字を左に寄せる
right 文字を右に寄せる
center 文字を中心に寄せる
justify 均等割符(次項参照)
ex:
文字を右寄せにしました
<div style="text-align:right;">文字を右寄せにしました</div>
▼均等割符を行う(text-justify)
・ 文字を均等割符にする属性(auto/ボックス/しない)・前項の「text-align:justify;」とセットでないと使えません
・IE5.0の独自拡張なのでそれ以下やNNでは使えません
「text-align:justify; text-justify:@@;」
distribute-all-lines 均等割符を行う
auto 初期値
ex:
均等割符になりました
<div style="text-align:justify; text-justify:distribute-all-lines;">均等割符になりました</div>
▼文字を飾る(text-decoration)
・ 文字の装飾を指定する属性(none/すべて/しない)「text-decoration:@@;」
underline 下線を引く
overline 上線を引く (IEのみ)
line-through 取消線を引く
blink 点滅させる (NNのみ)
none 初期値
ex:
下線を引きます <span style="text-decoration:underline;">下線を引きます</span>
上線を引きます <span style="text-decoration:overline;">上線を引きます</span>
取消線を引きます <span style="text-decoration:line-through;">取消線を引きます</span>
点滅させます <span style="text-decoration:blink;">点滅させます</span>
▼段落にインデントをつける(text-indent)
・テキストのインデント(文の段落の開始位置)を決める属性 (0/ボックス/する)・日本語や英文で段落の最初は１文字分あけたりしますが、それも設定できます
「text-indent:@@;」
任意の数値と単位 上位のボックスの左端からの位置を数値で指定
%による指定 上位のボックスに対する割合
ex:
左から30ptインデントしました
<div style="text-indent:30pt;">左から30ptインデントしました</div>
▼文字の水平位置を指定(vertical-align)
・文字の水平位置を指定する属性 (baseline/インライン/しない)・インライン要素に対しての設定とセル（テーブル）内の上下位置に対しての設定の2種類があります
・セル内の「baseline」は、普通はセル内では文字間の垂直位置の基準は中央ですが、
文字のテキストをそろえる基準を下のラインにするという意味です
フォントサイズが違う場合などにきれいにそろえたいときに有効です
・NNでは「sub」「super」とセル内での「baseline」には対応していません
「vertical-align:@@;」
インライン要素に対しての設定
sub 下付き文字
super 上付き文字
baseline 通常の文字位置
セル内の上下位置に対しての設定
top 上詰め
bottom 下詰め
middle 中央揃え
baseline テキストの下のラインをそろえる
ex:
上付き文字です <span style="vertical-align:super;">上付き文字</span>
下付き文字です <span style="vertical-align:sub;">下付き文字</span>
▼大文字・小文字をコントロールする(text-transform)
・英文の大文字・小文字をコントロールする属性 (none/すべて/する)・英文のタイトルや見出しなどで、大文字・小文字を任意に指定できます
通常はソース通りに（小文字で書けば小文字に）表示されますが、それを変えることができるのです
・NNでは対応していません
「text-transform:@@;」
capitalize 一文字目を大文字にする
uppercase すべてを大文字にする
lowercase すべてを小文字にする
none ソース通りに。親要素を継承したくないときに使う
ex:
title 一文字目を大文字に <span style="text-transform:capitalize;">title</span>
title すべてを大文字に <span style="text-transform:uppercase;">title</span>
▼文字間隔を設定する(letter-spacing)
・文字と文字との間隔を設定する属性 (normal/すべて/する)・NNでは対応していません
「letter-spacing:@@;」
任意の数値と単位 任意の文字間隔を数値で指定。マイナス（-）をつけると文字が重なる
normal 通常の文字間隔。親要素から効果を継承したくないときなどに使用
ex:
文字間隔を広げました <span style="letter-spacing:2pt;">文字間隔を広げました</span>
文字間隔を狭めました <span style="letter-spacing:-3pt;">文字間隔を狭めました</span>
▼空白の扱いを設定する(white-space)
・空白の扱いを設定する属性 (normal/ボックス/する)・IEは対応していません。NNのみです
・簡単にいえば、「pre」タグと同じ効果があります
「white-space:@@;」
pre
連続した複数のスペースやタブ、改行などをソースのまま表示
「pre」タグと同じ効果があります
normal
連続した複数のスペースやタブ、改行などは一つの半角スペースとして扱われる
通常のHTMLと同じです
ex:
空白や タブをそのまま 表示できます
<div style="white-space:pre;"> 空白や タブをそのまま 表示できます</div>[ → BACK ]