33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

ブロック要素とインライン要素について

本日の教材動画はこちら 

 CSSを取り扱う際に大事な要素となる、ブロック要素とインライン要素の違いについて勉強していきます。

<ブロック要素>とは

ブロック要素とは、その名の通りブロック単位で扱われる要素のこと。pタグやhタグ、tableタグなどがブロック要素となります。簡単な見分け方はタグの前後が改行されるかどうかで判断ができる。

<インライン要素>とは

インライン要素はブロック要素とは逆に、文章の一部だけを取り扱う要素のことを指します。aタグやspanタグ、imgがそれに該当し、タグ囲った部分など一部だけが適応されるのが特徴です。

CSSを取り扱う上で把握しておきたい違い

ブロック要素はブロック単位、インライン要素は文章単位。わかりやすく色付けをすると

 

ブロック要素とインライン要素の違い

ブロック要素とインライン要素の違い

 

ブロック要素は途中で文で終わっても画面端まで色を付けるのに対し、インライン要素は指定の部分にだけかかります。ブロック要素は指定箇所を四角く囲むイメージ。インライン要素は指定箇所をマーカーで印をつけるようなイメージですかね!

 

 ちなみに上記ページのソースは下記のようになっております。

今回勉強した内容

今回勉強した内容

 

外部CSSファイルの中身

外部CSSファイルの中身