ブロックレベル要素とインライン要素について
9日目です。
CSSを学習している中で、「display: inline;」と指定しているものがあったのですが、詳しく説明してくれず「？？？」とずっとモヤモヤを抱えていました。
と言うわけでブロックレベル要素とインライン要素について調べました。
ブロックレベル要素
・<p></p>や<div></div>など、文章の骨組みとなる要素。body要素の直接の子要素として配置できる。
・開始タグと終了タグで囲ったものを1つのブロックにする。
・ブロックは横一杯に広がるため、次の要素がブロックレベル要素の下に配置されることで縦並びになる。
インライン要素
・<b></b>（囲まれた文字を太文字にする）やtextareaなど、文章中の一部の要素として扱われる要素。
・ブロックは横一杯には広がらないため、次の要素が横並びになる。
・一般的にブロック要素の中に入れて、効果を付け足すような使い方をする。
・インライン要素の中にブロック要素を入れることはできない。
※縦並びを横並びに変えたい場合
・CSSで「display: inline;」を与える
※インライン要素に大きさの変更を加えたい場合
・CSSで「display: inline-block;」を与える
（基本的にインライン要素ではheightやwidthで大きさの指定ができないため）
色々参考になりましたが、「横一杯に広がるか？」という判断基準を持てたのは良かったです。
ちなみにHTML5以降では上の概念はなくなり、要素が複数の「カテゴリー」に細かく分類され、「コンテンツモデル」によってマークアップのルールが決まるようになったそうです。代わりにブロックレベル要素は①、インライン要素は②と呼ばれることもあるそうです。
①フロー・コンテンツ
②フレージング・コンテンツ
ーーーーーーーーーーー
本日はHTML＆CSSが終わりました。
明日からまたチェリー本進めます。
