はじめに
本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。
HTML5のブロックレベル要素とインライン要素について
ブロックレベル要素とインライン要素の分類はHTML5から廃止
見出しに記載したとおり、HTML５からブロックレベル要素とインライン要素という分類は廃止されております。
代わりに以下の7項目で分類されるようになり、従来のインライン要素に該当する要素でも、body要素の直下に配置することができるようになりました。
HTML5の7カテゴリー
フロートコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
組み込みコンテンツ
メタデータコンテンツ
見出しコンテンツ
セクショニングコンテンツ
HTML5からインラインとブロックレベルという分類が廃止されたとはいえ、CSS3ではインラインとブロックレベルという考えが残っているため、無視することはできません。
そこで、以下にインライン要素とブロックレベル要素についてまとめます。
インライン要素
インライン要素とは、文章の一部として含むことのできる要素のことで、以下の特徴があります。
インライン要素
横幅と高さの指定
不可能
横幅の初期値
内容で決まる
高さの初期値
内容で決まる
他の要素との並び方
改行が入らない（横並び）
余白のつき方
上下に特殊なつき方をする
インライン要素一覧
<a>
<abbr>
<acronym>
<applet>
<b>
<basefont>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<font>
<i>
<iframe>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<textarea>
<tt>
<u>
<var>
ブロックレベル要素
ブロックレベル要素とは、インライン要素のまとまった単位をいい、以下の特徴があります。
ブロックレベル要素
横幅と高さの指定
可能
横幅の初期値
親要素と同じ
高さの初期値
内容で決まる
他の要素との並び方
改行が入る（縦並び）
余白のつき方
デフォルトでつく場合がある
ブロックレベル要素一覧
<address>
<blockquote>
<center>
<dir>
<div>
<dl>
<fieldset>
<form>
<h1>-<h6>
<hr>
<isindex>
<menu>
<noframes>
<noscript>
<ol>
<p>
<pre>
<table>
<ul>
まとめ
インライン要素とブロックレベル要素の特徴は以下のとおりです。
インライン要素
ブロックレベル要素
横幅と高さの指定
不可能
可能
横幅の初期値
内容で決まる
親要素と同じ
高さの初期値
内容で決まる
内容で決まる
他の要素との並び方
改行が入らない（横並び）
改行が入る（縦並び）
余白のつき方
上下に特殊なつき方をする
デフォルトでつく場合がある
↧