XHTML/CSS・トップ | CSSプロパティ・目次

●行揃えを指定する

 text-align はブロック要素内での行揃えを指定するプロパティです。値には left(左揃え)、center(中央揃え)、right(右揃え)、justify(両端揃え)があります。注意する点としては、ブロック要素内のテキストに対しての行揃えをするプロパティであって、ブロック要素(ブロックレベル要素とも言う)そのものを位置揃えするものではないことです。例えば、table(テーブル)はブロック要素ですが、表そのものをポジション決めするためには使えません。その中に含まれる th(見出しセル)、td(データセル)は text-alignプロパティを使うことにより、セル内のテキストを行揃えとして使うことはできます。下は見出しに行揃えを指定した例です。


【CSS】

h3 {
 text-align: center
}
h4 {
 text-align: right
}

※↑h3の内容領域を中央揃えに、h4の内容領域を右揃えにそれぞれ指定しています。


 HTMLファイルにおいて、<p align="right">文字列</p>と align属性を使い、行揃えをすることは推奨されません。行揃えはスタイルシートのほうで指定することをおすすめします。(当サイトもどこかで使っているかも知れませんが)

 使うときはクラス名の入ったセレクタを利用すると便利でしょう。それも特定の要素に対して指定する方法よりもすべての要素に適用させられる「ドット + クラス名」の形のほうが実用的だと思います。以下に具体的な例を上げます。(クラス名とID名の使い方は別項参照)


【CSS】

.sample1 {
 text-align: left;
}
.sample2 {
 text-align: center;
}
.sample3 {
 text-align: right;
}

【解説】↓

 CSSファイル内の記載する場所に決まりはありませんが、作者がわかりやすい位置に記載すると良いでしょう。また、sample1〜sample3は本来、作者が任意の名前を付けます。使える文字は半角英数字とハイフン( - )、アンダーバー( _ )などです。ハイフンとアンダーバーはクラス名の最初と最後に使用できないのはほかのファイル名のときと同じです。


【HTML】

<h2 class="sample1">見出しレベル2の内容領域が中央揃えです。</h2>

<h4 class="sample2">見出しレベル4の内容領域が中央揃えです。</h4>

<p class="sample3">段落の文字列が右揃えになります。</p>


【補足】↓

 適用させたい要素名に対して、class="クラス名"を追加することにより、テキストの行揃えが指定できました。

XHTML/CSS・目次 | テキスト・目次

Copyright (C) 2004-2007 http://www.xml.vc/