CSSの基本プロパティ12個：カードを作って使い分ける

プロパティ名だけを覚えるより、一枚のカードを作って値を変えると役割を区別できます。以下の12個を、文字・大きさ・余白・配置に分けて試します。

最初のカード

index.html（body内へ置くHTMLの断片）

<article class="card"><h2>制作ノート</h2><p>CSSの値を一つずつ変えて比較します。</p></article>

断片を2ファイルで試す場合は、index.htmlのhead内に<link rel="stylesheet" href="style.css">を入れます。以下の単独で動く全体の例なら、style.cssは不要です。

style.css（上のHTMLと組み合わせるCSS）

.card { box-sizing: border-box; width: min(100%, 360px); padding: 20px;
        margin: 24px auto; border: 1px solid #778899; background-color: #eef3f8;
        color: #17324d; font-size: 1rem; line-height: 1.8; }
.card h2 { font-size: 1.25rem; font-weight: 700; text-align: center; }

このカードを保存して試す

上の断片はHTMLとCSSに分かれています。初めて試す場合は、次の全体をindex.htmlに保存してブラウザで開いてください。淡い背景のカードに見出しと本文が表示されれば、値を変える準備ができています。

index.html（単独で動く全体の例・CSSはstyleタグ内）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>カードのCSSを変える</title>
  <style>
body { margin: 0; padding: 20px; font-family: sans-serif; line-height: 1.8; color: #17352e; }
.card { box-sizing: border-box; width: min(100%, 360px); padding: 20px;
        margin: 24px auto; border: 1px solid #778899; background-color: #eef3f8;
        color: #17324d; font-size: 1rem; line-height: 1.8; }
.card h2 { font-size: 1.25rem; font-weight: 700; text-align: center; }
  </style>
</head>
<body>
<article class="card"><h2>制作ノート</h2><p>CSSの値を一つずつ変えて比較します。</p></article>

</body>
</html>

1. padding:20pxだけを8pxに変え、枠と文字の距離が縮むことを確認します。
2. 元へ戻し、.cardのwidthを240pxに変えます。カード自体が狭くなり、文章の折り返しが増えます。
3. 元へ戻し、本文を二文追加します。固定heightがないので、文章に合わせてカードが縦へ伸びます。

毎回、保存してからブラウザを再読み込みします。この練習を終えてから次の表を読むと、プロパティ名と変化した場所を対応させられます。

12個の役割

間違えやすい三つの区別

paddingとmargin：カードの枠と文字の距離はpadding、カードと他の要素の距離はmarginです。marginの背景はカードの色になりません。

widthとbox-sizing：content-boxではwidthにpaddingとborderを足した分が枠までの幅です。この例はborder-boxなので、widthに枠まで含みます。

text-alignとボックスの中央配置：text-alignはブロックコンテナ内のインライン内容を配置します。カード自体を中央に置く指定ではありません。通常のブロックなら幅を制限して左右のmarginをautoにします。

高さの固定は最後に考える

本文を入れるカードへ固定heightを指定すると、長い文章や拡大表示で内容がはみ出す場合があります。必要な理由がなければ内容に合わせた高さを使い、最低限の高さが必要なときはmin-heightを検討します。

displayを変える前に

flexを指定する親と、並べる子を区別します。段落一つへdisplay:flexを付けても、隣のカードまで自動的に横並びになるわけではありません。親要素の構造を確認してから指定します。

余白の計算はボックスモデル、配置は中央揃え、複数要素の例はブログカードで試せます。

参考にした公式資料

• MDN：CSSリファレンス