[HTML] ソース上の改行・タブ・空白(スペース)の扱い――インライン要素とブロック要素

2013 年 4 月 18 日 Categories: CSS, HTML |

【2013年04月24日】inline-blockについて加筆
【2013年04月18日】大幅に加筆・修正

空白文字の扱い

原則的に、HTMLのソース上の改行・タブ、そして半角の空白文字(半角スペース)は、基本的にそれらがいくつあってもひとつの半角スペースにまとめられる。

# 全角スペースは空白文字ではなく、HTMLに限らず元からひとつの文字。

<span>			  [< - タブや空白][改行->]
		表示する   文字列			
</span>

よって、ソースの整形(フォーマット)で以下のようにすると、意図しない空白ができてしまう。

<span>
	<span>
		表示する
	</span>
	<span>
		文字列
	</span>
</span>

ただし、インライン要素以外の要素(ブロックレベル要素など)では、開始タグと終了タグそれぞれの前後の改行・タブ・半角スペースは、すべて無視される

<div>			  [< - タブや空白][改行->]
		表示する   文字列			
</div>

よって、インライン要素でなければ、以下のようにソースを整形しても問題ない。

<div>
	<div>
		表示する
	</div>
	<div>
		文字列
	</div>
</div>

改行・タブ・半角スペースをソースのまま表示したい場合は、pre要素を使う。

<pre>			  [< - タブや空白][改行->]
		表示する   文字列			
</pre>
			  [< - タブや空白][改行->]
		表示する   文字列			

なお、これらはあくまでHTMLの仕様であって、XMLではすべてそのまま文字として扱われる。

XMLベースのXHTMLでは、基本的に整形用途で余計な改行・タブ・空白を入れないほうがいい。

インライン要素と空白文字

上記のとおり、インライン要素のタグの前後にある改行・タブ・空白は省略されることがないので、ソースで以下のように書くと表示上では半角のスペースがそれぞれの間にひとつできてしまう。

<span>abc</span>
<span>bcd</span>
<span>cde</span>
対策1:終了タグの一部を改行する
<span>abc</span
><span>bcd</span
><span>cde</span>

見た目は不格好だが、仕様上問題はない。

対策2:コメントを利用
<span>abc</span><!--
--><span>bcd</span><!--
--><span>cde</span>
対策3:CSSでブロック要素にし、「float: left;」を指定

下記で説明するように、CSSのdisplayプロパティでインライン要素をブロック要素に、またその逆にすることもできる。

block、またはinline-blockを指定し、「float: left;」を設定する。

ただし、この場合では次の要素で「clear: both;」を指定しないと、以降の表示が意図しないものになってしまう。

注意点

上記のようなことをしなくても、素直にインラインで(一行で)書けば問題ないのだが、長くなると可読性が悪くなる。

他に、CSSでmarginにマイナス値を指定して見た目上スペースを消す方法もあるが、そもそも半角スペースをどれだけの幅で表示するかは、実装しだいであったり、CSSのletter-spacingの値やフォントサイズなどによって左右されたりするので、おすすめできない。

インライン要素とブロック要素とそれ以外

HTMLの各要素は、インライン要素・ブロック要素・それ以外の要素の3つに分けられる。

インライン要素

その名のとおり、テキストの一行内における部分的な要素のようなもの。

幅や高さの概念はなく、CSSでdisplayプロパティを変更しないかぎり、内部(子孫に)にブロック要素を持てない。

一覧

例:span b

<span>ここ</span>は<b>一行</b>です。

ブロックレベル要素(ブロック要素)

テキストでいえば、段落。

通常、親要素の横幅いっぱいまで幅を持ち、複数記述した場合、垂直方向に並べて表示される。

要素によって、内部に持てる他の要素が異なる。

一覧

ちなみに、bodyはブロック要素ではない

例:div p

CSSでの変更

displayプロパティを変更することで、任意の要素をインライン要素にしたりブロック要素にしたりできる。

inline

対象要素をインライン要素にする。

よって、内部(子孫)にブロック要素を持っていると、表示がおかしくなる。

block

対象要素をブロック要素にする。

inline-block

インライン要素とブロック要素の両方の性質を合わせ持つ。

width、heightを指定できるインライン要素のようなもの。

インライン要素と同じで、対象タグの前後にある空白文字は省略されない。ただし、内部のテキスト・要素の前後にある空白文字は、ブロック要素と同じで省略される

ここはややこしいので注意しよう。

【2012年07月05日】公開