Web制作の授業中、実習をしている学生からこんな質問が飛んできます。
「先生、span タグに width を入れても幅が変わらないんですけど……なんでですか？」
昔の私なら、あるいは一般的な解説記事なら、こう答えているでしょう。
「それは span がインライン要素だからだよ。幅を持たせたいならブロック要素に変えないとね」と。
でも今の私は、その言葉をぐっと飲み込みます。
喉まで出かかった「インライン要素だから」というフレーズを封印し、少し回りくどくても別の説明を試みます。
なぜなら、「ブロック要素」「インライン要素」という言葉を、授業ではなるべく使わないようにしているからです。
ご存知の通り、現在のHTML仕様（HTML Living Standard）において、この分類は廃止されています。
しかし、私がこの言葉を使わない理由は「仕様にないから」だけではありません。「わかりやすいから」と安易に古い用語を使うことが、学生たちの長期的な成長を妨げると感じているからです。
今回は、教える立場として「あえて便利な用語を捨てる」理由と、その代わりにどうやって「Webの仕組み」を伝えるかについて、私の現在の試行錯誤をまとめてみます。
なぜ「ブロック／インライン要素」という言葉を使いたくないのか
最大の理由は、「HTML（構造）」と「CSS（見た目）」を混同させたくないからです。
初心者に「div はブロック要素です」と教えてしまうと、彼らはそれを「div タグが生まれつき持っている性質」だと誤解してしまいます。
- 「
divは箱のようなもの」 - 「
spanは文字のようなもの」 - 「
divは縦に積まれるもの」
こう覚え込ませてしまうと、学習が進んだときに必ず混乱が生じます。
例えば、FlexboxやGridが登場したときです。
「先生、div はブロック要素（縦積み）のはずなのに、なんで display: flex をつけると横並びになるんですか？」
この質問が出るのは、「縦積み」が div の本質（HTML）ではなく、単なる初期状態（CSS）であることを理解できていない証拠です。
HTMLの役割はあくまで「文書の意味（セマンティクス）」を定義すること。
「見た目」や「挙動」を決定するのは、100% CSSの役割です。
この境界線を曖昧にしたまま、「ブロック要素」という「見た目の挙動を含んだ名前」でHTMLタグを分類することは、Webの本質的な理解を遠ざけてしまうと考えています。
【余談】「HTMLだけ」を学ぶ意義
この「構造と見た目を混ぜない」というテーマについて考えるとき、ある一冊の本を思い出します。
2022年に出版された『武器になるHTML』（柴田 宏仙 著）です。
一般的なWeb制作の入門書は、学習者のモチベーションを維持するために「HTMLを書いてすぐCSSで装飾する」という構成をとることがほとんどです。しかしこの本は、徹底して「HTML（マークアップ）」だけに特化しています。
「HTMLとCSSを切り分けて学習するほうが、結果として言語への深い理解につながる」
この書籍のスタンスには、私自身も非常に感銘を受けました。「HTMLはあくまで文書構造である」という原則を腹落ちさせるためには、学習初期こそ意識的にCSS（見た目）の概念を排除する時間が必要なのかもしれません。
じゃあどう教えよう
用語を使わずに説明するのは、正直に言えば骨が折れます。
しかし、私は最初から「ブラウザの初期スタイル（User Agent Stylesheet）」という概念を正面から教えるようにしています。
1. 「要素」と「スタイル」を完全に切り離す
冒頭の span に幅が効かない質問に対して、私はこう答えます。
「それは、ブラウザが span というタグに対して、最初から display: inline というCSSを勝手にかけているからですね」
学生は驚きます。
「えっ、私が書いたCSSにはそんなこと書いてないですよ？」
「そうだけれども、ブラウザが良かれと思って用意した（ときにはありがた迷惑な）『デフォルトのCSS』があるんですよ」
ここで、実際のブラウザ（Chromeなど）のデベロッパーツールを開き、Computed タブや User agent stylesheet の項目を見せます。そこには確かに display: inline の記述があります。
これが「種明かし」です。
「幅が効かないのは、span というタグのせいではなく、そこにかかっているCSSのせい」であることを視覚的に納得してもらいます。
2. 「displayプロパティ」の状態として教える
私は授業中、名詞としての「ブロック要素」は使わず、状態としての「ブロックレベル」や「インラインレベル」、あるいは直接的に「display: block の状態」という言葉を使います。
- ❌
divはブロック要素です。 - ⭕
divは、初期状態ではdisplay: blockで表示されます。 - ⭕ これを
display: flexに変えれば、Flexコンテナになります。
言葉遊びのように見えるかもしれませんが、このニュアンスの違いが重要です。
「あくまで初期値がそうなっているだけ」という前提があれば、「CSSで上書きすれば自由に変えられる」という発想が自然に生まれるからです。
3. ネスト（入れ子）のルールは「コンテンツモデル」で
かつて「ブロック要素」という言葉は、「どのタグの中にどのタグを入れていいか」というルール（入れ子のルール）を説明するためにも使われていました。
- 昔：インライン要素の中にブロック要素を入れてはいけない。
- 今：そんなルールはない。
例えば、リンクの a タグの中に、見出しの h1 や div を入れること。
昔の「インライン要素」という定義ならNGですが、現在のHTML仕様（コンテンツモデル）ではOKです。
「ブロック要素／インライン要素」という言葉を使うと、この「a の中に div を入れてもいい」という現代の仕様を論理的に説明できなくなります。
だからこそ、HTMLの入れ子ルールについては、「フローコンテンツ」「フレージングコンテンツ」といった正しいカテゴリを（噛み砕きつつ）教える必要があります。
古い用語との付き合い方
とはいえ、完全にこの言葉を無視するのは現実的ではありません。
ネット上の技術記事や、先輩たちが書いたレガシーコードには、まだ「ブロック要素」「インライン要素」という言葉が溢れているからです。
なので、学生がある程度理解したタイミングで、必ずこう補足します。
「Webで検索すると『ブロック要素』って言葉がたくさん出てくると思います。
これは昔のHTMLの分類なんだけど、『display: block が効いている状態』を指す言葉として、便宜的に使われていることが多いです。
でも皆さんは、『それはHTMLの性質じゃなくて、CSSの初期値の話だな』と脳内で変換してください」
「嘘は教えない」けれど、「世の中の実情（方言のようなもの）」は伝える。
このバランスを取るのが、教える側の責任だと思っています。
まとめ
「ブロック要素」と言ってしまったほうが、その場は楽かもしれません。
説明も1分で終わります。
けれど、Web制作の本質である「構造（HTML）と表現（CSS）の分離」を正しく理解してもらうためには、最初の段階での言葉選びがとても重要です。
- HTMLタグは「意味」を持つもの。
- 「動き」や「見た目」を決めるのは、すべてCSS。
この境界線を曖昧にしないために、私はこれからも「ブロック要素」という便利な言葉をなるべく使わずに、「それはデフォルトのCSSのせいだよ」と、少し手間をかけて教え続けていきたいと思います。
遠回りに見えるかもしれませんが、それが結果として、どんな新しいCSSプロパティが出てきても動じない「強いエンジニア／デザイナー」を育てる近道だと信じているからです。
コメント