HTML・CSS関連補足コミュ

1.6千文字の記事

掲示板へ

記事編集

ニコニコ大百科:HTMLタグ一覧 HTML・CSS関連補足

HTML・CSS関連補足項目一覧

ブロックレベル要素・インライン要素について

クリックするとジャンプします

ブロックレベル要素・インライン要素について

↑

HTMLの要素は大きくブロックレベル要素とインライン要素に分けられます。

ブロックレベル要素は主にページの構造を表すもの（p要素、h2要素、div要素など）です。

一方インライン要素は、文中の一部に意味づけや書式設定などをするもの（span要素、a要素など）です。

積分とは、数学の分野のひとつであり、微分と合わせて非常に応用分野が広い。

学校では「微分の逆バージョン」として教えられることが多いが
それが積分の定義なのではない。

上の図の青い線の要素がブロックレベル要素です。ブロックレベル要素の特徴は、親要素（その要素の1つ外側の要素、上の図では緑のボーダーの要素）の内容の幅全体に広がって配置されることです。したがってブロックレベル要素は基本的には横に並べる事が出来ません。横並べにしたい場合はCSSのfloatプロパティを使用してください。

また図の赤い線の要素がインライン要素です。インライン要素の幅・高さは内容にあわせて自動で調節され、width・heightを指定する事は出来ません。指定したい場合はCSSのdisplayプロパティを使用してください。

ブロックレベル要素の子要素には基本的にブロックレベル要素・インライン要素の両方をとることができますが、インライン要素の子要素にはインライン要素しかとれません。例えば、<span><p>～</p></span>という記述は誤りです。

ブロックレベル・インライン要素一覧
段落・見出しに関する要素
<p>	ブロックレベル要素子要素はインライン要素のみ	<h2>～<h6>	ブロックレベル要素子要素はインライン要素のみ
<br>	インライン要素子要素は空
テキストに関する要素
<b>	インライン要素	<i>	インライン要素
<sup>	インライン要素	<sub>	インライン要素
<tt>	インライン要素	<pre>	ブロックレベル要素子要素はインライン要素のみ
<code>	インライン要素	<del>	インライン要素
<ins>	インライン要素	<dfn>	インライン要素
引用に関する要素
<blockquote>	ブロックレベル要素子要素はブロックレベル要素のみ	<cite>	インライン要素
リンクに関する要素
<a>	インライン要素
画像・フレームに関する要素
<img>	インライン置換要素子要素は空 width・heightをとれる	<iframe>	インライン要素子要素はブロックレベル要素とインライン要素
リストに関する要素
<ul>	ブロックレベル要素子要素は特定の要素のみ	<ol>	ブロックレベル要素子要素は特定の要素のみ
<li>	子要素はブロックレベル要素とインライン要素	<dl>	ブロックレベル要素子要素は特定の要素のみ
<dd>	子要素はインライン要素のみ	<dt>	子要素はインライン要素のみ
テーブルに関する要素
<table>	ブロックレベル要素子要素は特定の要素のみ	<tr>	thead、tbody、tfootの子要素子要素は特定の要素のみ
<td>	子要素はブロックレベル要素とインライン要素	<th>	子要素はブロックレベル要素とインライン要素
<tbody>	tableの子要素子要素は特定の要素のみ	<thead>	tableの子要素子要素は特定の要素のみ
<tfoot>	tableの子要素子要素は特定の要素のみ	<caption>	tableの子要素子要素は特定の要素のみ
<colgroup>	tableの子要素子要素は特定の要素のみ	<col>	table、colgroupの子要素子要素は空
空要素
<span>	インライン要素	<div>	ブロックレベル要素
その他の要素
<hr>	ブロックレベル要素子要素は空