ほんっとにはじめての HTML5 と CSS3

HTML4以前や XHTML1では、HTML要素をスタイルで分類して、インライン要素 とブロックレベル要素 に区別していました。

この分類方法がHTML5から廃止になり、カテゴリー による分類と コンテンツ・モデル（要素の中にどのカテゴリーの要素を入れてよいか）という規則が新しくできました。

HTML5 の カテゴリー、コンテンツ・モデル についてはこちらをご覧ください。
[37] HTML5要素の「カテゴリー」を見てみよう
[38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
[38-2] 「コンテンツ・モデル」一覧

...んですが、（ここからが本題w）
メタデータ・コンテンツ以外のどの要素にも、インライン や ブロックなどのブラウザのデフォルトスタイルがあるのは、HTML5以降も変わりません。

要素のデフォルトスタイルがインラインかブロック かが、CSSでスタイル指定するときにとても大事です。
例えば、インラインの性質を持っていると横に並び、ブロックレベルだと縦に並ぶ なんていう知識が無いと、スムーズにレイアウトできないもんね。

というわけで今回は、各HTML要素がブラウザのデフォルトスタイルで、どのように分けられているのか見てみましょう。

1. インライン・インラインブロック・ブロックレベル
   1. インラインレベルの要素
   2. インラインの置換要素と非置換要素
   3. インラインブロックの要素
   4. ブロックレベルの要素
2. インラインとブロックレベルのスタイル指定比較
3. displayプロパティで性質を入れ替える

インライン・インラインブロック・ブロック

メタデータ・コンテンツ（<title> や<link> <style> <meta> <script>など）以外の要素（= ウィンドウに表示される要素）には、ブラウザのデフォルトスタイルの面で、
●インラインのもの（display プロパティの値が inline）
●インラインとブロックの性質を併せ持つもの（display プロパティの値が inline-block）
●ブロックのもの（display プロパティの値が block）
があります。
（他にもテーブル関連やリスト関連の要素は、特有のデフォルトスタイルがあります。これは後日 displayプロパティのときに詳細を。）

今回はインライン・インラインブロック・ブロックについて、順に見ていきましょう。

インラインレベルの要素

要素の前後で改行されず、横に並ぶ性質の要素で、「テキスト」に関わる要素です。
サイズ（幅や高さ）はテキストによって決まるので、CSSの width や height で指定できません。
margin は左右には指定できますが上下は指定しても無視されるのが特徴。

これらの要素はブラウザデフォルトスタイルが display: inline（displayプロパティの値が inline）になっている要素です。（displayプロパティについては後日まとめます）

インラインの性質を持つ要素
a（中身がフレージング・コンテンツのとき） span　ruby　sub　sup　strong　em　mark　b　i　small　br　u　s　ins　del cite　q　abbr　dfn　code　kbd　samp　var　bdo　label （フレージング・コンテンツに分類される要素はインラインですね）

サンプルを見てみましょう。要素どうしが改行されずに横に並びますね。

HTMLはこちら。

<div id="sample1">
<span>span要素</span><a href="#">a要素</a><mark>mark要素</mark>
</div>

CSSはこちら。

div#sample1 {padding:1em; border:solid 1px #ccc;}
div#sample1 span {border:dotted 1px #3cf; padding:0.2em 0.5em; margin:0.5em;}
div#sample1 a {color:#06f; text-decoration:underline; margin:0.5em;}
div#sample1 mark {background:#ff6; padding:1em;}

インラインの置換要素と非置換要素

インラインの要素の中でも置換要素と呼ばれるものは、ちょっと変わり種です。

これは、中身がほかのモノに置き換えられる要素で、その代表格が <img>要素。
中身がテキストでなく画像など他のファイルが入るので、自然に幅や高さができてしまう要素です。
他には、フォームの入力用の要素も置換インライン要素です。

width・height のサイズ指定ができるけど、ボックスレベルのように改行はされず横に並んじゃいます。
これらは文法上はインラインですが、表示は display:inline-block と同じようになります。

インラインの置換要素（replaced elements）
img　iframe　video　embed　audio　canvas　object　input(type="image")

それ以外のインライン要素は非置換要素（non-replaced elements）と言って、さきほどの「テキスト」に関わるインラインレベルの要素がコレです。

インラインの非置換要素（non-replaced elements）
★さきほど「インラインの性質を持つ要素」として上げたものです★ a（中身がフレージング・コンテンツのとき） span　ruby　sub　sup　strong　em　mark　b　i　small　br　u　s　ins　del cite　q　abbr　dfn　code　kbd　samp　var　bdo　label （フレージング・コンテンツに分類される要素）

置換要素のサンプルを見てみましょう。
img, object, canvas要素を連続して置いています。
それぞれ 幅と高さを指定できてブロックになりますが、横に並んでいますね。

HTMLはこちら。

<div id="sample2">
<img src="img/img1.jpg" width="80" height="80">
<object data="img/img2.jpg" width="80" height="80"></object>
<canvas id="canvas1" width="80" height="80"></canvas>
</div>

CSSはこちら。

div#sample2 {
	border:solid 1px #ccc;
	padding:0;
	font-size:0}
div#sample2 img, div#sample2 object, div#sample2 canvas {
	margin:5px 0 5px 5px;
	vertical-align:bottom}
div#sample2 canvas {margin-right:5px; background:#c9dbff}

各要素の上下マージンが、ちゃんと効いていることがわかりますね。（親のpaddingは0です）
インラインは上下マージン効かないので、置換要素は「文法上ではインラインだが、スタイルはインラインブロック」ということがわかります。

インラインブロックの要素

これは display: inline-block がデフォルトスタイルになっている要素ですね。（displayプロパティについては後日詳細）
さきほどのインラインレベルの置換要素と同じく、幅や高さはあるけど横に並ぶ性質です。

インラインブロックの性質を持つ要素（抜粋）
input　textarea　select　button （インタラクティブ・コンテンツに分類される要素（フォームの部品の要素）ですね）

サンプルです。
<select>要素を2つ連続して置いています。幅や高さは指定できるけど、横に並びます。

HTMLはこちら。

<div id="sample3">
<select>
  <option value="">選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>
<select>
  <option value="">選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>
</div>

CSSはこちら。

div#sample3 {border:solid 1px #ccc; padding:0}
div#sample3 select {
	height:40px;
	width:40%;
	margin:.5em 0 .5em .5em;
	padding:0 1em;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border:1px solid #c1d5fd;
	background:url(img/arw_undr.png) no-repeat right 0.5em center #f2f4ff;
	font-size:12px}

2つの同じ<select>要素に、上下マージンを 0.5em ずつ指定しています（5行目）が、 上下のマージンが効いていることがわかりますね。（親のpaddingは0です）
これでブロックレベルの性質も持っていることがわかります。（インラインは上下マージン効かない）

ブロックレベルの要素

最後のブロックレベルはわかりやすいですね。ブロック（固まり）になる要素です。
ブロックレベルの要素が並ぶと、要素の前後で自動的に改行されるので、上から下へ縦に並んでいきます。CSSで幅や高さやマージンも普通に指定できます。
これらはデフォルトスタイルが display: block になっている要素です。

ブロックレベルの性質を持つ要素（抜粋）
●ヘディング・コンテンツに分類される要素 h1〜h6 ●セクショニング・コンテンツに分類される要素 section　article　aside　nav ●フロー・コンテンツで他のカテゴリに含まれないもの header　footer　div　p　address　pre　figure　hr　blockquote　 ul　ol　dl　li　table　form　fieldset ●このほか、html要素、body要素もブロックレベルです。

サンプルを見てみましょう。要素ごとに改行されて縦に並びますね。

HTMLはこちら。

<div id="sample4">
<p>p要素</p><div>div要素</div><ul><li>li要素</li></ul>
</div>

HTMLはこちら。

div#sample4 {padding:1em; border:solid 1px #ccc}
div#sample4 p,
div#sample4 div,
div#sample4 ul li {margin:0 0 0.7em 0; background:#e6cdd6; line-height:3em; padding:0 1em}
div#sample4 ul,
div#sample4 ul li {margin:0}
div#sample4 ul li {list-style-position:inside}

インラインとブロックレベルのスタイル指定比較

	ブロックレベル （インラインブロックも同じ）	インライン
width	OK	NG
height	OK	NG
margin	OK	左右OK 上下は無視される
padding	OK	OK ＊注
border	OK	OK ＊注
background	OK	OK ＊注

＊注
インラインの場合、マージンの上下が指定できず、親要素の line-height によって上下の空間が決まっています。
そのため、paddingが上下の隣接する行にかぶってしまうこともあるので、border、background の指定には注意が必要です。

上の比較表の「width, height, margin, padding, border」はボックスを構成するスタイルです。
ボックスモデルについては、次回説明します。

displayプロパティで性質を入れ替える

インラインの要素は、幅や高さの指定はできず、左右のマージンも使えない...のですが、
インラインの要素に display: block を指定すれば、ブロックレベルのように幅や高さもマージンも効くようになります。
逆に、ブロックレベルの要素に display: inline を指定すれば、インラインの性質になり、横に並んで幅や高さは中身に依存するようになります。
同じく、インラインの要素でもブロックレベルの要素でも、display: inline-block を指定すればインラインブロックの性質になります。

このほか display: list-item、display: table など、displayプロパティにはたくさんの値があって、とっても便利。displayプロパティで操作すれば、自由に要素の性質を変えられるんですね。

displayプロパティについては、後日詳細な記事をアップする予定です。
displayプロパティの値についてはこちら↓でも触れています。
display:table-cell の親に display:table を指定しないと意味無い│＊Web Design 覚え書き＊

サンプルを見てみましょう。
いちばん最後の <a>要素 だけ display: block にしています。

HTMLはこちら。

<div id="sample5">
<a href="#pt3">ただの&lt;a&gt;要素</a>│
<a href="#pt3">ただの&lt;a&gt;要素</a>
<a href="#pt3" id="s5block">これはdisplay: block</a>
</div>

CSSはこちら。

div#sample5 {border:solid 1px #ccc; padding:1em}
div#sample5 a#s5block {
	display:block;
	background:#ffc;
	border:solid 1px #fc9;
	width:50%;
	margin:0.5em 0 0;
	padding:0.7em;
	text-align:center}

display: block を指定しただけで、改行され、ブロックレベルになっていますね。
リンクのテキスト以外の部分（ボックスの背景の部分）でも、クリックでリンクが効くようになっています。このほうがユーザビリティは高いですね。

もう１つサンプルです。
これもよく使う <li>要素（ブロックレベル）に display: inline-block を指定した例。
display: inline-block を指定すると横に並びます。メニューでよく使うスタイル指定です。

• List1
• List2
• List3

HTMLはこちら。

<ul id="sample6">
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
<li><a href="#">List3</a></li>
</ul>

CSSはこちら。

ul#sample6 {border:solid 1px #ccc; margin:0; padding:0; font-size:0; line-height:0}
ul#sample6 li {
	display:inline-block;
	list-style:none;
	margin:5px 0 5px 5px}
ul#sample6 li:last-child {margin-right:5px}
ul#sample6 li a {
	display:block; /*a要素もインラインなので、widthを指定するためにブロックレベルにします*/
	width:3em;
	background:#69F;
	border-radius: 5px;
	text-align:center;
	color: #fff;
	font-weight:bold;
	font-size:12px;
	line-height:24px;
	padding:0 5px;
	transition:all 0.2s ease-out;}
ul#sample6 li a:hover {background:#a9c237}

次回予告

次回は、ボックスモデルについて。
今回も出てきた width, height, padding, border, margin はボックス構造のためのプロパティです。
CSSのボックスモデルを理解して、これらのプロパティを自由に使いこなそう♪

関連記事

• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）
• 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
• 【11-2】marginの auto という値の「？」を解決しておこう
• 【11-1】marginと marginのショートハンド
• 【10】ボックスモデル（margin, padding, border を使いこなそう）
• 【9】HTML要素の インラインレベル・ブロックレベル について
• 【8】CSSの「色」と「透明度」の指定
• 【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
• 【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
• 【6】CSSって具体的に何ができる？（プロパティについてざっくりと）
• 【5】CSSの値の継承（Inheritance）のルール
• 【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
• 【3】id とか classって何？（セレクタの「種類」を知っておこう）