こんにちは、ほーりーです。

ありがたいことにHP制作のご相談を受け、

コーダーとしてPCに張り付く生活をさせていただくことも多くなりました。

まだまだ駆け出し、勉強中の僕(生涯勉強ですが...)

初歩的なことから固めていく必要があるな、、、と基礎の大切さを感じます。

とうことで今回は僕自身の備忘録的な感じで

HTMLにおけるdisplayプロパティについてまとめてみようと思います！

情報が古かったらごめんなさい、考え方は合っているかと。

今回まとめるdisplayプロパティは

block要素,inline要素です。

ブロック要素はp,div,h1~h6タグなどの初期値で、

行全体で1単位にまとまっており、縦に並びます。

なので下記のようにソースを書くと...

ブロックレベル要素は

縦に並びます。

⬆︎上記のようになりました！

またタグに指定をすることで

幅・高さを変更することが可能です!

また、要素をセンタリングするときによく使用するtext-align,vertical-alignは

ブロック要素では効果がありません。

センタリングしたいときは

margin:0 auto;などを使用します

インライン要素はspan、a、imgタグなどの初期値で、

主にブロック要素の中で使われます。

またインライン要素は縦並びにならず横並びになるので

spanタグを使うと 1列で複数の色を 指定できたりしますw

インライン要素は横のpadding,margin調整は可能ですが

縦の調整はできません。厳密には縦のpaddingはできるんですが

こんな感じで
ちょっと変な感じになります。

インライン要素の中央揃えは、親要素へのtext-align(縦揃えはvertical-align)で可能です。

なので画像(imgタグ)を中央に揃えたいときは下記で行けます。

ざっくりこんな感じでのまとめでした。

実際に使わないとわからないものがいっぱいなのでとにかく作って覚えています。

inline-blockやflexなどもっといっぱいあるのですがまた別の機会に。

それではー