コーディングやらかし防止リスト！！

HTML

1．CSSのリンク設定

<link rel="stylesheet" href="css/style.css">
hrefのリンクに「css/」をつけること！！！

2．ヘッダーロゴにはaタグ

ロゴもリンクにしておいたらgood！

3．セクション名は共通仕様

見出し(セクション名)は共通しようとして同じCSSにする。
つまり、クラス名も共通のものをつける。class="section-title"で統一！！

4．idとclassは重複注意！！！

同じタグに「id」と「class」が指定されている時、「class」のデザインの方が下に記述されていても「id」のデザインが優先されます。

https://chepirare.com/html/id-class/

コンテンツ幅はclassでつけるので、idと一緒につけない！！
独立したdivを使うこと！！！

5．並べるもの＝リスト

pでもimgでも、並べるものはリストとしてulタグなどで囲む！！

6．CSSを子につけるべきものには直接クラスを付与すること！

例えば省略しようとしてHTMLでimgにクラスを付けず、CSSでdiv img{ }にしたとする。imgに装飾しようとしてもうまくいかないことがある。
直接の子要素に装飾したい場合はちゃんと子にクラスをつけよう（当たり前のことかもしれんが…）。

CSS

1．コンテンツ幅

container、innerなどで全体やコンテンツの共通の幅を決める。
{
width: 100%;　　　幅いっぱいに広がる
max-width: ●px;　コンテンツの最大幅を決める（これ以上は広がらない）
margin: 0 auto;　　中央よせ
padding: 0 ●px　　●px分余白を確保（仮に画面幅＝ or ＜コンテンツ最大幅になった時、左右に余白を残すため。）
}

2．imgのwidth

個別に設定する必要がなければ、冒頭の共通設定で
img { max-width: 100%; }
にすればOK！

3．中身の高さ揃わない時

例えばpとimgを同じラインで揃えたいのに、ガタついてるなど。
そういう時はpとimgの行の高さを揃える。
line-height: 同じ値;

4．aタグに余白がつかない！！

そんな時はインラインブロックに変更だ！

5．position: absolute;は高さがなくなる！！

子要素にposition: absolute;を使うと高さがなくなる。
→ heightを指定して高さを確保すること！
しないと、下の要素が繰り上がって上に表示される。

6．レスポンシブ対応の横幅

例えばwidth:30％が３つ横に並んでいるとして、レスポンシブで縦並びにする時、widthを100％にすること！
画面いっぱいに広がらないと悩むことが多いので、忘れないように！！

7．子の装飾

例えばよくimgやpを、一個上で囲うdivやliに装飾をつけちゃうことがあるけど、imgそのものに装飾をつけること！高さとか幅とか。
うまく機能しない時はだいたいこれが原因。

8．background-imageが表示されない！！

画像のファイル名にスペースがある場合は、url()の中でさらに【””】か【’’】で括らなければならない！！
https://wp-p.info/tpl_rep.php?cat=css-biginner&fl=r19　

または階層を表す　.　の個数が間違っている
または親に高さと幅を指定していないと映らない！
またはバックグラウンドイメージの要素の縦と横の幅が足りないと全部映らない（要素がある分しか背景も見えない）！

9.どうしても上下左右中央にさらない

素直にフレックスボックスに頼ろう。
まずフレックボックスを頼もう。

10.ヘッダーでposition:fixed;すると下の内容と重なる！！

下の要素に空白を作るのが良い。
ただしmargin-topで上にだけ空白をつけると、要素の高さそのものが増えて全体が画面に綺麗に収まらなくなることも。
→シンプルだが、要素の上下にpaddingをつけて、要素の内側に余白をつけるようにすると、全体の幅が変わらずヘッダーと重ならなくなる！！！
そしてtop: 0;を忘れずに！！　上部に余白なしでに固定する。

position:sticky;という技もあり

11.last-childが効かない！！！

そんな時は:last-of-typeをやってみよう。
last-childは指定した要素がHTMLの親要素の中で一番最後の要素でないと効かない。
:last-of-typeは同じ要素の中で一番最後であれば有効となる！
親の中で違う要素が複数混じっていても大丈夫。

firstも同様。
https://zenn.dev/harryduck/articles/ff45823c0320a1

12.フォントを画面幅の遷移と連動して拡大縮小させたい！！

font-size: clamp();を使おう！
指定した最小値と最大値の間で拡大縮小してくれる！！
真ん中の推奨値はvwにすること！（これで大小変化する）
例：font-size: clamp(16px, 1.6vw, 30px);
https://kasumiblog.org/css-font-size-min-max-responsive/　

13.どうにもこうにも縦中央にならない！！！

以下参照！
https://web-de-asobo.net/2021/11/29/vertical-center/

14.ボタンのボーダーを消して押した感出したいけど上手くいかない！

ボーダーボトムを消すだけでなく、marginをボーダー分プラスして位置を下げること！！

15.横並びにならない！フレックスは親がなくて使えない！！

インラインブロックにして！！！