HTMLは要素の積み重ね

HTMLは入れ子構造の要素が積み重なって表示されます。

基本的にはHTML文書で先に記述したものほど

表示されます。

でも、下に要素が重ならず、横にくることもあります。

この違いはなんでしょうか？

`ブロックレベル要素`と`インライン要素`

要素の種類よって、積み重なり方が違います。

ざっくり説明すると

もう少し詳しく見ていきましょう。

ブロックレベル要素は以下のような特徴があります。

※各要素の背景に色をつけています

See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.

インライン要素は以下のような特徴があります。

箱（ブロックレベル要素）の中に入れる中身
テキストの長さにあわせて横幅が広がる
- 幅や高さを設定できない
- 余白をうまく設定できない
- 【例外】img要素やinput要素など一部は幅・高さ・余白を設定できる

※内側に余白をもつ箱に入れてみます

「横に並ぶ箱やリストはつくれないの？」
と思った方もいるかもしれません。

そんな時は、CSSでdisplayプロパティの値をinline-blockと設定し、

インライン要素をインラインブロック要素に変更します。

インラインブロック要素は以下のような特徴があります。

つまり、ブロックレベル要素とインライン要素の性質を併せもちます。

See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.

他にも、Flexboxを利用して箱を自由自在に並び替えることができます。

よく使われる機能ですので、気になった方は調べてみてくださいね。

さいごまでお読みいただき、ありがとうございます！

この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。

また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー！

これからもどうぞよろしくお願いします