HTMLのテキストをセンター寄せにする text-align について解説!

サイト運営では、状況によってHTMLに記述したテキストをセンター寄せにしたいことがあります。そこで使用するのがCSSのtext-alignプロパティです。

テキストをセンターにするだけでなく、左寄せや右寄せにも表示できて便利です。この機会にぜひ、text-alignプロパティの使い方を理解しましょう。

HTMLテキストをセンター寄せする方法

HTMLテキストを、センター寄せにするには、CSSのtext-alignプロパティを使用します。text-alignプロパティを使用することで、センター寄せにするだけでなく、左寄せや右寄せにすることもできます。

text-alignプロパティの使い方は次の通りです。

それでは、実際に値を設定して動作を確認していきましょう。

センター寄せにする

HTMLのテキストを、センター寄せにするには、CSSのtext-alignプロパティの値に「center」を設定します。

実際に、センター寄せに表示した結果をみてみましょう。

See the Pen
OJXoGxE
by sho-go (@sho-go)
on CodePen.

センター寄せは、見出しなどで使われることが多いですね。

左寄せにする

HTMLのテキストをセンター寄せにするには、CSSのtext-alignプロパティの値に「left」を設定します。

実際に、左寄せに表示した結果をみてみましょう。

See the Pen
jOrvRGJ
by sho-go (@sho-go)
on CodePen.

左寄せは、最も使う頻度が多いでしょう。デフォルトに設定されている場合が多いので、わざわざ設定しない人も多いです。

右寄せにする

HTMLのテキストを、センター寄せにするには、CSSのtext-alignプロパティの値に「right」を設定します。

実際に、右寄せに表示した結果をみてみましょう。

See the Pen
ExyeJbK
by sho-go (@sho-go)
on CodePen.

右寄せは、あまり使う機会がないかもしれません。しかし、使い方自体は簡単なので、存在を知っておくだけでいざというときに使えますね。

centerタグは廃止

HTMLテキストをセンター寄せにしたい場合、以前であれば、HTMLのセンター寄せ要素であるcenterタグを使用するのが一般的でした。

しかし、centerタグはHTML5で廃止されたタグなので、使用するのはやめましょう。

【状況別】HTMLテキストをセンター寄せする方法

CSSの text-align プロパティでHTMLのテキストをセンター寄せにしても、想定していた動作をしない場合があります。

 

そこで、text-alignプロパティで上手くセンター寄せできない場合の対処方法を、状況別に紹介していきます。

リストをセンター寄せにする

ulタグやolタグを使って、リストをセンター寄せにしても、次のように表示されてしまいます。

See the Pen
JjKaVOb
by sho-go (@sho-go)
on CodePen.

これは、ulタグやolタグ、liタグが固定表示されているためです。
リスト全体をセンター寄せで表示したいのであれば、CSSのmarginプロパティを使用します。

See the Pen
LYZJvOW
by sho-go (@sho-go)
on CodePen.


marginプロパティは、マージン(余白)を設定できます。各リストの開始位置を無視して、センター寄せにすることはできませんが、各リストの開始位置の前に、余白をつけることができます。

なお、widthプロパティの値は、サイトやリストの長さに合わせて設定してください。

表をセンター寄せにする

tableタグで表を使う場合、表内のテキストは、text-alignプロパティでセンター寄せに表示することができます。

See the Pen
YzWOMEr
by sho-go (@sho-go)
on CodePen.

しかし、表ごとセンター寄せで表示したい場合もあります。その場合は、リストのセンター寄せ同様、marginプロパティでマージン(余白)を設定して、センターに表示することができます。

See the Pen
GRqXLOx
by sho-go (@sho-go)
on CodePen.

表のセンター寄せは、見やすくなる場合が多いのでよく使われますね。サイトのレイアウト構成と相談して、ユーザーに伝わりやすい配置に変更してもよいでしょう。

まとめ

CSSのtext-alignプロパティを使えば、HTMLのテキストを簡単にセンター寄せ表示することができます。もちろん、左寄せや右寄せも簡単にできます。

なお、以前使われていたcenterタグは今は非推奨タグなので、まだ使っているのであれば、これを機にtext-alignに移行しましょう。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?