※この記事は、プログラミング学習サイト「Progate」の学習内容に関するものです。
こんばんは、aogiriです！
日に日に寒さも厳しくなってきている感がありますね･･･
仕事柄、24時前後に帰宅することになるのですが、
帰ってきたときの部屋の寒さよ･･･❄
37歳のおっさんには沁みます、えぇ･･･😢
さてさて、そんなことはさておき！
レイアウトの整え方あれこれ・第2回 です！
レイアウトのコードをしっかり押さえておかないとマズイので、
明日の自分のために書き残しておきます。
◎ ブロック要素（ブロックレベル要素）・ インライン要素 ・ インラインブロック要素
⑴ ブロック要素（ブロックレベル要素）
（例）見出しタグ（div・p・h1 など）、header・main・footer など
・イメージ ･･･ その1行全体で1つの長方形
・要素の並び方 → 縦向き
・width 、height の指定 → 可
・margin 、padding の調整 → 可
・text-align 、vertical-align の指定 → テキストにのみ反映
⑵ インライン要素
（例）a・span・img など
・イメージ ･･･ その1行のうちの一部分
・要素の並び方 → 横向き ※親要素の端で改行される
・width 、height の指定 → 不可
・margin 、padding の調整 → 左右のみ可 ※上下を指定すると表示崩れ
・text-align 、vertical-align の指定 → 親要素に対して指定すると反映
⑶ インラインブロック要素
（例）a・span・img など
・イメージ ･･･ ブロック要素とインライン要素の良いとこ取り
・要素の並び方 → 横向き ※親要素の端で改行される
・width 、height の指定 → 可
・margin 、padding の調整 → 可
・text-align 、vertical-align の指定 → 親要素に対して指定すると反映
自分なりのイメージで書いたけれど、伝わるかな･･･💦
伝わらなければ、「まだ説明できるだけの理解には至っていない」だと思って、
さらに精進したいと思います。
今日はここまで！
ご覧いただき、ありがとうございました！