【9】HTML要素の インラインレベル・ブロックレベル について

最終更新日:2017年09月23日  (初回投稿日:2015年09月15日)

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

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

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

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

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

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

本日のINDEX
  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
フレージング・コンテンツに分類される要素はインラインですね)

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

span要素a要素mark要素
<div id="sample1">
<span>span要素</span><a href="#">a要素</a><mark>mark要素</mark>
</div>
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属性でサイズ指定ができたり、CSSでもサイズ指定ができるけど、ボックスレベルのように改行はされず横に並んじゃいます。
これらは文法上はインラインですが、表示は display:inline-block と同じようになります。

インラインの置換要素(replaced elements)
img area audio canvas embed iframe menu object video など
エンベッディド・コンテンツの要素(外部コンテンツを組み込む要素)がほとんどですね)

それ以外のインライン要素は非置換要素(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要素を連続して置いています。
それぞれ 幅と高さを指定できてブロックになりますが、横に並んでいますね。

<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>
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です)
インラインは上下マージン効かないので、置換要素は「文法上ではインラインだが、スタイルはインラインブロック」ということがわかります。

ちょっとメモ
親要素 div に font-size:0 を指定しています(4行目)。
これは、子要素のまわりにスペースができてしまうのを解除しています。
親の font-size, line-height の値は継承するので、どうしても子要素の周りにスペースが空いてしまいます。例え子要素がブロックレベルでも同じです。
解除するには 親要素に「font-size:0」を。
それでも変なスペースができる場合は親に「line-height:0」も追加するとウマクいくはず。
この場合、子要素にテキストがある場合は、子要素に改めてfont-sizeとline-heightを指定し直すのを忘れずに。

値の継承については、こちらをご覧ください。
【5】CSSの値の継承(Inheritance)のルール

ちなみに、親に font-size:0 を指定しなければこんなかんじ。

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

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

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

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

<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>
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です)
これでブロックレベルの性質も持っていることがわかります。(インラインは上下マージン効かない

ちょっとメモ
<select>要素のCSSで「appearance: none」を指定しています。(7〜9行目)
appearanceプロパティの値を「none」にすると、フォーム関連の要素のブラウザデフォルトのスタイルが解除されて、見た目をカスタマイズできます。
一時は廃止されたプロパティですが、今のドラフトを見るとまた復活しそうです。
値は「auto」と「none」だけになるようです。
参考資料:CSS Basic User Interface Module Level4__8.Form Control Styling

ブロックレベルの要素

最後のブロックレベルはわかりやすいですね。ブロック(固まり)になる要素です。
ブロックレベルの要素が並ぶと、要素の前後で自動的に改行されるので、上から下へ縦に並んでいきます。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要素もブロックレベルです。

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

p要素

div要素
  • li要素
<div id="sample4">
<p>p要素</p><div>div要素</div><ul><li>li要素</li></ul>
</div>
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が上下の隣接する行にかぶってしまうこともあるので、borderbackground の指定には注意が必要です。

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

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

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

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

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

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

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

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

  • List1
  • List2
  • List3
<ul id="sample6">
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
<li><a href="#">List3</a></li>
</ul>
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のボックスモデルを理解して、これらのプロパティを自由に使いこなそう♪

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.