More than 3 years have passed since last update.

ブロック要素とインライン要素を攻略

Posted at 2020-11-20

#目的
学習中、理解に時間を要した要素について言語化をすることで理解を深めたい。
今回はブロックレベル要素とインライン要素の違いについて。
HTMLにおいて、<body>〜</body>の中で定義される要素の多くは、ブロックレベル要素とインライン要素に大別される。

#ブロックレベル要素とインライン要素の考え方

###ブロックレベル要素
見出し・段落・表など、ウェブサイト上で「かたまり（ブロック）¹」として扱われる要素。
ブラウザでも一つのかたまりとして扱われ、一般的なブラウザでは前後に改行が入る。
このブロックを積木のように積み上げることで、ウェブサイトを構築していく。

よく使うタグ例
<h1></h1>　見出しタグ
<p></p>　段落タグ
<div></div>　グループ化のための汎用タグ

###インライン要素
ブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。
<strong>要素のように、段落のなかの一部を強調するような装飾の役割もある。

よく使うタグ例
<a></a>　リンクを作るタグ
<b></b>　文字を強調するタグ

#使いかた
基本的にはブロックレベル要素を用いて、積木を積む要領でウェブサイトの骨格を作っていく。
そのブロックの中に、インライン要素などを用いて肉付け、装飾をしていく。