【9月枠も残りわずか】転職保証コース

CSS「text-align」基本の使い方と効かない時の対処法

文字を中央寄せにしたり、画像の位置を決めるときに「text-align」を使ったことはありますか?
text-alignは曖昧さが多く残る部分なので、「どうして、思っている部分に効かないんだろう?」と悩んだこともあるのではないでしょうか?

今回は、そんなtext-alignの使い方と、うまく効かないときの対処法について解説していきたいと思います。

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

text-alignは文字や画像を中央や、右・左など好きな位置に指定することができます。
text-alignはブロック要素で指定し、そのブロック要素内のインライン要素だけが指定されます。

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


ブロック要素
は、サイトを構成する塊のことです。
ブロック要素は見えている中身の量にかかわらず、横いっぱいに広がっています。
インライン要素は、文章などのことを指し、ブロック要素と違って見えている中身の量の分だけ幅をとります。

基本のコードの書き方

ここから基本のコードの書き方を押さえていきたいとおもいます。
今回は、下記の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;

テキスト部分を中央揃えにしたいときは、「text-align: center;」を書き足します。

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

 

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

テキストを親要素の右に揃えたい場合は「text-align: right;」で指定をします。

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

 

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

テキストを親要素の左端に揃えたいときは、「text-align: left;」を使って指定をします。

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

 

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

「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;
}

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

 

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

いかがでしたでしょうか?

ここで押さえておいて欲しいことは、
①「text-align」はブロック要素に指定をすること
②実際に見た目が変わるのはブロック要素の中のインライン要素であること
の2つです!

自分が中央や左右に寄せたい要素が、どんな要素なのかを意識して、指定の仕方を使い分けましょう!

 

10月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きのプログラミングスクール

で未経験からエンジニアを目指そう!

 

転職保証コースは質の高いカリキュラムで転職成功率98%

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある