今回のCSS

行の高さを揃える

改行を行った時の行間を揃えます。

褒められて伸びるタイプなんです
うーんと褒めてね！

褒められて伸びるタイプなんです
うーんと褒めてね！

褒められて伸びるタイプなんです
うーんと褒めてね！

.testClass
{
  line-height:XXpx;
  line-height:XXem;
  line-height:XX%;
}

数値の指定を行うのですが、上記ソース内の通り、
px指定、em指定、%指定の３パターンが存在しています。
基本的に表示するテキストに指定されているフォントサイズが基本となります。

各パターンとも共通するのが 前行から見て、指定分下がった位置から次行をスタートさせる事です。
なので、font-size > line-height の場合は文字が被って表示されることになります。

テキストの横位置を指定する

テキストの開始位置を指定します。
このプロパティは横位置の指定となります。
基本的に、【left】【center】【right】の３種類があれば大丈夫です。
またデフォルトはleftとなっています。

うーん…ドラム缶

うーん…ドラム缶

うーん…ドラム缶

.testClass
{
  text-align: left;
  text-align: center;
  text-align: right;
}

右寄せとかただブロック要素を組んだだけでは分かりにくいので
width:500px 等を付けて横に広げると非常に分かりやすいです。

テキストの縦位置を指定する

続いて、テキストの縦位置の指定方法です。
なんと、このプロパティを使用できるのは、【テーブルセル】【インライン要素】の２つだけなのデス
ブロック要素には使用できません。
【top】【middle】【bottom】【super】【sub】を覚えていればOKです。

.testClass
{
  vertical-align: top;    /* 上端揃え */
  vertical-align: middle; /* 中央揃え */
  vertical-align: bottom; /* 下端揃え */
  vertical-align: super;  /* 上付き文字（テーブルセルへの指定は無効） */
  vertical-align: sub;    /* 下付き文字（テーブルセルへの指定は無効） */
}

テキストの装飾を指定する

テキストの装飾についてのCSSです。
リンクテキストにもあるように、テキストに下線をつけたりすることができます。
それをこのプロパティで行うことができます。
【underline】【overline】【line-through】

.testClass
{
  text-decoration: underline;   /* 下線 */
  text-decoration: line-through; /* 打消し戦 */
  text-decoration: overline;     /* 上線 */
}

テキストのインデント位置を指定する

文章・段落の一行目のインデント位置を指定します。
pxはそのままpxでの位置まで下がります。
emは指定数=文字数分になりますので、指定文字数分下がる感覚でOKです

そんな装備で大丈夫か？
大丈夫だ。問題ない

そんな装備で大丈夫か？
一番いいのを頼む

.testClass
{
  text-indent: XXpx; /* px指定 */
  text-indent: XXem; /* em指定 */
}

テキストの文字間隔を指定する

テキストの文字間隔を変更する事ができます。
pxはそのままpxの間隔であきます
emは指定数=文字数分になりますので、指定文字数分あく事になります。

ゴメス最高や！バースの再来や！

阪神優勝待ったなし。

.testClass
{
  letter-spacing: XXpx; /* px指定 */
  letter-spacing: XXem; /* em指定 */
}