【HTML･CSS】ブロック要素とインライン要素：Webマスターへの道～覇王への道程～：So-netブログ

	ブログをはじめるログイン

【Twitter Bootstrap】変..｜Google・Microsoft・Yah.. ブログトップ

【HTML･CSS】ブロック要素とインライン要素　[HTML・CSS] [編集]

HTMLにはブロック要素とインライン要素という2つの要素があります。名前はよく聞くけれどなんだかよくわからないという人も多いんじゃないでしょうか。そこで、HTMLの基本であるこの2つの要素についておさらいしてみたいと思います。

以下はHTML 4.01 仕様書邦訳概説からの抜粋です。ブロックレベル要素はブロック要素、行内要素はインライン要素と読み替えてください。

HTML 4.01 仕様書邦訳概説

7.5.3 ブロックレベル要素と行内要素

HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。この違いは、幾つかの点から明らかにされる。

内容モデル

一般に、ブロックレベル要素は行内要素及び他のブロックレベル要素を内容に取り得る。一般に、行内要素は単なるデータ及び他の行内要素を内容に取り得る。この構造的な性質の違いから、ブロック要素は行内要素よりも「大きい」構造を生成する、と言える。

整形

デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。空白、line break、ブロック整形について、より詳しくはテキストの項目を参照されたい。

これまで仕様書を読んだことのない人は「なんのこっちゃ？」といった感じでしょう。まず、注意して欲しいのはBODY要素に出現しうるものは必ずブロック要素だという記述です。つまり、BODY要素(<body>～</body>)の直下にはブロック要素しか書いちゃいけないんです。

代表的なブロック要素として、hx要素、p要素があります。ですので、以下の様なHTML文書は仕様に沿った文書といえます。

逆にインライン要素の代表としては、a要素やimg要素があります。BODY要素の直下は必ずブロック要素でないといけないので、以下の様なHTML文書は仕様に沿っていないと言えます。

こんなふうに書いていた人いませんか？？これでは仕様に沿ってないHTML文書になってしまいます。じゃあ、どうすればいいのか。答えはカンタン。ブロック要素に入れてやればいいんです。

こうすればBODY要素の直下にはブロック要素しかなくなりますね。

次に注目したいのが、内容モデルの項。ブロック要素にはインライン要素とブロック要素を入れられる、インライン要素にはデータ(テキストや画像など)とインライン要素を入れられる、とあります。

これには疑問もあるかもしれませんが、ざっくり言うと、以下のようなのはダメだよということです。

本文

この例では、インライン要素のem要素内にブロック要素のp要素が入っています。これは仕様にそってないねってことになっちゃいます。じゃあ、どうすればいいのか？以下のようにします。

本文

こうすれば、ブロック要素のp要素の中にインライン要素のem要素が入っていますので、仕様にそっていますね。ちなみに、以下の様なのは問題外です。

本文

見ての通り、タグでの囲い込みがめちゃくちゃです。これはそもそもダメです。

さて、最後の整形について。これはカンタンに言うと、hx要素ってCSSで指定しないと太文字かつ大文字になるよね？って話です。

これはかつていらぬ悪習を生みました。hxで囲ったら太文字になるなら、太文字にしたいのは全部hxで囲えばいんじゃね！？って話です。これは有名な話なので今でもやっている人はほとんどいないでしょう。

しかし、hx要素を太文字として表示すると決めているのはブラウザです。ブラウザによって、太文字にならなかったり、大文字にならなかったり、逆にhxは赤色にするという変わったブラウザもあるかもしれません。しかし、これはHTMLの仕様では特に決めておらず、太文字だろうが赤色だろうが構わないのです。つまり、HTML仕様で太文字にしなさいと決めているわけではないのです。

何より、hx要素とは、ここが見出しですよ、と伝えるためのモノです。けして、太文字にしてください、という指示を出しているわけではないということをキモに命じておきましょう。