初学者がHTML・CSSで気をつけること

まずは自分へのダメ出しを。

ちゃんと要素の大きさを意識してCSSの記述をしなさい！

CSSを適応するときに一番意識しなければいけないのは個人的には要素だと思います。

要素といっても個別の要素とかではなくて、インライン要素とブロックレベル要素という区分のことです。

インライン要素は指定しない限りは必要最小限の大きさである。

〈おはよう〉

〈〉内がインライン要素です。

対してブロックレベル要素は指定がなければ横に最大限広がる。

〈　　　　　おはよう　　　　　〉

〈〉内がブロックレベル要素です。

横幅にこれだけの差がでてしまいます。

また、インライン要素は連続すると横並びになり、ブロックレベル要素は連続すると縦並びになります。

このあたりを抑えていないとflexboxを使ったときに、想定通りのレイアウトになりません。

以下おまけ

連続したブロックレベル要素を横軸の中央に表示したいときには親要素に

display:flex;（要素を横並びにする）

flex-direction:column;（縦並びにする）

align-items:center;（縦軸の中央は配置）

といった記述をします。

何故横軸を動かしたいのに縦軸を動かす記述をするの？

と思ったそこのあなた！

紙に縦軸線Yと横軸線Xを描いてみましょう。

それを目の前で90度回転。

縦と横が入れ替わりましたね？

その状態こそがflex-direction:columnで縦並びにした状態です。

ではではまた次回