CSS「text-align」を理解【効かない場合の対処方法】 | WEBCAMP NAVI
【10月の受講枠も残りわずか】

CSS「text-align」を理解【効かない場合の対処方法】

「text-align」(テキストアライン)を使うと文字や画像の水平方向の位置を決めることができます。

なんとなくわかっているように感じるものの、「どうして、思っている部分に効かないんだろう?」と悩んだことがある方も多くなる分野でもあります。
悩んでしまう理由は、「text-align」を指定する要素と実際に位置が決まる要素が別だからだと考えられます。

この時点で、何について話しているかわからなくても安心してください。

今回はそんな曖昧になりがちな「text-align」の使い方と、上手くいかない時に確認したいことについて解説していきます!

「中央に寄せたいけどやり方がわからない」という方もtext-alignを理解していきましょう!

水平方向の位置を決める「text-align」とは?

「text-align」をブロック要素で指定すると、そのブロック要素内のインライン要素の位置が決まります。

「そもそもブロック要素とインライン要素って何?」と思う方もいるかもしれません。
まずは、その2つの違いから確認していくことにしましょう。

HTMLでは中身をブロック要素とインライン要素の2つに分けることができます。


その違いを簡単に説明すると以下のようになります。

ブロック要素

  • 高さと幅を指定することができる
  • paddingやmarginを使って余白を作ることができる
  • 見えていなくても、要素は幅いっぱいに広がる

インライン要素

  • 高さと幅を指定することができない
  • paddingやmarginは、左右に対してだけ使うことができる
  • どんどんと横につながっていく

「要素って何?」というところから知りたい方は、以下の記事を読んでみてください。
CSSのdisplayをサンプルコードと画像で丁寧に解説

ブロック要素とインライン要素の違いがわかったところで、もう一度「text-align」の指定の仕方を確認します。

「text-align」はブロック要素に指定します。
そうすることで、その中のインライン要素の水平方向の位置を決めることができます。

この点が曖昧になりがちなので、指定する要素と位置が決まる要素が異なることを覚えておいてください。

基本のコードの書き方

ここから基本のコードの書き方を解説します。
今回は、下記のHTMLとCSSをもとにして指定をしていきます。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div class="textbox">例のテキスト</div>
</body>
</html>
example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
}

何も指定しない場合、以下の画像のようになります。

それでは、以下のtext-alignの使い方をご紹介していきます。

中央揃えにする text-align: center;

example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
  text-align: center;
}

テキスト部分を画像のような中央揃えにしたいときは上記のように指定します。
この時に気をつけて欲しいのは、ブロック要素に指定することです。

text-align: center;が上手く効かない場合は、こちらの見出しで解決策をご紹介しているので確認してみましょう。

右揃えにする text-align: right;

example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
  text-align: right;
}

画像のようにテキストを親要素の右に揃えたい場合は上記のように指定します。

左揃えにする text-align: left;

example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
  text-align: left;
}

画像のようにテキストを親要素の左端に揃えたいときは上記のように指定します。

開始揃えにする text-align: start;

example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
  text-align: start;
}

これは、初期値(何も指定しなかったとき)と同じです。

日本語の場合、基本的には、「text-align: left;」と変わらないと考えていただいて構いません。
名前の通りテキストの開始端と、実際のテキストの寄る方向が一緒になります。

終わりの位置に揃える text-align: end;

example.css
* {
  margin:0; padding:0;
}
.textbox {
  background-color: #337079;
  color: white;
  text-align: end;
}

「text-align: end;」を使うと、text-align: start;と反対側に揃うようになります。
テキストの開始端(基本的に左端)と、反対側にテキストが寄ることになります。

均等割付にする text-align: justify;

「text-align: justify;」は、テキストが親要素の幅にぴったりになるように単語の幅を調節する指定です。

文章の読みやすさが考慮されているため、最後の行には効かないようになっています。
text-align: justify;の指定有り無しで、文章の終わりが違うことがわかると思います。

<指定なし>

<指定あり>

画像の赤く囲ってある部分を見てみると、右端に揃っているものと揃っていないものを確認できます。

text-align:center;がうまくいかない時に確認したいこと

「text-align: center;」がうまくいかないときには、指定したいものが「ブロック要素内のインライン要素であるか」を確認してください。

違った場合についてもこの章で解説していきます。

「ブロック要素内のインライン要素」であるか

まず確認していただきたいのは、指定したいものが「ブロック要素内のインライン要素」であるかということです。
繰り返しにはなりますが、「text-align: center;」はブロック要素に指定をし、そのブロック要素内のインライン要素の位置を決めます。

言い換えてみると「ブロック要素内のインライン要素」以外には、text-align: center;は効きません。

中央寄せにするためには様々な指定方法あり、要素に合わせて使い分ける必要があります。
今回のtext-align: center;はブロック要素そのものには使うことができないため、次の章を参考にしてください。

中央寄せにしたいのがブロック要素だった時は?

ブロック要素自体を中央寄せにするためには、「margin: 0 auto;」を使います。
ブロック要素を中央寄せにするには2つのステップが必要です。

  1. ブロック要素の幅を指定する
  2. 左右のmarginをautoにする

実際のコードは下の通りです。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div class="textbox">例のテキスト</div>
</body>
</html>
example.css
* {
  margin:0; padding:0;
}
.textbox {
  width: 200px;
  margin: 0 auto;
  background-color: #337079;
  color: white;
  text-align: center;
}

出来上がる画面は下の通りです。

ここで説明したような水平方向の中央寄せの他にも、垂直方向や上下左右の中央寄せもできます。
詳しい手順は以下の記事でご紹介しているので、参考にしてください。

CSSで中央寄せにする方法【要素を縦横自由に中央寄せ!】

水平方向の位置を決める「text-align」まとめ

「text-align」を使うと、インライン要素の水平方向の位置を決めることができます。
これを使う上で気をつけることはこの2つです。

  • 「text-align」はブロック要素に指定をすること
  • 実際に見た目が変わるのはブロック要素の中のインライン要素であること

インライン要素の水平方向の位置を決めるためには「text-align」使うということはもちろん、
他の要素の場合には何を使えばいいのかもわかるようにしましょう。

DMM WEBCAMPでは、自宅から質問ができる全てオンラインのプログラミング学習コースがあります!
最短1ヶ月間でプログラミングスキルを身につけることができるので、興味のある方はまず無料のオンラインカウンセリングへお申し込みください!

オンラインでプログラミング学習
DMM WEBCAMPの詳細をみる
教室利用も可能

今がチャンス!春までにキャリアチェンジで最大5万円キャッシュバック!

「コロナの影響もあり、これからのキャリアが不安...」「いまみたいな働き方で大丈夫?」
そんな不安をお持ちの方は、DMM WEBCAMPエンジニア転職を目指しませんか?
今、受講を開始すると最短で来年春までのエンジニア転職が可能です!

また、最大5万円のキャッシュバックキャンペーンを実施中!
DMM WEBCAMPは経済産業省認定講座のため、条件を満たすことで56万円のキャッシュバックも同時に受けられます。
エンジニア転職を目指すなら今がチャンス!

キャッシュバックキャンぺーン実施中/
5万円キャッシュバックの詳細を見る