CSSの基本プロパティ解説｜初心者向けにわかりやすく解説

Web制作に欠かせないのが CSS（Cascading Style Sheets） です。
HTMLで作った骨組みに、デザインや装飾を加える役割を持っています。

この記事では、初心者がまず覚えておくべき CSSの基本プロパティ をわかりやすく解説します。

💡 HTMLの基本をまだおさえていない方は、先にこちらの記事を読んでおくと理解がスムーズです。
👉 HTMLの基本構文まとめ

CSSとは？簡単なおさらい

HTMLが「文書の構造」を定義する言語だとすると、CSSは「見た目を整える言語」です。

例えば、文字の色やサイズ、余白、背景色、レイアウトなどを指定できます。

<p class="text">こんにちは、CSS！</p>

.text {
  color: blue;     /* 文字色 */
  font-size: 20px; /* 文字サイズ */
}

上記の例では、HTMLの要素に対してCSSを適用し、文字を青く・大きくしています。

よく使う基本プロパティ一覧

1. 色や背景を指定するプロパティ

• color：文字色を指定
• background-color：背景色を指定

p {
  color: #333;
  background-color: #f5f5f5;
}

2. フォント関連のプロパティ

• font-size：文字の大きさ
• font-weight：文字の太さ（bold / normal）
• font-family：フォントの種類

h1 {
  font-size: 24px;
  font-weight: bold;
  font-family: "Arial", sans-serif;
}

3. 余白を調整するプロパティ

• margin：外側の余白
• padding：内側の余白

div {
  margin: 20px;   /* 要素の外側に余白 */
  padding: 10px;  /* 要素の内側に余白 */
}

4. 枠線を指定するプロパティ

• border：線の太さ・種類・色をまとめて指定可能

.box {
  border: 2px solid #000; /* 黒い実線の枠線 */
}

5. レイアウトに関わるプロパティ

• width / height：要素のサイズ
• display：表示形式（block, inline, flexなど）
• position：配置方法（static, relative, absolute, fixed）

.container {
  width: 300px;
  height: 200px;
  display: flex;
}

実際に組み合わせてみよう

<div class="card">
  <h2>CSSの基本</h2>
  <p>プロパティを理解すると、自由にデザインできます。</p>
</div>

.card {
  width: 300px;
  padding: 20px;
  margin: 20px auto;
  background-color: #fafafa;
  border: 1px solid #ccc;
  font-size: 16px;
}

上記の例では、カード風のボックスが作れます。

内部リンクで理解を深める

CSSを学ぶには、HTMLの理解が欠かせません。以下の記事も併せて読むことで、よりスムーズに学べます。

• 👉 HTMLの基本構文まとめ
• 👉 HTMLのaタグの使い方まとめ

まとめ

今回は、CSSの基本プロパティについて解説しました。

• 色や背景を変える（color, background-color）
• フォントを調整する（font-size, font-weight, font-family）
• 余白を整える（margin, padding）
• 枠線を設定する（border）
• レイアウトを作る（width, height, display, position）

まずはこれらをしっかり理解すれば、Webページの見た目を大きくコントロールできます。

次のステップとしては、より効率的にレイアウトを組む「Flexbox」や「Grid」も学んでいくと良いですよ。