質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

520閲覧

こ子では何故、ブロック要素にtext-align:center;が適用されているのでしょうか?

reo_fukkase

総合スコア50

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/15 06:58

編集2019/12/15 08:15

![イメージ説明]イメージ説明```
ここに言語を入力
Progateの指示に従って以下のようなコードを打ち込みました。
ここで疑問なのが、.message-wrapperの中のインライン要素であるspanにtext-align:center;が適用するのは理解できるのですが、何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか?回答よろしくお願いします。

<html> <div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative!</h3> </div> <span class="btn message">さっそく開発する</span> </div> </div> <css> .message-wrapper{ border-bottom:1px solid #eee; padding-bottom:80px; text-align:center; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

text-alignは継承します。
参考→ https://developer.mozilla.org/ja/docs/Web/CSS/text-align

つまり親要素(包含ブロック)にtext-alignを指定すると、子要素にtext-alignを指定した事と同じになります。
複数に指定したい場合には個々に指定するよりも合理的です。

デベロッパーツールで見てみるとInherited from...という形でtext-alignが子要素に継承されているのが確認できると思います。

追記:
以下のデベロッパーツールの画像を見てもらうと分かるのですが、要素自体は中央寄せになっていません。
中身のテキストが中央寄せになっているだけです。

displayの知識についてはサルワカの記事が分かりやすいので良ければ一読してみて下さい。
https://saruwakakun.com/html-css/basic/display

イメージ説明

それと本題ではないのですが、ブロック要素でもmargin: atuo以外で中央寄せする方法はいくつかあります。(display: flex等)

投稿2019/12/15 07:35

編集2019/12/15 08:04
take-t.t.

総合スコア360

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reo_fukkase

2019/12/15 07:41

『つまり親要素(包含ブロック)にtext-alignを指定すると、子要素にtext-alignを指定した事と同じになります。 複数に指定したい場合には個々に指定するよりも合理的です。』 この部分は理解しているつもりですが、その子要素にブロック要素がある場合、ブロック要素であるのにtext-alignによって中央寄せされるのは何故ですか? ブロック要素なら、margin autoでしか中央寄せ出来ないのではないのでしょうか? よろしくお願いします。
take-t.t.

2019/12/15 07:48

回答に追記いたしました。
reo_fukkase

2019/12/15 11:41

ありがとうございました????‍♂️
guest

0

ベストアンサー

###回答

何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか?

headingのブロック要素自体が中央寄せになっているのではなく、hedding要素の中の文字が中央寄せになっているんだ思います。
(heading要素に幅が設定されていないため、ブロック要素が中央寄せされているように見えるだけです。)

ブロック要素が幅を持っている時は、margin-autoでブロック要素自体が中央寄せになると思いますが...

以下簡単な例を載せます。

※線の色
黒:ブラウザの枠
青:headingブロック要素
赤、緑:各要素

###text-align: center;未設定
イメージ説明

###.message-wrapperにtext-align: center;設定
イメージ説明

###heading要素に幅を指定した時
この場合、ブロック要素内で文字がセンタリングされる。
ブロック要素自体はセンタリングされていません。
イメージ説明

私なりの考え方はこんな感じです。

###追記

ブロック要素(h1〜h6)はtext-alignで中央寄せに出来ないという決まりが分からなくなってしまいました。

以下の画像にまとめてみました。

イメージ説明
※h2,h3にwidthを指定しています。

以下が、{margin 0 auto;}を使ってh2,h3ブロック要素を中央寄せしたとき
※text-align:centerではこのようにならない!!

イメージ説明

以上です。

投稿2019/12/15 08:20

編集2019/12/15 09:48
KazuSaka

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reo_fukkase

2019/12/15 08:24

画像を添付しなおしました。 確かにブロック要素自体(div自体)は移動していませんね。 しかし、中身のテキストであるh2とh3は中央寄せになっていますね。 h1〜h6もブロック要素のはずですが、何故text-align centerで中央寄せになっているのでしょうか?
KazuSaka

2019/12/15 08:32 編集

headingにtext-align:centerを指定する ↓ その中のh2やh3タグにも継承される ↓ h2やh3内の文字がセンタリングされる (h2やh3タグにtext-align:centerを設定するのと同じ) 以下が同じ意味だと思います。 headingブロック要素にcenterを設定➡内部のspan要素がセンタリングされる (これは理解されていると思います) h2ブロック要素にcenterを設定➡内部の文字がセンタリングされる こんな感じでしょうか わかりにくいですかね。
KazuSaka

2019/12/15 08:39

追記された画像についてですが、.message-wrapperにcenterを指定してもheadingブロック要素自体は中央寄せになってません。中央寄せになっているのはheading要素の内部のh2タグの内部の文字が中央寄せになってます。
reo_fukkase

2019/12/15 09:03

なるほど、『h2ブロック要素にcenterを設定➡内部の文字がセンタリングされる』は可能なのですね。 そうなると、ブロック要素(h1〜h6)はtext-alignで中央寄せに出来ないという決まりが分からなくなってしまいました。 理解力がなくて申し訳ありません(^^;;
KazuSaka

2019/12/15 09:50

回答に追記しました。どうでしょうか?
reo_fukkase

2019/12/15 10:06

h2,h3でそれぞれ一つの塊で、h2、h3自体は移動せず、中にある文章が中央に移動するということですね。
reo_fukkase

2019/12/15 10:28

なるほど!長々とご説明いただきありがとうございました????‍♂️
KazuSaka

2019/12/15 10:30

Progate頑張ってください!!
reo_fukkase

2019/12/15 11:42

ありがとうございます!
guest

0

.message-wrapperの中のインライン要素であるspanにtext-align:center;が適用するのは理解できるのですが、何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか?

いえ、正反対です。

text-alignは、ブロックコンテナーに対して適用して、その中身のテキスト(やフレージング・コンテンツ)の位置を決めるためのものです。

それ自体の固定的なボックスが取られない、display: inlineな要素に直接text-alignをかけても無意味です。

投稿2019/12/15 07:31

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reo_fukkase

2019/12/15 07:35

ブロック要素に対してtext-alignを適用することで、その中のインライン要素が中央寄せされるのはわかるのですが、何故中にあるブロック要素までが中央寄せされるのですか?
maisumakun

2019/12/15 07:38 編集

(勘違いでした)
reo_fukkase

2019/12/15 11:42

ありがとうございました????‍♂️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問