🧱

なぜインライン要素・ブロック要素概念は依然として有用なのか:現代的なWeb制作への適用

に公開
6

Discussion

otioti

HTML自体の仕様だけではなく、CSSによるレンダリングも含めたウェブページ全体の関心範囲において、ブロックとインラインという概念の理解が有用だというのは異論ありません。

要素やテキストの表示が改行されるのか1行に続けてされるのか、CSSレイアウトには絶対に欠かせない前提知識ですよね。

なのですが、その概念を「ブロック要素」「インライン要素」というキーワードで説明するのは混乱の元だと思います。「ブロック要素(ブロックレベル要素?)」「インライン要素」というのは今ではもう廃止されたHTML4.01の語彙だからです。

廃止されたHTML仕様の語彙は使わず、現代のCSS仕様に照らし合わせた別のキーワードで説明できないでしょうか? display プロパティによるレンダリングに着目するならば、block 値の仕様で

The element generates a box that is block-level when placed in flow layout.

と書かれているように「ブロックレベルのボックス」というキーワードが拾えると思います。inline値 なら「インラインレベルのボックス」ですね。

https://www.w3.org/TR/css-display-3/#outer-role

↑リンクの #Glossary と併せて見て、短くするなら「ブロックレベル」「ブロックボックス」「インラインレベル」「インラインボックス」といったところでしょうか。

CSSの話を含むかもしれないのに、廃止されたHTML仕様の語彙を使って説明すると、初学者が正しい情報を検索できず、ブロックとインラインの概念を理解するまで逆に時間がかかってしまう原因になると思いました。

coedocoedo

コメントありがとうございます。概念のあるなしの先の話ができそうで、とても嬉しいです。

より伝わりやすい用語が必要という意見も同意です。
そのうえで、同じ意見のところと違う意見のところとあるので、明確にしながら、いったん立場を表明しておきますね(記事の趣旨は「概念までなくなったわけではない」ですが、ここではその先の論点で進めます)

今回記事を書くにあたり HTML Standard や MDN の記事を確認したところ、僕自身が勘違いしていた点として「(レイアウトやスタイリングのみならず)HTML の文書構造の観点からも inline element や block element の概念はなくなっていないかも」ということです。
根拠はふたつで、MDNに「フローコンテンツ」とともに両要素の記述があり、HTML Standard に「Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content」と記載があることからです。

で、僕自身が「概念がなくなることはないだろう」と推察している理由は、また別にあります。
それはこれらの語句が Inline element , Block Element という語句と同義だからです。英語で inline element と表記された場合、element は html element を指し、それが(スタイリングの観点であれば)inline-level に配置されたものを指すというのは、省略された表現として自然なのではないかと想像しています。(僕は英語話者ではないので完全に想像であり、間違っているかもしれません)
語句が自然に使われるのであれば、概念自体がなくなってしまうことはありませんし、(形を変えてでも)生き残っていくのではないかと想像しています。(仮に日本語の文書から消しても、英語圏では使われ続ける表現であり、翻訳されて使われる)

とすると、これは「いやいや"インライン要素"という語句を(HTML 5 以前における意味合いとは別で)使うと、余計に混乱する=誤解を与えやすい」ということでもあります。
その面は否定できませんし、するつもりもありません。
では(越智さんのおっしゃるとおり)どう言い換えるか、という話になりますね。

「ブロックレベル」「ブロックボックス」「インラインレベル」「インラインボックス」といったところでしょうか

この意見はとても納得感はあるものの、一方で、文書構造の意味合いを失ってもよいのだろうかという別の懸念がまったくないわけではありません(スタイリングの観点に絞った場合は問題ないですが、しばしばHTMLの文脈ではそれに限らないことは記事内で述べたとおりです)

以上を総合的に考えた結果として、現時点で、「インライン要素」「ブロック要素」というワードによる説明が、"それほどマイナスに作用するとは思っていない"というのが率直な意見です。
繰り返しますが、このワードでなければいけないわけではないので、よりしっくりくる表現があればそれが一番です。

補足です。HTML の仕様書に使われていた表現は block-level element であり block element ではなかったという認識です(未確認)
ではなぜ記事内で block element にあたる表現"ブロック要素"としているかというと、今日現在 MDN や dev.to 内でみられる表記を総合的に判断した結果 inline element の対義語として block element の表記を使っているのではないかと思い、そのようにしています。

otioti

HTML仕様の content model とCSS仕様の display プロパティの値は関係ないので、いっそ「ブロック要素」を「display block」と言いかえるくらいでもいいかもしれませんね。「インライン要素」も「display inline」で。言いたいことは同じだと思います。

どうしてMDNは、仕様書に block-level , inline-level と書かれているものを block element, inline element と書き換えているのでしょうね。

わかりにくさを生んでいる原因はここなのかなと思いました。

coedocoedo

じつは MDN 内で inline-level element と記載している箇所すらあるのですよね…
たしかにわかりにくいです…

MeguriMeguri

「インライン要素・ブロック要素」についての視点、とても興味深いです!標準仕様の変化を踏まえつつも、実務での実用性に触れている点が共感を呼びます。新しい学習者への具体的な指導法は、教育現場でも役立ちそうです。

coedocoedo

コメントありがとうございますー。趣旨を理解していただけとても嬉しいです。相手あることですので、いろいろ試行錯誤しつつ、理解深めていってほしいですよね。伝えていく過程でわかったことありましたら、ぜひ共有してくださいませ。