サイト運営では、状況によってHTMLに記述したテキストをセンター寄せにしたいことがあります。そこで使用するのがCSSのtext-alignプロパティです。
テキストをセンターにするだけでなく、左寄せや右寄せにも表示できて便利です。この機会にぜひ、text-alignプロパティの使い方を理解しましょう。
目次
HTMLテキストをセンター寄せする方法
HTMLテキストを、センター寄せにするには、CSSのtext-alignプロパティを使用します。text-alignプロパティを使用することで、センター寄せにするだけでなく、左寄せや右寄せにすることもできます。
text-alignプロパティの使い方は次の通りです。
|
1 |
text-align: "値"; |
それでは、実際に値を設定して動作を確認していきましょう。
センター寄せにする
HTMLのテキストを、センター寄せにするには、CSSのtext-alignプロパティの値に「center」を設定します。
|
1 |
text-align: center; |
実際に、センター寄せに表示した結果をみてみましょう。
See the Pen
OJXoGxE by sho-go (@sho-go)
on CodePen.
センター寄せは、見出しなどで使われることが多いですね。
左寄せにする
HTMLのテキストをセンター寄せにするには、CSSのtext-alignプロパティの値に「left」を設定します。
|
1 |
text-align: left; |
実際に、左寄せに表示した結果をみてみましょう。
See the Pen
jOrvRGJ by sho-go (@sho-go)
on CodePen.
左寄せは、最も使う頻度が多いでしょう。デフォルトに設定されている場合が多いので、わざわざ設定しない人も多いです。
右寄せにする
HTMLのテキストを、センター寄せにするには、CSSのtext-alignプロパティの値に「right」を設定します。
|
1 |
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に移行しましょう。
