未来電子テクノロジーでインターンをしているerika_zです。
HTMLとCSSの学習には、progateを利用しています。
HTML＆CSS中級編まででprogateだけでは理解しがたいことがいくつかありました。
そこで今回は、理解に苦しんだインライン要素・ブロック要素についてまとめます。
はじめに
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
そもそも何が分類されているか
要素が分類されています。
それぞれ人間の性格が違うのと同じように、要素もそれぞれ違う働きをします。
そこで、単純化するため要素は同じ働きをする者同士でひとまとめにされ、グループ化されています。
そのグループ名がインライン要素・ブロック要素です。
インライン要素
・グループのメンバー
a , em , img , input , span, strong, textareaなど
・グループの特徴
自分の体の大きさ分しか、横幅を取りません。一列横に座る場合、隣に座っても大丈夫です。
そのため、前後の要素はインライン要素の横に配置されます。
ブロック要素
・グループのメンバー
center, div, form, h1~h6, ol, ul, pなど
・グループの特徴
いくら体が小さくても、一列を占領します。ほかの要素は隣に座ることはできません。
そのため、ブロック要素の次に来る要素は下に配置されます。
まとめ
インライン要素・ブロック要素を擬人化してご紹介しました。
学習をはじめてすぐは、HTMLとCSSの仕組み完全に理解していないため、小さなことでも理解することが困難なことがあります。
どうしても理解できないときは、人物にたとえてみると理解できるかもしれません。