HTMLのブロックレベル要素とインライン要素の違いを徹底解説
ブロックレベル要素インラインレベル要素の違い
HTMLとCSSを勉強していく上では基礎が一番大事です。
何事にも土台なくして得るものはありません。
最も重要な基礎。ブロックレベル要素とインライン要素について学んでいきましょう。
そもそも要素とは
< >で囲まれた文字列のことを要素と言います。
これらが集まることによりHTMLを構成しています。
HTMLでは文字列にどんな意味があるか要素を使って書き込まなくてはいけません。
要素を使って文字列に意味を与えることをマークアップといいます
主なブロックレベル要素とインライン要素
ブロックレベル要素
<address>、<blockquote>、<center>、<div>、<dl>、<ul><fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、
インライン要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strong>、<sub>、<sup>、、<tt>、<u>、<var>
主にこういった要素がありますがいま全部覚える必要はありません。
徐々に必要なもの、頻繁に使うものだけ覚えておきましょう。
ブロックレベル要素
開始タグと終了タグで囲み一つのブロックにするのがブロックレベル要素です。
<p>あしたはいい天気だ</p>
あしたはいい天気だ
インライン要素
要素の中に入る要素です。
要素の中に入り効果を付け足すことが出来ます。
<p>あしたはいい<b>天気</b>だ</p>
あしたはいい天気だ
このように<b>によって
あしたはいい天気だ
だけだったのが、天気が太文字に変わっています。
出来ないこと
インライン要素の中にブロックレベル要素を入れることは出来ません。
◯ブロックレベル要素の中にブロックレベル要素
◯ブロックレベル要素の中にインライン要素
◯インライン要素の中にインライン要素
✗インライン要素の中にブロックレベル要素
インライン要素にwidthやheight等で大きさ指定ができない
summary
全ての要素を暗記しようとする必要はありません。
使っていく中で自分が必要としているものを覚えていく。
ブロックレベル要素とインライン要素の区別もついてきます。
焦らずじっくり勉強していきましょう
