htmlのブロック要素とインライン要素
htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。
ブロック要素
ブロック要素はブロック＝塊＝外ワクとして扱う要素です。
特徴
- 箱として扱われる
- 兄弟要素を縦に配置する
- width（横幅）を指定しない場合横幅いっぱいになる
代表的なブロック要素
- div
- p
- ul
- li
- hタグ（h1,h2,h3,h4,h5,h6）
div、liは子要素にブロック要素を含むことができます。
hタグもブロック要素を含んでもいいですが、hタグは見出しとして使うためその性質上ブロック要素を含むことはあまりありません。
pはブロック要素を含むことができません。
ulは子要素にli以外を含めてはいけません。
ブロック要素
ブロック要素
ブロック要素
インライン要素
インライン要素は文章中で使用する要素であり、文章の一部であることを前提としている要素です。そのためこの要素の前後には文章をくっつけることができます。
特徴
- テキストと同様に扱われる
- 兄弟要素を横に配置する
- widthは指定できない（子要素の最小値になる）
代表的なインライン要素
- a
- span
- img
aタグにはブロック要素を含めることができます。
aタグ自身をCSSのdisplay:blockでブロック要素に変化させて使いましょう。
aタグの子孫にaタグを含めることはできません。
spanはブロック要素を含めることはできません。文字の装飾としてよく使います。
imgに子要素はありません。
前の文章span後ろの文章
その他の要素
tableやその子孫であるtr・tdはブロック要素でもインライン要素でもないためCSSが効くもの効かないものあります。よく使うhtmlタグのわりにCSSの扱いが難しいので注意しましょう。
なお、CSSのdisplayプロパティを使うとこれらの要素を変更できます。
