【CSS】text-align - インライン要素の水平方向位置

CSSのtext-alignプロパティについてご紹介します。

text-align

text-alignはインライン要素やテキストの水平方向位置のプロパティです。

基本構文

text-align: 値;

値

一般的な値は次の通りです。

値	意味
start	書字方向に寄せる（左ならleft、右ならrightと同じ）
end	書字方向の逆に寄せる（左ならright、右ならleftと同じ）
left	左寄せ
right	右寄せ
center	中央寄せ
justify	両端揃え

サンプル

書字方向に寄せる

次のサンプルはテキストを書字方向に寄せます。

サンプル

<style>
p {
    text-align: start;
}
.p1 {
    direction: ltr;
}
.p2 {
    direction: rtl;
}
</style>

<p class="p1">text text text text text</p>
<p class="p2">text text text text text</p>

プレビュー

書字方向の逆に寄せる

次のサンプルはテキストを書字方向の逆に寄せます。

サンプル

<style>
p {
    text-align: end;
}
.p1 {
    direction: ltr;
}
.p2 {
    direction: rtl;
}
</style>

<p class="p1">text text text text text</p>
<p class="p2">text text text text text</p>

プレビュー

左寄せ

次のサンプルはテキストを左に寄せます。

サンプル

<style>
p {
    text-align: left;
}
</style>

<p>text text text text text</p>

プレビュー

右寄せ

次のサンプルはテキストを右に寄せます。

サンプル

<style>
p {
    text-align: right;
}
</style>

<p>text text text text text</p>

プレビュー

中央寄せ

次のサンプルはテキストを中央に寄せます。

サンプル

<style>
p {
    text-align: center;
}
</style>

<p>text text text text text</p>

プレビュー

両端揃え

次のサンプルはテキストの両端を揃えます。

サンプル

<style>
p {
    text-align: justify;
}
</style>

<p>プログラミング（Programming）は、コンピュータに対して特定のタスクや機能を実行させるための手順や命令を記述するプロセスです。これは、コンピュータが理解し実行できる形式で記述されたソフトウェアの基本的な構築手法です。</p>

プレビュー