【HTML・CSS】テキストの表示位置を左・中央・右に移動する

2025.01.29

107

Views

HTMLのテキストの文字の表示位置を変更する方法として、CSSのtext-alignプロパティを指定することで表示位置を変えられます。

この記事では初心者向けに

について解説をしていきます。

HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！

テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「left」を指定することで変更出来ます。

以下は、「pタグのテキストの文字を左にする」例です。

HTML

<p>このテキストを左に表示したい</p>

CSS

p{
 text-align:left;
}

一方テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「right」を指定することで変更出来ます。

以下は、「pタグのテキストの文字を右にする」例です。

HTML

<p>このテキストを右に表示したい</p>

CSS

p{
 text-align:right;
}

続いて、テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「center」を指定することで変更出来ます。

以下は、「pタグのテキストの文字を中央にする」例です。

HTML

<p>このテキストを中央に表示したい</p>

CSS

p{
 text-align:center;
}

以上となります。

HPBUILD