【プログラミング 初心者】ブロックレベル要素とインライン要素とは？

こんばんはー！

 

プログラミング学習中のmysinです爆　　笑

 

本日は、HTMLの基幹となる「ブロックレベル要素」と「インライン要素」についてまとめてみました。

 

【目次】

・ブロックレベル要素とは？

・インライン要素とは？

 

・ブロックレベル要素とは？

見出し・段落・表など文章を構成する基本の要素で、大きなかたまり(ブロック)のことを指します。

特徴

  • ブロックレベル要素は、必ず横幅いっぱいに要素が広がる（要素の内容が少なくても）
  • 次に作るブロックレベル要素は、作成したブロックレベル要素の下に配置される
  • cssで高さや横幅の指定を自由にすることがきる
  • もしも指定をしていなければ、画面の幅と同じ幅になる
 
＜ブロックレベル要素でよく使うタグ一覧＞

header：

ページのヘッダー部分を指します

footer：

ページのフッター部分を指します

section：

Webページのセクションを指します

div：

Webサイトのレイアウトを作成する際に使用します

table：

表を作成する際に使用します

p：

段落を表す時に使用します

li：

リストの項目を作成する際に使用します

h1~h6：

見出しを作成する際に使用します
 
 

・インライン要素とは？

ブロックレベル要素の中の一部分として認識される要素を指します。

特徴

  • インライン要素は、ブロックを作らずに囲われた要素へ効果を与える（文字の装飾）
  • ブロックレベル要素とは違い横幅いっぱいに広がらない
  • 次に作成するインライン要素は、作成したインライン要素の横に配置される。
＜インライン要素でよく使うタグ一覧＞

a：

リンクを作成する際に使用します

b：

文字を太文字にする際に使用します

img：

画像を埋め込む際に使用します

small：

フッターで著作権表記などの注釈を表示するために使用します

span：

文字の装飾に使われることが多く、div要素と同じで特定の意味を持たない
 
※さらに詳しく知りたい方は、こちらおすすめです。
 

【まとめ】

HTMLは、ブロック要素で積み重ねで成り立っているので、そのブロック要素の中に文言や数値などをインライン要素で埋めていく工程になっているみたいです。

ここの部分だけでもわかると、HTMLの理解度はグッと高まるみたいなので、毎日の反復練習でマスターしていきたいと思います。

 

ここまで読んで頂き有難うございました爆　　笑

また、明日もよろしくお願いします。