text-alignが効かない時に考えられること

CSS

2021.02.24

【CSS】text-alignが効かない時に考えられること

今日は、【text-align】が効かない時の原因と考えられることを解説していきます!

text-alignとは

【text-align】プロパティでは、ブロック要素または表セルボックスの水平方向の配置を決めることができます。
つまり、ブロック要素(表セルボックス)の中身をどのように配置したいのかを指定できるプロパティです。
参考:https://developer.mozilla.org/ja/docs/Web/CSS/text-align

以下は、上から順に
・left(初期値)
・center
・right
を指定している例です。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

本来はこのように表示されるのですが、指定が間違っていると【text-align】が効かない場合があります。この【tex-align】が効かない時の原因と考えられる事項をご説明いたします。

原因1:インライン要素に指定してしまっている

要素は、大きくブロック要素(ブロックレベル要素)をインライン要素の2つに分類できます。
ブロック要素とインライン要素については、以下の記事で解説していますので、参考にしてください!

今回指定する【text-align】は、最初に述べた通り、ブロック要素または表セルボックスに指定することができるものです。

以下の例では、どちらにも【text-align:right】を指定しています。
1つ目の例は、インライン要素である〈span〉に指定しているので、右に寄っていません。
2つ目の例は、【display:block】を指定してブロック要素にしているので、【tex-align】が効いて右に寄っています。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

【text-align】を指定しているにもかかわらず、うまくいかないという時は、インライン要素に指定しようとしていないか確認してみてください。

原因2:画像を寄せようとしている

これまでご説明したとおり【text-align】はブロック要素に指定する必要があります。

今回、画像を真ん中寄せにしてみたいと思います。
〈img〉はインライン要素なので、上記の例と同じように、ブロック要素にしたい(【display:block】を指定する)と思います。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

〈img〉をブロック要素にしているにもかかわらず、画像が真ん中寄せになりません。これは、〈text-align〉がブロック要素(表セルボックス)の中身をどのように配置するかを決めることができるものだからです。

検証ツールなどで確認すると分かりますが、〈img〉要素いっぱいいっぱいに画像がある状況になっています。そのため、〈img〉要素の中身をどのように配置するかなどの指定はできないのです。

解決方法1 ブロック要素で囲む

〈img〉を〈div〉など他のブロック要素で囲んで、その囲んだブロック要素に【tex-align】を指定する方法があります。〈img〉が親要素の指定に従い配置されることになります。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

解決方法2 ブロック要素にして、marginで調整する

こちらは【text-align】を使用した方法ではないのですが、実際によく使われる方法でとても便利なのでご紹介します。

まず、〈img〉に【display:block】を指定してブロック要素にします。このままだと初期値通りに左寄せになっています。

真ん中寄せにしたい場合は、【margin : 0 auto】(別途上下のmarginを指定したい時は指定してください。必要なのは右と左の「auto」の部分です)を、右寄せにしたい場合は、【margin-left: auto】で実現できます。

See the Pen mdOBbLK by spiqa design (@spiqa_design) on CodePen.

【margin】による配置を行う場合には、必ず要素がブロック要素である必要がありますので、きちんと確認してくださいね!

両端揃え(justify)の注意点

word文書やPowerPoint文書でよく使う両端揃えをWebサイトでも使いたい時の注意点です。

両端揃えとは

文章が入る範囲がわかりやすいように、背景をピンク色にしています。

See the Pen zYoEOJo by spiqa design (@spiqa_design) on CodePen.

何も指定していない場合、左から文字が並んでいき、入らなくなったところで折り返されています。そのため、右側がガタガタになってしまっています。
ここに【text-align: justify】を指定することで、両端揃えになります。

文章が1行の場合

文章が1行しかない場合を見てみたいと思います。

See the Pen xxRXKQd by spiqa design (@spiqa_design) on CodePen.

【text-align: right】は問題なく効いているのに対し、【text-align: justify】は左に寄ったままです。

この原因を説明するために、先程の例をもう一度見ていただきたいのですが、これは、最終行については両端揃えになっていません。

See the Pen zYoEOJo by spiqa design (@spiqa_design) on CodePen.

【text-align: justify】は、テキストの場合、最終行を除いて、両端揃えになるのです。

最終行の配置方法を指定するには【text-align-last】を使います。【text-align-last: justify】を指定することで、1行でも(最終行も)両端揃えにすることができます。

ただし、こちらのサイトを見ていただくとわかるように、Safariではまだサポートされておりません。
https://developer.mozilla.org/ja/docs/Web/CSS/text-align-last
そのため、1行の文章のレイアウトには、letter-spacingやpaddingなどを用いて調整するのが良いかもしれません。

まとめ

先日、1行の文章を真ん中揃えにする際に【text-align】プロパティが効かずに、その原因を調べたので記事を書いてみました。
皆さんも対応ブラウザなどを調べつつ、より良い方法でコーディングを行ってみてください。

▼関連記事

0

関連記事

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!