横並びリストに空白ができるのを仕様の観点から理解する

横並びリストを作成する際、HTMLの書き方によっては謎の空白ができてしまい、
この解決方法はよく知られています。私のblogでも紹介しています。
しかし、根本的にどうしてそうなるのかっていうのは、なかなか理解しがたい。

空白ができるのは、改行が空白に変換されてしまうらしいということはわかるのですが、なぜコメントを記述したら空白がなくなるのは何故なのか?というところまで行き着いていませんでいた。

この原理をhxxk.jpの真琴さんが説明していました。

hxxk.jp - 「リストの横並びで不思議な空白ができるアレ、をスマートに解決する」を読んでの自分用の再確認

プログラマの人は文書構造とかに強いのかもしれないけど、Webデザイナーの人ってこういう仕様的なことにうといよね?(私だけですか?)

真琴さんの話はいつもすごくためになるのですが、とっても難しい(笑)

ので、個人的に噛み砕いてみました。

(X)HTMLはDOMツリーで表すことができます。DOMというのは、Document Object Model:文書オブジェクトモデルのことです。

普段、私たちはホームページを作る際、(X)HTMLタグによって記述していますが、ブラウザはHTMLタグ(マークアップ言語)を一度DOMツリーに構成するらしいです。

この際、ブラウザによっては、改行や改行、タブ、スペースといったものを「テキストノード」、つまりテキスト(この場合は空白の半角1文字分)と同等なものと認識してしまうらしいです。この空のテキスト要素を「ホワイトスペースノード」と言います。

このあたりは、以下の記事がわかりやすい。

第2回 ブラウザからHTMLはどう見えているかを理解しよう ~ドキュメントツリー~:ITpro

そしてコメントの場合は「コメントノード」となり、コメント内であればHTMLコード上改行していても、DOM上では改行がテキストノードと認識されることはありません。あくまで、コメント内ではすべてのものがコメントとして扱われるということですね。

だから、

<ul><!--
--><li><a href="#">MENU1</a></li><!--
--><li><a href="#">MENU2</a></li><!--
--><li><a href="#">MENU3</a></li><!--
--><li><a href="#">MENU4</a></li><!--
--><li><a href="#">MENU5</a></li><!--
--></ul>

という書き方をすると、

UL
	#comment:
	LI
		A href="#"
			#text: MENU1
	#comment:
	LI
		A href="#"
			#text: MENU2
	#comment:
	LI
		A href="#"
			#text: MENU3
	#comment:
	LI
		A href="#"
			#text: MENU4
	#comment:
	LI
		A href="#"
			#text: MENU5
	#comment:

となり、テキストノードは現れません。

一方で、

<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

と、普段のように記述すると、

UL
	#text:
	LI
		A href="#"
			#text: MENU1
	#text:
	LI
		A href="#"
			#text: MENU2
	#text:
	LI
		A href="#"
			#text: MENU3
	#text:
	LI
		A href="#"
			#text: MENU4
	#text:
	LI
		A href="#"
			#text: MENU5
	#text:

先ほどコメントノードだったところがテキストノードになっています。

要は、ulの直下の子要素がテキストノードにならないような書き方をすれば、謎の空白は表示されないということなのですね。

投稿日:2009年4月17日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー

2018:01:07:09:29:36