HTMLとCSSの基礎をすぐ忘れてしまうので、メモしたいと思います。
ブロック要素、インライン要素とは
ブロック要素
文字通りかたまりを表す要素のことで、箱をイメージするとわかりやすいと思います。
ブロック要素は高さや幅を指定することができます。
このブロック要素の大きさを調整して、ウェブサイトをおおまかな見た目を作っていきます。
例) divタグなど
インライン要素
文章の一部として扱われる要素で、主にブロック要素の中に入れて使用します。
インライン要素は高さや幅の指定ができないので、そのまま使うと狙い通りの配置にならずダサくなります。
なので、インライン要素は必ずブロック要素の中に入れて使うようにしましょう。
例) iタグ、aタグ、inputタグ、buttonタグ、pタグなど
なぜ要素を把握することが重要なのか
ブロック要素とインライン要素では大きくコーディングのやり方が変わってくるからです。
具体的にどう違うのかは次で説明します。
必ず、どちらの要素なのかを知った上でタグを使うようにしましょう。
要素ごとの配置方法
インライン要素の左右中央寄せ
インライン要素を親のブロック要素の幅に対して、左右中央寄せしたいときのCSSの記載です。
親ブロックに対してtext-align: centerを適用します。
（補足）
text-align: centerは一つ親のブロックに対して左右中央寄せされ、二つ以上親のブロックは無視されます。
インライン要素の上下中央寄せ
インライン要素を親のブロック要素の高さに対して、上下中央寄せしたいときのCSSの記載です。
親ブロックに対してline-height: ○○px（親ブロックのheightに合わせる）を適用します。
ブロック要素の左右中央寄せ
ブロック要素をその親ブロックの幅に対して、左右中央寄せしたいときのCSSの記載です。
こちらは２つ方法があります。
① 動かしたいブロック要素にmargin: 0 autoを適用します。
基本的にはこれを使ったほうがいいです。
② 動かしたいブロック要素の親要素にdisplay: flexとjustify-content: centerを適用します。
こちらはフレックスボックスと呼ばれる手法になり、
中央寄せ以外にも様々な配置を実現することができる便利な手法になります。
しかし、display: flexには要素を横並びするという役割もあるため、結果として意図した配置にならないことがあります。そういう意味では①の方法を使ったほうが事故が起こりにくいです。
ブロック要素の上下中央寄せ
ブロック要素をその親ブロックの高さに対して、上下中央寄せしたいときのCSSの記載です。
親ブロック要素に対してdisplay: flexとalign-items: centerを適用します。
まとめ
以上まとめますと、コーディングをする際は要素がブロック要素なのかインライン要素なのか把握しましょう。
その理由は、要素によって配置の仕方が変わってくるからということでした。
具体的には、下のようにCSSを記載しました。
- インライン要素の左右中央寄せ ⇒ 親要素にtext-align: center
- インライン要素の上下中央寄せ ⇒ 親要素にline-height: ○○px（親ブロックのheightに合わせる）
- ブロック要素の左右中央寄せ ⇒ 動かしたい要素にmargin: 0 auto
- ブロック要素の上下中央寄せ ⇒ 親要素にdisplay: flexとalign-items: center
もっといい方法はあると思いますが、ひとまずこのやり方で問題なくviewを作れているのでメモしました。
こうした方がいいだったり、アドバイス等ありましたらコメントくださると幸いです。
もっとコーディングに関しての知識が深まればまた更新したいと思います。
以上、ここまで読んでくださり、ありがとうございました。では！