CSSコーディングの基本ルール

1. 鉄則：すべて「半角英数」で入力する

全角スペースは最大の敵

CSSが効かない原因の多くは、目に見えない「全角スペース」や「全角記号（：や；）」の混入です。コードを書く時は、常に半角入力モードであることを確認しましょう。

ブラウザにとっては1行で書いても同じですが、人間が見た時に理解しやすいよう、ブロックごとに改行して整理します。

? 読みづらい例（1行書き） .card{background:white;padding:10px;margin-bottom:20px;color:red;}

? 読みやすい例（推奨） .card {
  background: white;
  padding: 10px;
  margin-bottom: 20px;
  color: red;
}

上下左右の余白などは、まとめて1行で書くことができます。コードが短くなり、管理が楽になります。

個別指定	ショートハンド（短縮）
`margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px;`	`margin: 10px 20px;` （上下左右の順）
`border-width: 1px; border-style: solid; border-color: #ccc;`	`border: 1px solid #ccc;`

意味が伝わる名前に： .box1 ではなく .service-card のように役割で付けます。
単語の繋ぎ： .main_content (スネークケース) や .main-content (ケバブケース) が一般的ですが、Web制作ではハイフン（-）繋ぎが主流です。
数字から始めない： クラス名の先頭に数字を使うと、CSSが正しく認識されません。

「ここからヘッダー」「ここからメイン」など、区切りを入れておくと後からの修正が劇的に楽になります。

/* =========================================
Main Visual Section
========================================= */
.main-visual { ... }