文章の位置

ここではCSSで文章の位置を設定する方法を解説していきます。CSSプロパティtext-alignを設定して右寄せ、左寄せ、中央揃えを指定できます。

text-align

CSSプロパティtext-alignは段落内のテキストの表示位置を設定します。text-alignに入力する値には以下のようなものがあります。

CSSプロパティ	解説
text-align	段落内のテキストの表示位置

text-alignの値	解説
left	左寄せ
right	右寄せ
center	中央揃え
start	ボックスの先頭に寄せる（初期値）
end	ボックスの末尾に寄せる
match-parent	親要素の値を継承する（ただし親要素にstart,endが指定されている場合、親のdirectionプロパティの値により、leftかrightになる）

なおIEとOperaはstart,end,match-parentの値には対応していません。

HTMLコード記述例

<p class="text-right">右寄せの文章</p>
<p class="text-left">左寄せの文章</p>
<p class="text-center">中央揃いの文章</p>

外部ファイルCSS記述例

@charset "utf-8";
p.text-right { text-align: right;}
p.text-left { text-align: left;}
p.text-center { text-align: center;}

ブラウザ表示例

右寄せの文章

左寄せの文章

中央揃いの文章