インラインブロックってなに?

●●●
もなか

こんにちは!もなか(@ruby443n)です。
ここでは学習したことを復習しやすいようにノートの代わりとしてまとめていきます

前回の学習はこちら

今回は前回までの学習で、ボタンを作る際に使用した

display: inline
display: block
display: inline-block

についてまとめてみようと思います。

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

まずブロックレベル要素とインライン要素の表示の違いからまとめてみます。

ブロックレベル要素

文書の骨組みとなる要素です。(h1等の見出し要素や、p、ul、ol、li、div、table など)
要素の前後に改行が入り、積み木をを積んでいくような表示になります。
高さや、幅の指定が可能です。

ブロック要素だよ

ブロック要素だよ

ブロック要素だよ

ブロック要素だよ

●●●
もなか

積み木のように縦に積まれていきます

インライン要素

テキストのとして使われる要素です。(a、span、strong など)
要素の前後には改行は入らず、テキスト状の表示になるので高さや幅の指定はできません。

p要素だよpの中にいるa要素だよpの中にいるspanだよpの中にいるstrong要素だよ

●●●
もなか

テキストと同じく右端までたどり着くと自動的に改行されます

インラインブロック要素

ブロックモデル要素とインライン要素の間を取ったようなものです。
要素の並び方はインライン要素的で、要素の中身はブロックレベル要素的な性質を持ちます。
(adobe xdを使用してざっと表に起こしました)

まとめ

インラインブロック要素についてまとめてみました。
Progateでボタンを作るレッスンの際に理解できなかった、なぜこうなるのか、どうしてそのタグを使うのかが理解できました。HDML&CSS初級では言われるがままにタグをうち、あっという間にレッスンが終わってしまうのでなかなか頭に入らず道場をやってみると全然クリアできない…という事が多々あったので、わからないことはそのままにせず少し立ち止まってきちんと理解してから進めたほうが私には合っていると思いました。

●●●
もなか

ひとつひとつ落ち着いて学んでいくのも大切ですね!なかなかまとめて学習時間をとれませんが焦らずにいきます。

お読みいただきありがとうございました!