Title

text alignとは

text align とは次の二つの語句からなるCSSのプロパティです。

text

読み: テキスト
意味: 文字、文章

align

読み: アライン
意味: 一直線、整列させる

目次に戻る

text-alignプロパティの概要

このプロパティはブロックレベル要素や表のセル要素内のコンテンツの水平方向の配置を設定します。

ブロックレベル要素とは、「見出し要素」、「段落要素」、「表要素」、「コンテナー要素」などの、ページの骨格を形成するための要素で、 コンテンツをまとめる括りとして使用される要素です。この要素は一つのブロックとして認識されるので、このような呼び方をします。 ブラウザの表示でも一つのブロックとして扱われ、一般的なブラウザでは前後に改行が入ります。

なお、インライン要素とセル要素にのみに使用できるプロパティですが、コンテンツの水直位置の設定をするには vertical-alignというプロパティがあります。

目次に戻る

実機サンプルとサンプルコード

このプロパティは、ブロックコンテナー要素のテキストの水平位置を調整する為に使われるので、 div要素を使って説明していきます。

構文

セレクター{text-align: 設定値;}

初期値: start

初期値の基本はstartですが、startをサポートしないブラウザでは、文章の方向がltrならleft、rtlならrightとして動作します。 ltr、rtlはdir属性で調整します。

div{text-align: start;}

目次に戻る

キーワード値で水平位置を設定する

このプロパティで使われるキワード値は、初期値のstartを含めて次の通りです。

テキストを後方寄せにする: end

文章の方向がltrならright、rtlならleftとして動作します。 ltr、rtlはdir属性で調整します。 ブラウザによっては、このキーワードは使えない場合があります。

div{text-align: end;}

目次に戻る

テキストを左寄せにする: left

left値は、内包するコンテンツを左寄せで表示します。

div{text-align: left;}

目次に戻る

テキストを右寄せにする: right

right値は、内包するコンテンツを右寄せで表示します。

div{text-align: right;}

目次に戻る

テキストを中央寄せにする: center

center値は、内包するコンテンツを中央寄せで表示します。

div{text-align: center;}

目次に戻る

テキストを両端揃えする: justify

justify値は、内包するコンテンツを両端揃えで表示します。 テキストは最終の行を除いて、左右の端が内包するコンテンツの左右それぞれの端に語感が開きます。

div{text-align: justify;}

目次に戻る

グローバル値

text-alignプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のstartに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

div{text-align: グローバル値;}

目次に戻る

補足説明

• ブロックコンテナー要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

text-align: start;

text-align: end;

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

目次に戻る