text-alignプロパティ。

CSSで、行揃えを指定するtext-alignプロパティに関する解説です。

text-alignプロパティ・目次。

text-alignプロパティとは。

text-alignプロパティは、行揃えを指定するプロパティです。

仕様としては、text-alignプロパティはあくまでも内容となるテキスト(インライン要素)のみを対象としているので、内容となるブロックレヴェル要素の配置には影響を与えません。

text-alignプロパティの扱い。

継承の有無
text-alignプロパティは、上位要素から継承されます。
対象セレクタ
ブロックレヴェル要素に限られます。
対象メディア
視覚系のメディア全てが対象となります。

text-alignプロパティの書式。

text-alignプロパティの書式は、以下のようになります。

text-align: 値

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
left
左に揃えます。
right
右に揃えます。
center
中央に揃えます(センタリング)。
justify
左右両端に揃えます。但し、この値を実装しない場合、或いは実現出来ない場合(letter-spacingプロパティに値を指定している場合など)に、言語の書字方向に従って右か左に揃えても構わない事になっております。
文字列

表(テーブル)内の要素に限り、行揃えの基準となる文字列を指定出来ます。例えば

th, td {
    text-align: ".";
    }

とした場合、コマ内の「.」(小数点)が一列に揃うように配置します。

尚、表(テーブル)内の要素以外にこの値を適用した場合は、デフォルト値、すなわち言語の書字方向に従った配置が適用されます。

尚、text-alignプロパティのデフォルト値は言語の書字方向に従います。

例えば、現代日本語など左から書く言語ではleft値がデフォルトとなります。

text-alignプロパティの記述例。

例えば、HTMLの<h1>要素において、内容を中央揃え(センタリング)したい場合は、

h1 {
    text-align: center;
    }

と記述します。

text-alignプロパティに関する注意事項。

text-alignプロパティの仕様上の注意。

text-alignプロパティは内容となるブロックレヴェル要素を行揃えしません。

HTMLでの<div>要素などのalign属性と違って、内容となるテキスト(インライン要素)のみが行揃えの対象となります。

従って、内容となるブロックレヴェル要素は行揃えの対象とならないのが正しい実装です。

しかしながら、間違った実装となっているユーザエージェントも意外に多いのが実情です。

尚、ブロックレヴェル要素の位置揃えは、当該要素の左右の余白を調整する事で実現します。

justify値はサポートしなくても構いません。

justify値はサポートしない代わりに、記述言語の書字方向に従ってデフォルトの行揃えを使う事が許されております。

text-alignプロパティの実装上の注意。

日本語文書を扱う場合の注意事項。

殆どのブラウザでは日本語文字を扱う場合にはjustify値は両端揃えにならず、左寄せとなります。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、内容となるブロックレヴェル要素も行揃えの対象となります。

また、このプロパティを使うと、表示が崩れる事もあります。

インターネットエクスプローラでの注意事項。

インターネットエクスプローラでは、以下の例外を除いて、内容となるブロックレヴェル要素も行揃えの対象となります。

WAP 2.0での注意事項。

WAP 2.0では、justify値は必須ではありません。

関連項目。

vertical-align
縦方向の行揃え
letter-spacing
各文字間の空白の幅
word-spacing
単語間の空白の幅
width
要素の横幅
margin
ボックス外の余白(マージン)
margin-left
ボックスの左余白(マージン)
margin-right
ボックスの右余白(マージン)

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com