CSS text-alignの使い方 文字の行揃えをする方法

CSS

【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法

2021年3月19日

今回はtext-alignプロパティの使って文字(テキスト)を左揃え・中央揃え・右寄せ揃えにしたりする方法を解説していきます。

CSSを勉強し始めたばかりの頃だと「text-alignプロパティが上手く効かない…。」といった方も多いので、本記事を参考にしてみてください。
 


 

text-alignは行揃えのスタイルCSS

text-align(テキストアライン)プロパティは、指定した要素の中にあるテキストや画像などの水平方向の配置を指定することができるプロパティです。

text-alignを指定するとWordやExcelにある行揃えと同じような形でテキストを左・中央・右寄せと自由に配置することができます。

text-alignプロパティでできることの例。

 

text-alignプロパティの使い方・値一覧

text-alignプロパティを使ってテキストの配置を変更してあげたい場合は、対象となる要素に対してtext-alignプロパティを指定し、値には以下のいずれかの値を指定してあげればOKです。

単位 備考
left(初期値) 中にあるテキストや画像などの要素を左寄せにします。
(例)text-align:left
center  中にあるテキストや画像などの要素を中央寄せにします。
(例)text-align:center
right 中にあるテキストや画像などの要素を右寄せにします。
(例)text-align:right
justify 中にあるテキストや画像などの要素を、各行の両端を揃えていっぱいにテキストを配置(均等割付)します。(※ただし最終行は均等割付になりません。)
(例)text-align:justify

 

左揃えtext-align:left(初期値)

「text-align: left;」を指定すると、指定した要素の中にある文字や画像を左寄せにすることができます(なおleftは初期値のため指定しなくても通常は左揃えです)。

text-align: left;を使用した例。

 

中央揃えtext-align:center

「text-align: center;」を指定すると、指定した要素の中にある文字や画像を中央寄せにすることができます。

text-align: center;を使用した例。
 

右揃えtext-align:right

「text-align: right;」を指定すると、指定した要素の中にある文字や画像を右寄せにすることができます。

text-align: right;を使用した例。
 

均等割付text-align:justify

「text-align: justify;」を使用すると、指定した要素の中にある文字や画像を各行の両端を揃えて親要素の幅いっぱいにテキストを配置(均等割付)することができます。(※ただし最終行は除く。)

text-align: justify;を使用したものと指定していないものの比較。

 

text-align: justify;を使用した例。
 

text-alignの指定に関する注意点

text-alignプロパティを使用する際は、以下の2つの点に気を付けてあげないと「指定が上手く効かない」といったことになる/span>ので、注意が必要です。

■text-alignプロパティを使用する上で気を付けるべき2つのポイント

  • text-alignは、ブロックレベル要素に対して指定する必要がある(インライン要素に指定しても効かない)
  • text-alignでは、対象要素そのもの(ブロックレベル要素自体)の寄せ指定はできない
「ブロックレベル要素やインライン要素が何か分からない」という方は別記事の方で解説しておりますので、こちらも併せてご覧頂けますと幸いです。(関連記事)インライン要素・ブロックレベル要素とCSS「display」の使い方

 

text-alignはブロックレベル要素に対して指定する必要がある

1つ目のポイントは、text-alignプロパティははブロックレベル要素に対して指定する必要がある(インライン要素に指定しても指定が効かない)という点です。

下記は、ブロックレベル要素(p)に対してtext-alignを指定することで要素の中にあるテキストを右寄せにしています。

text-align: right;を使用した例。

一方、同じテキストでもaタグやspanタグといったインライン要素で囲われたテキストの場合はtext-alignプロパティの指定をしても指定が効きません。

 

インライン要素にtext-alignプロパティを直接していた場合、指定が効かない。
 

こういった場合は、「インライン要素をブロックレベル要素で囲い、ブロックレベル要素に対してtext-alignプロパティを指定する」か、「displayプロパティを指定してインライン要素をブロックレベル要素に変更」してあげる必要があります。
 

■(参考)インライン要素をブロックレベル要素で囲い、その要素に対してtext-alignプロパティを指定している例

インライン要素を中央寄せにする方法。
 

text-alignを指定したブロックレベル要素自体の寄せ指定はできない

2つ目のポイントは、text-alignを指定したブロックレベル要素自体の寄せ指定はできないという点です。

たとえば、幅(width)を設定したdivなどのブロックレベル要素を中央にしたい場合はdivタグにtext-alignを指定するのではなく、margin-left;auto;margin-right:auto;など余白の調整で真ん中に寄せる必要があります。

marginはブロックレベル要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えします。
 

■表示例


 

■上記のソースコード

 
text-align:centerはあくまで指定したブロックレベル要素の中にある文字や画像などの中身を中央揃えにするのであって、ブロックレベル要素自身の要素を真ん中寄せにするのではない点に気をつけましょう。
 
 
(関連記事)インライン要素・ブロックレベル要素とCSS「display」の使い方
HTML ブロックレベル要素とインライン要素の違いと特徴

 
 

 

まとめ・要素の水平方向の配置を指定できるtext-alignプロパティ!

まとめです。今回はtext-alignプロパティの使って文字(テキスト)を左揃え・中央揃え・右寄せ揃えにしたりする方法を解説しました。

text-alignを指定するとWordやExcelにある行揃えと同じような形でテキストを左・中央・右寄せと自由に配置することができます。

text-alignプロパティでできることの例。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS