text-alignについて

Question

前提・実現したいこと

Progateには「インライン要素・インラインブロック要素の場合はtext-alignを使うようにしましょう」と書かれているのですが、ネット記事には「text-alignはブロック要素に指定します。」と書かれていました。
どちらが正しいのでしょうか？もし場合分けがあるならばそちらも教えて欲しいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

主語、述語、目的語を整理して見てみてください。
そうすれば、両者は同じ事を言っていると理解できるはずです。

Answer 1

text-alignは、「ブロックコンテナー」に対して適用できます（MDN）。

この「ブロックコンテナー」には、ブロック要素、表のセル、display: inlinke-blockなどが含まれます。

なお、text-alignで整列されるものは、中身のテキストやインライン・インラインブロック要素です。

Comments

[maisumakun]

「text-alignを適用する要素」と「text-alignで並び方が変わる要素」が違うので、そこで混同しているのかもしれません。

Answer 2

国語的な文章理解の問題です。

両者は同じこと言っています。
主語、述語、目的語に分解して考えていきましょう。

後者は簡単です。

text-alignは（主語）
ブロック要素に（目的語）
指定します（述語）

となります。

では、前者はというと、

インライン要素・インラインブロック要素の場合は（修飾語）
text-alignを（主語）
使うようにしましょう（述語）

前者は、主語が使うものとなり、「△△の場合は、〇〇を使う」とだけ書いてあり、
何に対して使うの目的語が書かれていません。
では、細かく文脈から目的語を明記すると、

インライン要素・インラインブロック要素の場合は（修飾語）
text-alignを（主語）
親のブロック要素に（目的語）
使うようにしましょう（述語）

となります。

細かく言うと文法など間違っているかもしれませんが、
国語的読解力を使う必要があることだけは間違いありません。

Answer 3

CSS2の時代からある場合分けとしては、[1]と[2]の2つでした。
display: flex;が使えるようになって[3]の選択肢が増えました。

display: flex;をまだ触ったことがなければ、まずは[1]と[2]の違いから把握してください。

---

[1] 文字やインライン要素を中央揃えにする方法
左右中央揃えにしたい対象: display: inline、display: inline-block
CSSを指定する要素: 親要素

文字の中央寄せ、中央揃えにする目的で使用します。
背景色をつけた場合、背景色は横幅いっぱいで、その中の文字だけ中央に配置されている、という見た目になります。

<p class="parent">
  <span class="child">ああああ</span>
</p>

p.parent {
  text-align: center;
}

---

[2] 要素を左右中央配置する方法1
左右中央配置にしたい対象: display: block;
CSSを指定する要素: 対象自身 (=親要素は関係ない)

文字は中央揃えにはなりません。左揃えのままです。
背景色をつけてみるとわかりやすいですが、背景色のある領域が、左右中央に配置されます。

<div class="parent">
  <div class="child">ああああ</div>
</div>

.child {
  margin: 0 auto; /* 左右中央配置 */
  width: 200px; /* display: block;の要素を中央配置する場合、widthの指定が必要 */
}

---

[3] 要素を左右中央配置する方法2
左右中央配置にしたい対象: なんでも
CSSを指定する要素: 親要素

[2]よりも、横幅を指定しなくても使えるといった点で便利なので、最近はよく使用されています。

<div class="parent">
  <div class="child">ああああ</div>
</div>

.parent {
  display: flex;
  justify-content: center;
}