TOP ＞ スタイルシートで文字をデザイン ＞ 行のそろえ方を指定する方法
行のそろえ方を指定する方法
Webページを作っていて、タイトルや見出しなどの特殊なセンテンスは、中央そろえにしたい場合もあります。また、 場合によっては右寄せにしたいこともあるでしょう。
スペース文字などを使って文字位置を変えようとすると、ユーザーのPC環境やブラウザ幅によって、 中央そろえにうまくならないことがあります。
HTMLのタグにも、行のそろえ方を指定するタグがあります。<center>タグで中央そろえにできますし、 <div>や<span>タグで『align』プロパティを指定することで、中央そろえ、右寄せ、 左寄せを指定することが出来ます。
スタイルシートで行のそろえ方を制御するには、『text-align』 プロパティを使います。指定する値は、以下の表のようになります。
| 指定できる値 | 行のそろえ方 |
| left | 左寄せ |
| center | 中央そろえ |
| right | 右寄せ |
| justify | 均等割付 |
このうちjustifyは『text-justify』プロパティを組み合わせて使用します。 現在対応しているブラウザはWindows版のInternet Explorerだけです。
行のそろえ方を指定する方法
【書き方】
text-align : そろえ方の値;
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .c1{text-align:left; background-color: #99ff99;} .c2{text-align:center; background-color: #ff99ff;} .c3{text-align:right; background-color: #9999cc;} .c4{text-align:justify; background-color: #ffff99;} 【HTML本文】 <html> <head> <title>行のそろえ方を指定する方法のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/217.css" type="text/css"> </head> <body bgcolor="silver"> <p>行をスタイルシートのtext-alignプロパティを使ってそろえます。</p> <p class="c1">まずは左寄せです。</p> <p class="c2">続いて中央そろえです。</p> <p class="c3">右寄せはこんな風になります。</p> <p class="c4">justifyを指定するだけでは均等割付になりません。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
