CSS【 インラインとブロック 】 ~ inline、inline-block、block

Responsive Design Layout Software Concept

HTML5から「カテゴリによる分類とコンテンツ・モデル」という新たなルールが導入され、それ以前はHTML要素で行われていた「インライン要素かブロック要素か」という区別が、CSSの初期設定で行う「インライン扱いかブロック扱いか」という区別に移行しました。
今回は、各HTML要素が、CSSの初期設定でどのように分けられているのかをまとめたいと思います。

カテゴリによる分類とコンテンツ・モデルについては、以下のページもご覧下さい。
HTML5 【 カテゴリ 】 ~ 7つのカテゴリ
HTML5 【 コンテンツ・モデル 】 ~ 要素とカテゴリとコンテンツ・モデル

目次

1.inline、inline-block、block
2.インライン
3.インラインブロック
4.ブロック

1.inline、inline-block、block

HTML要素で行われていたインライン要素とブロック要素の指定がHTML5で廃止され、それに代わって、それらの指定をCSSのデフォルトスタイルとして行うことになりました。
そして、その指定は、CSSのdisplayプロパティを使って行います。

CSSのdisplayプロパティには、主に次のような値を指定します。

inline インラインボックスを生成する
block ブロックボックスを生成する
inline-block 表示はインラインボックスで、height、width、margin、paddingの指定ができる
table table要素のような表示になる
table-cell td要素のような表示になる

今回は、この中の、inline(インライン)、inline-block(インラインブロック)、block(ブロック)について見ていきます。

▲目次へ戻る

 

2.インライン

インラインレベルの要素は、要素の前後で改行されず、横に並ぶ性質の要素で、テキストに関わる要素です。

サイズは、テキストによって決まるため、CSSでwidthやheightの指定はできません。
marginは、左右のみ指定できます。上下は指定しても無視されます。

インラインレベルの要素は、ブラウザのデフォルトスタイルが display: inline(displayプロパティの値が inline)になっている要素です。

インラインレベルの要素

<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>

a要素とspan要素とmark要素を続けて書くと、次のような表示となります。

a要素span要素mark要素

ソースは次の通りです。

<a href=”#”>a要素</a><span>span要素</span><mark>mark要素</mark>

インラインの置換要素

インラインレベルの要素の中で、置換要素と言われる要素があります。

これは、中身が他の何かに置き換えられる要素で、例えばimg要素がこれにあたります。
中身が、テキストではなく画像等になり、他のファイルが入ってくるため、自然に幅や高さができてしまう要素です。

width属性やheight属性、またはCSSで、サイズの指定ができますが、改行はされず横に並んで表示されます。
これらは、文法上はインラインですが、表示はdisplay:inline-blockと同じようになります。

インラインの置換要素

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

置換要素以外のインラインレベルの要素は、非置換要素と言って、テキストに関わるインラインレベルの要素がこれにあたります。

置換要素のimg要素、canvas要素、object要素を続けて書くと、次のような表示となります。

ソースは次の通りです。

(CSS)
div#sample {
padding:0;
font-size:0}
div#sample img, div#sample object, div#sample canvas {
margin:5px 0 5px 5px;
vertical-align:bottom}
div#sample canvas {background:#FF99CC}

(HTML)
<div id=”sample”>
<img src=”img/img1.jpg” width=”80″ height=”80″>
<canvas width=”80″ height=”80″></canvas>
<object data=”img/img2.jpg” width=”80″ height=”80″></object>
</div>

親要素のpaddingが0のため、各要素の上下マージン効いていることがわかります。
通常、インラインは上下マージン効かないので、インラインの置換要素は、文法上ではインラインで、スタイルはインラインブロックと同じです。

▲目次へ戻る

 

3.インラインブロック

インラインブロックレベルの要素は、display: inline-blockがデフォルトスタイルになっている要素です。
インラインの置換要素と同様に、幅や高さは指定できるものの、横に並んで表示されます。

インラインブロックレベルの要素

<input>、<textarea>、<select>、<button> 他
インタラクティブ・コンテンツに分類される要素(フォームの部品の要素)です)

次のような書き方でselect要素を2つ続けて設置すると、幅や高さは指定できますが、横に並んで表示されます。

(CSS)
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;
font-size:12px}

(HTML)
<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>

select要素に、上下マージンを 0.5em ずつ指定していますが、 指定したマージンが表示に反映されます。
インラインは上下マージンが効かないので、ここが、ブロックレベルの性質も持っていると言われる点です。

▲目次へ戻る

 

4.ブロック

ブロックレベルの要素は、ブロック(固まり)になる要素です。

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

ブロックレベルの要素

ヘディング・コンテンツに分類される要素
<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要素を続けて書くと、要素ごとに改行されて縦に並んで表示されます。

p要素

div要素
  • li要素

ソースは次の通りです。

(CSS)
p,
div,
ul li {margin:0 0 0.7em 0; background:#e6cdd6; line-height:3em; padding:0 1em}

(HTML)
<p>p要素</p><div>div要素</div><ul><li>li要素</li></ul>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です