文章を真ん中に寄せたり右側に寄せたり、そんな事をしたくなるときが訪れるかも知れません。
そんな時にはこのCSSを使いましょう。 body{
text-align:center;
} 　これは文字を真ん中に寄せるプロパティです。
実際にどう効果があるか見てみましょう。 真ん中に行きます！ こうすると・・・ body{
text-align:right;
} 右側に行きます！ 　何も指定しないと、左寄せになっています。
が、一応記しておきます。 body{
text-align:left;
} 左側に行きます！ 文字しか寄せる事は出来ませんが、逆に文字はこれでしか寄せる事が出来ません。
文字を寄せたい時にはこれを覚えておかないと寄せられませんね。

ここまでそんなに派手な動作の起こるCSSを扱って来なかったので、CSSなんて面白くないや。
と、思われた方もいるかも知れません。
　ここで一つ、ちょっと面白いかもしれない装飾をご紹介いたします。
body{
text-decoration:underline;
} 　text-decorationプロパティです。
これは、文字に装飾を付ける事が出来ます。
上記のコードでは、下線（アンダーライン）を付ける事が出来ます。
実際にやってみましょう。 誰かと誰かが<span id="under">真昼の決闘</span> #under{
text-decoration:underline;
color:#ff0000;
} 誰かと誰かが真昼の決闘 　解りづらかったので、文字色を赤にしてみました。

解りますね？
まずは、HTMLファイルの方に仕掛けをしておきます。
今回は一度しか使わないのでidを使いました。
そして、CSSで、id「under」に文字装飾「下線」と文字色「赤」を指定しました。
　すると、spanタグで囲んだテキストだけに下線が装飾されました。
下線しか無いのかと言うとそうではなく、色々な装飾が用意されています。 <span id="over">屋根</span>を作ってみたよ。 #over{
text-decoration:over-line;
color:#00ff00;
} 屋根を作ってみたよ。 <span id="through">チョメチョメ</span>なんですって！ #through{
text-decoration:line-through;
color:#0000ff;
} チョメチョメなんですって！ <span id="blink">点滅</span>するよ。 #blink{
text-decoration:blink;
color:#ff00ff;
} 点滅するよ。 　値をnoneで指定すると、線を消す事も出来ます。
リンクを張ったときは、必ず下線が入りますが、それが嫌ならば、
text-decoration:none;で消す事が出来ます。
最後のblinkですが、ブラウザによっては点滅しない事もあるので、
その点には気をつけてください。
　難点は、文字色と同じ色にしか出来ないと言う事です。
太さも変えられません。
そして、文字にしか装飾を付ける事は出来ません。
太さを変えたり出来る線をつけるプロパティは、次にご紹介したいと思います。

先ほどご紹介した文字装飾のプロパティ「text-decoration」では、二つの問題点がありました。
一つは文字色と同じ色になってしまう。
二つは太さを変えられない。
自由度が少ないですよね？
この枠線プロパティ「border」では、色も自由に変える事が出来ますし、幅も自由に変える事が出来ます。 body{
border:solid 3px #ff0000;
} 　borderプロパティです。何やら値がいくつか付いてますね。
これは一度にいくつもの値を指定するやり方です。
border-style,border-width,border-colorの値を一度に指定しています。 body{
border-style:solid;
border-width:3px;
border-color:#ff0000;
} と指定するのと同じ事になっています。
これを実際に指定するとどうなるかやってみる事にしましょう。 <span id="border">天国の様な</span>美味しさの果実 #border{
border-style:solid;
border-width:3px;
border-color:#ff0000;
} 天国の様な美味しさの果実 　枠が付きましたね？
borderプロパティは枠線を作るプロパティなのです。
それでは下線だけにしたい場合はどうするのでしょうか？ <span id="bottom">天国の様な</span>美味しさの果実 #bottom{
border-bottom:solid 3px #ff0000;
} 天国の様な美味しさの果実 　見事下線になりました！
bottomと言うのが下と言う意味です。
枠線の下の指定をした訳です。
topが上、rightが右、leftが左です。

先ほど少しだけ触れましたが、border-widthと言うのが線の幅を指定するプロパティです。
この値を大きくすれば枠線の幅は太くなります。
widthが幅と言う意味です。
このwidthは他にも使うので、覚えておきましょう。

　borderプロパティは、テキストだけに限らず、何にでも枠線がつけられるので、使われる事が多いと思います。

　枠線の種類は数種類ありますので、ご紹介したいと思います。 #border_mihon1{
border-top:solid 3px #ff0000;
border-right:double 3px #ff0000;
border-bottom:dashed 3px #ff0000;
border-left:dotted 3px #ff0000;
} #border_mihon2{
border-top:groove 3px #ff0000;
border-right:ridge 3px #ff0000;
border-bottom:ridge 3px #ff0000;
border-left:groove 3px #ff0000;
} #border_mihon3{
border:inset 3px #ff0000;
} #border_mihon4{
border:outset 3px #ff0000;
} <span id="border_mihon1">上が一本線、右が二本線、下が破線、左が点線</span>
<span id="border_mihon2">盛り上がった線</span>
<span id="border_mihon3">盛り下がった線</span>
<span id="border_mihon4">窪んで見える線</span>
<span id="border_mihon5">浮き上がって見える線</span> 上が一本線、右が二本線、下が破線、左が点線
盛り上がった線
盛り下がった線
窪んで見える線
浮き上がって見える線 　好きなように使われるのが良いと思います。
ただ、あまりに多用しすぎると、ページ全体が見づらくなったりするので、効果的に使いましょう。