CSSでよくある記述まとめ

@charset “UTF-8”;

@charset "UTF-8";

この表記によりhtmlやcssがどの文字コードで書かれているかをブラウザが判断（文字化けを防ぐ）
→現在はブラウザ自動で判断することから、不要論もあります。

カスタムプロパティ（CSS変数）

ハイフン2つ「–」を頭文字につけて定義します

:root {
    --primary-color: #45CCC4;
    --red: #EB4E45;
    --blue: #0158A8;
    --bg-color: #ECFCFB;
    --text-color: #333;
    --breakpoint-sm: 576px;
}

変数の呼び出しは、var(--変数名) 関数を使用します

画像の大きさの最適化

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

※親要素より横幅が大きい場合のみ縮小され、高さも自動で縮小され、歪みません

※画像の上下に余白（line-height分の余白）ができない