CSS「text-align」を理解【基本と効かない時の対処法】 | プログラミング入門ならWEBCAMP NAVI
【3月枠も残りわずか】転職保証コース

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: center;

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

CSS
text-align: center;

実際に元のCSSに書き足すと次のようになります。

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

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

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

CSS
text-align: right;

実際に元のCSSに書き足すと以下のようになります。

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

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

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

CSS
text-align: left;

元のCSSに書き足すと以下のようになります。

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

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

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

CSS
text-align: start;

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

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

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

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

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

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

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

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

<指定なし>

 

<指定あり>

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

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

「text-align: center;」がうまくいかないときには下のことを確認してみてください。

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

まず確認していただきたいのは、指定したいものが「ブロック要素内のインライン要素」であるかということです。

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

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

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

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

ブロック要素を中央寄せにする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」使うということはもちろん、
他の要素の場合には何を使えばいいのかもわかるようにしましょう。

3月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP

DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。

無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。

【無料】キャリア相談の日程を見る

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。