ホーム＞コース別ガイド一覧＞見出しや段落などのテキストを配置しよう！
見出しや段落などのテキストを配置しよう！（text-align プロパティ） |
   |
使用プロパティ セレクタ { text-align: 配置位置; }
CSS一覧プロパティ辞典 … text-align プロパティ
text-align プロパティを使うと、要素内で、テキストの横方向の配置を指定できます。値にはleft（左揃え）、right（右揃え）、center（中央揃え）、justify（両端揃え）を指定できます。
justifyはあまり使えない！
justify で文字を両端揃えにできますが、半角空白で区切られている英語などの文字だけです。日本語に指定しても効果がありません。
ブロック要素のみを揃えよう！
text-align プロパティので揃えられるのはブロック要素の中のテキストのみです。表などのブロック要素全体を右や中央に揃えることはできません。表などの、ブロック要素全体を揃えたい場合はmargin プロパティを使います。なお、表のセルの内容は text-align プロパティで横方向の配置ができます。
使用例
text-align プロパティの center を使用し、h1 要素と p 要素を中央に配置してみましょう！
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
h1 {
text-align: center;
}
span{ font-weight: bold; }
p {
text-align: center;
line-height: 1.7em;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>
|
|
使用例の表示
[text-alignプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[text-alignプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
h1 要素、p 要素が中央揃えになりましたね！CSSの書式が分かっていればそれほど難しくないでしょう。
