文字の左右・中央揃え【text-align】：CSS入門
CSS入門（21）
今回は、text-alignを使って、文字の行揃え（左右・中央揃え）を行います。文章を左に寄せたり、右に寄せたりする方法です。
お話は、次の順番で進みます。
中央揃え（text-align:center）を試してみる
h1大見出しを、中央揃えにしてみます。
1：前回までのお話
（01）
前回は、letter-spacingを使って、文字の間隔を調整しました。ちなみに最近は、安室奈美恵さんに夢中です。
以下、前回までのCSSコードです。
2：中央揃えにする（text-align:center）
（02）
h1大見出しを、中央揃えにしてみましょう。中央揃えは、利用度がけっこう高いので、覚えておくと便利です。
h1大見出しを、中央に配置したい場合は、例えば、次のように書きます。text（文）を、center（中央）にalign（並べる）するわけです。
h1 { text-align: center; }
ちなみに、左揃えの場合は、次のように書きます。左だから、leftです。
h1 { text-align: left; }
もちろん、右揃えの場合は、次のように書きます。右だから、rightです。
h1 { text-align: right; }
（03）
CSSコードに、追加書きしておきましょう。
（04）
ブラウザで表示してみてください。h1大見出しが中央揃えになっているはずです。
時間に余裕があれば、左右も試してみてください。
均等割付けする（text-align:justify）
実は、text-alignには、もうひとつ「justify」という指定値があります。これを使うと、文字列を均等に揃えてくれます。
ただ、日本語に関しては、各ブラウザ（バージョン）によってサポート状況が違います。うまくいくかは、分かりかねます。
（01）
均等割付け（justify）は、うまい具合にズレている文章がないと分かり難いのですが、たまたま紹介文がズレているので試してみましょう。
（02）
段落pタグに、「text-align: justify;」を追加書きします。
（03）
均等割付け（justify）されました。
しかし、これは Firefoxのような正常なブラウザで表示しているからかもしれません。
（04）
他のブラウザ（バージョン）のことも考えて、text-justifyを使っておくと良いようです。
あるいは、こんな感じ。
text-justifyについては、HTMLクイックリファレンスさんの「text-justify」を参考にさせていただきました。ありがとうございました。
次回予告
次回は、幅（width）と、高さ（height）について書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
- 文字の左右・中央揃え【text-align】（この記事です）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/05 更新日：2008/05/05
« 「文字の間隔【letter-spacing】」｜「幅と高さを決める【width、height】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/287-25c4b124
