Q&A
孫要素span2まで、text-align: center; が継承されているのが理解できていれば、普通は中央配置になると考えると思いますが、逆に中央配置にならないと思った理由は何でしょうか。
質問内容
text alignはブロック要素に効いて、中のインラインレベルコンテンツに作用するということは理解している上で、
下記のコードについて質問です。
bodyタグにtext align centerをかけており、孫要素のspan２にtext align centerが継承されると思っています。spanはインライン要素のため、中のテキスト「テストです。」は中央配置にならないと思っていたら、ブラウザで確認すると、中央配置になりました。
mainタグのtext align center⇨子要素span１にスタイル継承
mainタグのtext align center⇨孫要素span２にスタイル継承
‥という認識なのですが。
スタイルの継承の認識および、なぜ中央配置になったのか、教えて欲しいです。
当方、初学者です。
環境
・VSコードで作成
・Google chromeで確認
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> body{ text-align: center; } </style> </head> <body> <span id="span1"> <span id="span2"> テストです。 </span> </span> </body>
ご質問ありがとうございます。孫要素span2にスタイルの継承がされていても、spanはインライン要素ですので、中の「テストです。」というコンテンツは中央配置にならないと思ったのですが‥。text alignはブロック要素に効く、と認識しています。
https://www.itra.co.jp/webmedia/text-align.html
ただ、他2件回答していただいた内容を拝見しますと、スタイルの継承という捉え方自体に誤りがあったのか、自分でも考えがまとまっていない状態です。
text-align は指定した要素内のインラインコンテンツに効きます。
インラインコンテンツとは、インライン要素、インラインブロック要素、テキストです。
これが中央配置されるということです。
指定した要素内のブロック要素には効かないです。
今回の場合は、bodyに設定した text-align: center; が span1 に効いて span1 が中央配置されます。
インライン要素自体の幅は、中身の幅に合わせられますので、
span2内のテキストの幅＝span2の幅＝ span1の幅となり、
span1自体が中央配置されれば中身も同じ配置になります。
スタイルの継承はspan2までされてますが、それぞれ幅が同じなので、中身が中央配置だろうか左寄せだろうが影響はしないということです。幅一杯なので移動する余地かないということです。
https://www.itra.co.jp/webmedia/text-align.html の
「text-alignプロパティはブロックレベル要素に指定し、そのブロック要素内のインライン要素の位置を変更するプロパティです。」
という説明を誤解してますね。まあ、誤解を生みやすい説明ではあります。
インライン要素に直接指定しても、そのインライン要素のレイアウトには影響しない。その要素の子要素のレイアウトに影響する。
インライン要素のレイアウトを指定したい場合は、親要素であるブロックレベル要素に指定する。
という意味です。
text-alignはインライン要素だろうとブロック要素だろうと継承します。
回答5件
0
ベストアンサー
text-align
項目 説明 名前 text-align 値 start ｜ end ｜ left ｜ right ｜ center ｜ justify ｜ match-parent ｜ justify-all 初期値 start 適用対象 ブロックコンテナ 継承 される
text-alignは子孫要素に継承しますが、display: inline なspan要素は適用対象(ブロックコンテナ)ではない為、作用しません。
継承はされるので、display: block を宣言してブロックコンテナに変えれば、適用対象になります。
HTML
1<span style="text-align: center;"><span style="display: block;">span</span></span>
このように、継承先に適用対象があるのなら、インラインボックスに text-align を指定するのは無意味ではありません。
ブロックレベル要素とインライン要素
HTML4.01仕様。
7.5.3 ブロックレベル要素と行内要素
HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。 この違いは、幾つかの点から明らかにされる。
行内要素とは**インライン要素(inline element)**のことです。
HTML4.01Strictではbody要素直下にはブロックレベル要素のみを配置できます。
CSS仕様。
2. Box Layout Modes: the display property
...中略...
Short display Full display Generated box 'block' 'block flow' block-level block container aka block box 'inline' 'inline flow' inline box aka inline block
display: blockは**ブロックボックス(block box)**を生成しますdisplay: inlineは**インラインボックス(inline box)**を生成します
下記HTMLを「W3C Markup Validation」で検証するとします。
HTML4.01Strictの「body要素直下にはブロックレベル要素のみを配置できる制限」を回避する為に、display:blockでブロックレベル要素に変化させられるか確かめます。
HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3<head> 4<title>sample</title> 5</head> 6<body> 7<span style="display: block">span</span> 8<div>div</div> 9</body> 10</html>
span要素を書いた7行目で下記エラーが出力されます。
Error Line 7, Column 29: document type does not allow element "SPAN" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
ここで <span>, <div> をHTML4.01/CSSの名称で表すと、次のように分類されます。
| HTMLタグ | インライン要素(HTML4.01) | ブロックレベル要素(HTML4.01) | インラインボックス(CSS) | ブロックボックス(CSS) |
|---|---|---|---|---|
<span> | ○ | × | ○ | × |
<span style="display: block"> | ○ | × | × | ○ |
<div> | × | ○ | × | ○ |
<div style="display: inline"> | × | ○ | ○ | × |
<span style="display: block">はインライン要素であり、ブロックボックスです<div style="display: inline">はブロックレベル要素であり、インラインボックスです
このように解釈すれば、HTML4.01仕様、CSS仕様のそれぞれの規定を矛盾がないことが分かります。
翻って冒頭の質問に戻ると、
bodyタグにtext align centerをかけており、孫要素のspan２にtext align centerが継承されると思っています。spanはインライン要素のため、中のテキスト「テストです。」は中央配置にならないと思っていたら、ブラウザで確認すると、中央配置になりました。
spanがインライン要素であることに言及していますが、text-align プロパティが見ているのは要素区分ではなく、ボックスなので、
HTML
1<span style="display: block; border: solid 1px black; text-align: center">span</span>
このように、インライン要素であり、ブロックボックスでもある要素には text-align プロパティを適用できます。
Re: teratail20 さん
投稿2020/11/01 13:52
編集2020/11/03 12:58
総合スコア18189
ご回答いただきありがとうございます。以下の部分、自分の理解が足りていないので、
これから調べていこうと思います。
＞この試みは失敗に終わります。
CSSを適用しても、HTMLの文法には影響がありません
display: block を宣言しても、インライン要素はブロックレベル要素に変化しません
> ブロックレベル要素とインライン要素
分かりにくいようなので、体系的な説明になるように修正しました。
---
ただ、そこは回答の主軸ではなく、根本的に理解が必要なのは
> 適用対象: ブロックコンテナ
> 継承: される
の方です。
冒頭のHTMLではtext-alignが適用されているのは「body要素のみ」だと思います。
think49様、補足説明ありがとうございます。特に、「HTML4.01/CSSの名称で表すと〜」部分、ブロックレベル要素とインライン要素の概念の他、ブロックボックスとインラインボックスの概念をご提示いただき、大変参考になっております。
think49様にご記載いただいた、
＞text-alignは子孫要素に継承しますが、display: inline なspan要素は適用対象(ブロックコンテナ)ではない為、作用しません。
について、
text-alignはspan2まで継承されたが、span2はdisplay: inlineなspan要素であるため、text-alignは作用しなかった、と解釈しました。
また、「テストです。」が中央配置になったのは、hatena19様の「今回の場合は、bodyに設定した text-align: center; が span1 に効いて span1 が中央配置されます。インライン要素自体の幅は、中身の幅に合わせられますので、span2内のテキストの幅＝span2の幅＝ span1の幅となり、span1自体が中央配置されれば中身も同じ配置になります。」というご回答通りだと思っています。
話が少し逸れますが、インラインブロック要素についても理解を深めたく、今日も引き続きネットにて検索を行っていこうと思っています。
> text-alignはspan2まで継承されたが、span2はdisplay: inlineなspan要素であるため、text-alignは作用しなかった、と解釈しました。
その理解で合っていると思います。
> また、「テストです。」が中央配置になったのは、hatena19様の「今回の場合は、bodyに設定した text-align: center; が span1 に効いて span1 が中央配置されます。インライン要素自体の幅は、中身の幅に合わせられますので、span2内のテキストの幅＝span2の幅＝ span1の幅となり、span1自体が中央配置されれば中身も同じ配置になります。」というご回答通りだと思っています。
ここは text-align の仕組みから話が大分逸れているように感じます。
仕様によれば「text-align: center」は
https://triple-underscore.github.io/css-text-ja.html#text-align-property
> center
> 行内レベルの内容は、行ボックス(line box)の中で中央寄せにされる。
です。
line boxはざっくりいうと「インラインボックスを1行にまとめたもの」といえるものです。
https://triple-underscore.github.io/css-inline-ja.html#line-boxes
つまり、<span id="span1"><span id="span2">テストです。</span></span>で「テストです。」が1行に収まるのなら、全体がline boxとして生成され、text-align:center によって全体を中央揃えにレイアウトします。
根本的にはボックスモデルや
https://triple-underscore.github.io/css-box-ja.html#box-model
インラインボックスを理解する必要があります。
https://triple-underscore.github.io/css-display-ja.html#inline-box
> 話が少し逸れますが、インラインブロック要素についても理解を深めたく、今日も引き続きネットにて検索を行っていこうと思っています。
「インラインブロック要素」という用語は存在しません。
display:inline-block をインラインブロック要素と誤認したものと思われます。
https://drafts.csswg.org/css-display/#the-display-properties
説明の都合上、HTML4.01を引用しましたが、今では古い仕様なので、DOCTYPE宣言で4.01を指定しないようなら、HTML Standardベースで学習するのが良いと思います。
内容モデル(コンテンツモデル)も大分変化しています。
https://momdo.github.io/html/dom.html#content-models
詳細な補足説明をありがとうございます。
また、下記の2文でだいぶ理解が深まりましたので、ベストアンサーとさせていただきました。
「text-align プロパティが見ているのは要素区分ではなく、ボックスなので」
「インライン要素であり、ブロックボックスでもある要素には text-align プロパティを適用できます。」
ただ、直近で記載いただいた
＞つまり、<span id="span1"><span id="span2">テストです。</span></span>で「テストです。」が1行に収まるのなら、全体がline boxとして生成され、text-align:center によって全体を中央揃えにレイアウトします。
については、自分の理解が追いついておらず、紹介いただいたURLを参考に考えていきたいと思います。
長文コンテンツは右端で文章が折り返し改行が挿入されます。
3行の文章が存在したなら、3つのline boxが生成され、それぞれに text-align: center の中央揃えが適用されます。
To: 低評価した方
低評価理由を教えてください。
0
長くなりそうなので新しく書かせていただきました。
＞親要素から子要素へのスタイルの継承という概念を当てはめず、要素内のコンテンツ全てに作用する、という見方でしょうか‥？
そんなことはありません。text-alignは継承されるプロパティです。そして継承されるプロパティは親要素から子要素、子要素から孫要素、孫要素からひ孫要素にもずっと継承されていきます。
このプロパティは継承されるか、継承されないかは覚えるしかありません。しかし大体インライン、インラインブロックをどのように表示するかに関係するプロパティが多いです。よく使うものが継承するプロパティかそうでないかプロパティは書いていればだいたい分かるようになりますし、継承されると思って書いて、継承されなくてもブラウザの検証モードをしっかり活用すれば、すぐにわかります。
一応以下に継承するプロパティの一覧を載せます。
azimuth border-collapse border-spacing caption-side color cursor direction elevation empty-cells font-family font-size font-style font-variant font-weight font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans pitch-range pitch quotes richness speak-header speak-numeral speak-punctuation speak speech-rate stress text-align text-indent text-transform visibility voice-family volume white-space widows word-spacing
(https://stackoverflow.com/questions/5612302/which-css-properties-are-inheritedy)より引用。
投稿2020/11/01 12:06
総合スコア67
ご回答ありがとうございました。
text align がスタイル継承ありのプロパティであること、覚えておきます。
また、書いて経験を積もうと思います。
0
text-align は指定した要素内のインラインコンテンツに効きます。
インラインコンテンツとは、インライン要素、インラインブロック要素、テキストです。
これが中央配置されるということです。
指定した要素内のブロック要素には効かないです。
また、スタイルの継承はありなので、子要素、孫要素に継承します。
今回の場合は、bodyに設定した text-align: center; が span1 に効いて span1 が中央配置されます。
インライン要素自体の幅は、中身の幅に合わせられますので、
span2内のテキストの幅＝span2の幅＝ span1の幅となり、
span1自体が中央配置されれば中身も同じ配置になります。
スタイルの継承はspan2までされてますが、それぞれ幅が同じなので、中身が中央配置だろうか左寄せだろうが影響はしないということです。幅一杯なので移動する余地かないということです。display: inlineな要素には text-align は適用されません。
span要素をdisplay: inline-block;を指定して、幅を設定すると、子要素、孫要素に継承しているのが分かると思います。下記のサンプルをみると理解できると思います。
投稿2020/11/01 12:05
編集2020/11/01 14:47総合スコア34075
サンプルをつけていただきありがとうございます。
◎理解していること：ブロックレベル要素divのtextalignが適用され、インライン要素span1青が中央配置。
◎理解していないこと：スタイルの継承はあり、とのこと。インライン要素であるspan1のtextalignが適用され、span2赤が中央配置になるのはなぜでしょうか？span1はインライン要素なので、適切に適用されない＝span2赤は中央配置にならない、と思っているのですが‥。span2も同様です。
また、スタイルの継承は、今回↑の場合、divからspan1に継承され、span1からspan2に継承される、という認識で合っていますか。
長文失礼いたしました。何度も申し訳ございませんが、お返事頂けると幸いです。
> divからspan1に継承され、span1からspan2に継承される、という認識で合っていますか。
合ってます。インライン要素だろうとブロックレベル要素だろうと継承されます。
> インライン要素であるspan1のtextalignが適用され、span2赤が中央配置になるのはなぜでしょうか？span1はインライン要素なので、適切に適用されない＝span2赤は中央配置にならない、と思っているのですが‥。
span1 に親要素のtextalignが適用され、span1が中央配置されます。
span2はその中身で幅も親と同じなので同じ位置に配置されます。
@hatena19 さん
> 指定した要素内のブロック要素には効かないです。
text-alignは継承されるので、有効だと思うのですが…。
https://jsfiddle.net/r5c6ydae/
> スタイルの継承はspan2までされてますが、それぞれ幅が同じなので、中身が中央配置だろうか左寄せだろうが影響はしないということです。幅一杯なので移動する余地かないということです。
この理屈の出所はどこでしょう？
display:inlineなspan要素はtext-alignの適用対象ではありません。
https://triple-underscore.github.io/css-text-ja.html#text-align-property
> > 指定した要素内のブロック要素には効かないです。
>
> text-alignは継承されるので、有効だと思うのですが…。
ブロック要素自体が中央配置されることはないという意味で書きました。
そのブロック要素内のインライン要素は中央配置されます。
ブロック要素自体の中央寄せは margin: 0 auto; がよく使われますね。
この辺は誤解を生みやすいので説明が難しいですね。
> スタイルの継承はspan2までされてますが、それぞれ幅が同じなので、中身が中央配置だろうか左寄せだろうが影響はしないということです。幅一杯なので移動する余地かないということです。
これは私の解釈が間違ってました。適用対象ではないというのが正しいです。訂正します。
> ブロック要素自体が中央配置されることはないという意味で書きました。
確かに。
改めて読み直すと、そのように読めました。
みなさま、ご回答等いただいておりありがとうございます。
特にhatena19様のサンプルについて、考え続けておりました。
以下、私なりに考えた流れです。
＞span1 に親要素のtextalignが適用され、span1が中央配置されます。
span2はその中身で幅も親と同じなので同じ位置に配置されます。
→
step1_ブロック要素であるdivからインライン要素であるspan1にtextalignが正常に適用される。
step2_span1はdivからスタイルの継承(textalign)を受けるが、span1自身はインライン要素なので、span2にtextalignを正常に適用できない。
step3_span2はspan1からスタイルの継承(textalign)を受けるが、span2自身はインライン要素なので、テキスト(テストです。)にtextalignを正常に適用できない。
＞span要素をdisplay: inline-block;を指定して、幅を設定すると、子要素、孫要素に継承しているのが分かると思います。下記のサンプルをみると理解できると思います。
→
step1_ブロック要素であるdivから、CSS でインラインブロック要素に変換されたspan3にtextalignが正常に適用される。
⭐️step2_span3はdivからスタイルの継承(textalign)を受け、span3自身はインラインブロック要素であり、CSS でインラインブロック要素に変換されたspan4にtextalignが正常に適用される。
step3_span4はspan3からスタイルの継承(textalign)を受け、span3自身はインラインブロック要素であり、テキスト(テストです。)にtextalignを正常に適用できた。
上記の解釈、いかがでしょうか？悩みに悩んだのですが‥。
特に⭐️step2_について、textalignはブロック要素のみならず、インラインブロック要素にもかけることができ、インラインコンテンツ（hatena19様にご記載いただいたように、インライン要素、インラインブロック要素、テキスト)に影響すると考えております。
以上長文失礼いたしました。
お付き合い頂ける方いらっしゃいましたら、コメント頂けると大変幸いです。
上記コメントにつきまして一部修正いたします。以下⇩
step3_span4はspan3からスタイルの継承(textalign)を受け、span4自身はインラインブロック要素であり、テキスト(テストです。)にtextalignを正常に適用できた。
次の画像をご覧ください。https://notehonpo.com/wp-content/uploads/2017/02/13-k6.png
htmlのbodyの中は先の画像のようになっています。すべての要素は罫線に沿って並んでいきます。
要素の最後で改行される要素と改行されない要素があります。divやh1やpなどは改行される要素で、spanなどは改行されない要素です。作文を思い出してください、pが段落で、h1がタイトルのようなものです。divはいくつかの要素をまとめるものです。そしてそれぞれの行にテキスト(やそれ以外のインライン要素、これはつまり行に埋め込む要素とでも言える）が並んでいきます。text-alignはそうやって一行に並んだテキストの行内配置を指定するものです。どんな本も普通は左から右にテキストが並んでいるでしょう、だからデフォルトはtext-align: leftすなわち左寄せです。microsft wordを使ったことはありますか？https://i.ytimg.com/vi/y2s0JtbSMEY/maxresdefault.jpg
この画像の上の方のParagraphという文字の左上に左から「左寄せ、中央寄せ...」のように４つアイコンが並んでいると思いますそれがtext-alignです。
回答になっているとは思いませんが、少しでも理解の助けになれば幸いです。
greenleave10000様、コメントいただきありがとうございます。
ブロック要素やインライン要素といった概念を理解するのに慣れず、苦戦しているところです。
それでも、こちらで皆様からのコメントをいただき、以前よりはだいぶ理解が深まったと思います。
ご記載のように、Wordをイメージしつつ、コードを読解したいと思います。
ありきたりですが、
ブロック要素は、
1.常に新しい行で始まる。
2.幅は可能な限り最大の幅を取る。可能な限り左右に広がる。
インライン要素は、
1. 新しい行から始まらない。
2.幅は必要な分だけの幅を取る。
な感じです。
回し者ではないですが、Progateがおすすめです。ホントに必要最低限の基礎が学べます。僕も初めてのHTML&CSSはProgateで学んだのですが、カリキュラムが良い意味で短くてシンプル（スライドが凄く作り込まれています）で僕にはすごく合っていました。（長すぎると飽きちゃうので）もちろんこれだけすればOKなわけではなくMDNやその他ウェブサイトにはたくさんお世話になっています。お互い頑張りましょう。
greenleave10000様、アドバイスありがとうございます。HTMLやCSSに関する情報として、解説サイト等を見ても諸説あるような気がして、煮詰まっておりました。自分でコードを書いて経験値を上げつつ、teratailのようなサイトで皆様の考え方を学びたいと思います。お互いに頑張りましょう。
0
text-alignプロパティは、コンテンツがその親要素内でどのように整列されるかを指定します。そして、ブロック要素に指定した場合はその要素内のコンテンツすべてが、そのように整列します。
ここでコンテンツとはインライン要素、インラインブロック要素です。そして、ブロック要素に指定した場合は、そのブロック要素自体の配置には影響を与えません。ブロック要素自体の配置には、FlexBoxを使ってください。
参考:https://css-tricks.com/almanac/properties/t/text-align/
投稿2020/11/01 11:10
編集2020/11/01 11:11総合スコア67
ご回答ありがとうございます。
text alignプロパティの場合は、下記サイトで紹介されているfontsizeプロパティのような、
親要素から子要素へのスタイルの継承という概念を当てはめず、要素内のコンテンツ全てに作用する、という見方でしょうか‥？
https://techacademy.jp/magazine/38031
その場合、プロパティごとに、スタイル継承あり、スタイル継承なし、要素内コンテンツ全てに影響する等、個々の特性として捉えるのが適切なのでしょうか。
これから学習を進めるにあたり、コードを記述する経験値を積めば、その辺りのニュアンスは理解できるものなんでしょうか？
0
<span>は（あえてスタイルで指定しない限り）display: inlineですので、行内に他の文字などと混ざって配置されます。
継承されるかとは関係なく、bodyのtext-align: centerに直接したがって配置されます。
投稿2020/11/01 11:08
総合スコア146018
ご回答ありがとうございます。また、コードの記述もしていただきありがとうございます。
添付いただいたコードの場合、bodyというブロック要素へtext align centerが効いて、インライン要素のspanタグが中央になる‥と解釈でき、その後のspanタグへの記述は、spanタグがインライン要素であるのでtext align leftが効かない‥と解釈しております。
> spanタグがインライン要素であるのでtext align leftが効かない‥と解釈しております。
その解釈は違いますね。text-align: left は効いています。ただ、span1 と span2 が同じ幅なので移動する余地がないので効いてないようにみえるだけです。
【追記】インライン要素に指定した場合 text-align は適用されないというのが正しい解釈のようです。訂正します。
> その後のspanタグへの記述は、spanタグがインライン要素であるのでtext align leftが効かない
はい、その理解で間違いありません。display: inlineの要素は、周囲に合わせてレイアウトされるだけで独自の寸法などを持たない（極端な場合、要素の途中で改行されたりもする）ので、text-alignの利く余地はありません。
対して、display: inline-blockの場合は、要素自体が固有の幅を持ちうるので、その中でtext-alignが効果を持ってきます。
あなたの回答
tips
プレビュー
