JSを学習するにあたって、HTML,CSSの復習をしたら、案外なんにもわかってなかった。

HTML,CSSを勉強する中、基礎の基礎、根本的な組み立て方考え方等を備忘録としてまとめました。この記事は随時更新予定。

画像の下に謎の余白が。。

要素imgにvertical-align:bottomを指定してあげるときれいに取り除けました。

ここら辺の謎の空白問題はググれば情報があふれ過ぎているので困ることはなさそう？

各パーツを組み立てる考え方について

例えば、このようなheaderを作るとき親となるheader内にさらにwrapperクラス(クラス名はなんでもいいがわかりやすいやつで)を作成する。wrapperの役割はheader内の要素をブロックとしてまとめることです。headerに限らず、セクションごとにラッパーで括るといいらしい。

塊でまとめるメリットとして、区切りが明確になり設定を弄りやすくなるためです。例えば、justify-contentで大まかな位置を設定できるようになる等。

wrapperで囲まなくてもいいっちゃいいけど保守的な観点で見ると囲んどいたほうが楽かなぁと。

要素を幅に合わせて縮小拡大させる

このgif画像のように表示させるには、親要素にwidth:100%を設定してあげます。

max-widthは画面に表示させる最大値を設定できます。これらを併用することで、どんなに親要素が大きくなろうと要素の幅を設定値で留めることができる等、柔軟に幅を調整できます。

基準となる命名規則に極力沿うようにする

基本的なことですがクラス名をつける際、命名とスタイルが一致してないとわかりずらくなったりするので、基本的なスタイルの命名は規則に沿って付けるようにすると◎。

当たり前ですがこういうのは現場とかによりますけど、とりあえずはここの記事を参考に基本合わせればいいかと。

https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

margin,padding等で、要素同士の間隔を調整する際のルール

親要素と子要素の間隔を調整したい場合は、paddingをとります。marginで取ってしまうと親要素からmargin分はみ出てしまうからです。

子要素同士の間隔を開けたい場合はmarginを使用します。パーツごとのかたまりで考えると使い分けが明確にわかると思います。

インライン要素はブロック要素で囲むようにする。

今はHTML5なのでそういった概念は存在しないそうです。

imgタグやaタグ等のインライン要素はブロック要素で囲むようにします。インライン要素は幅や高さを弄ることはできない。

flexboxと仲良くなろう

flexboxを理解することでいろいろできることが増えるので絶対覚えるべき事項です。

簡単に説明すると、親要素内の子要素群の位置や並びを設定できたりする便利なプロパティです。