今回は、HTMLを学習する上で理解必須の「ブロックレベル要素とインライン要素」についてまとめたいと思います。
よし
ブロックレベル要素とインライン要素は、最初にHTMLを学習していて「？」が出てくるところかな。
この記事の内容
ブロックレベル要素とは
Webデザインの「箱」となる要素です。
ブロックレベル要素の例としては、以下のものが挙げられます。
- <h1></h1>
- <p></p>
- <div></div>
インライン要素とは
Webデザインを構成する「箱」にはならず、主に文字を修飾するのに使われる要素です。
インライン要素の例としては、以下のものが挙げられます。
- <a></a> （リンクを生成する要素）
- <b></b>（太字にする要素）
- <span></span>（囲った部分をインライン要素化する要素）
具体例
ブロックレベル要素は「箱」？、そしてインライン要素は文字修飾する？となる方もいると思うので、ここでは具体例を使って説明していきます。
例えば、bodyタグに以下のような記述をしたとします。
<body>
<h1>これは見出しです</h1>
<p>１つ目の段落です</p>
<p>2つ目の段落です</p>
<p>3つ目の段落です</p>
</body>
そうすると、下のような画面が表示されます。
よし
ここでは分かりやすいように、CSSで箱に色をつけているよ！
前述した通り、h1タグとpタグはブロックレベル要素であるため、積み木のように上から重なっていますね。
横いっぱいまで「箱」が広がっていることに注目しましょう。
次にインライン要素を見ていきます。
以下のように、インライン要素であるb要素を追記しました。
<body>
<h1>これは見出しです</h1>
<p>１つ目の段落です</p>
<p>2つ目の段落です</p>
<p>3つ目の段落です</p>
<b>1つ目のb要素です</b>
<b>2つ目のb要素です</b>
</body>
これを見てみると、下のように表示されます。
インライン要素は積み木にならず、文字を修飾するのに使われる要素であることから、横に並んでいくことが分かりますね。
それではもう一つ例を挙げてみます。
インライン要素であるb要素が、pタグの子要素である場合を見てみましょう。
<body>
<h1>これは見出しです</h1>
<p>１つ目の段落です</p>
<p>2つ目の段落です<b>子要素です</b></p>
<p>3つ目の段落です</p>
<b>1つ目のb要素です</b>
<b>2つ目のb要素です</b>
</body>
見て分かる通り、b要素は横に並んでいることが分かりますね。
今回はHTMLを学習する上で理解必須の「ブロックレベル要素とインライン要素」についてまとめてみました。
ブロックレベル要素とインライン要素の違いは、Webデザインをする上で非常に重要になってくるポイントでもあるので、今回を機に理解を深めていってください。
