CSSセレクタと基本プロパティまとめ

CSSとは？何ができるの？

CSSはWebページの見た目（色・文字サイズ・配置など）を指定するためのスタイルシート言語です。

CSSとは

概要HTMLで作られたWebページにデザイン（色、レイアウト、フォントなど）を加えるためのスタイルシート言語です。「見出しを青くしたい」「ボタンを中央に配置したい」「文字を大きくしたい」といった視覚的な調整は、すべてCSSで指定します。例え...

tstyle-take.com

2025.04.25

CSSセレクタとは？

セレクタは「どのHTML要素にスタイルを適用するか」を指定します。

• タグセレクタ（例：p、h1など）
• クラスセレクタ（例：.box）
• IDセレクタ（例：#main-title）
• 子孫・直下セレクタ（例：.nav li、ul > li）

p {
  color: blue;
}

.box {
  padding: 10px;
}

#main-title {
  font-size: 24px;
}

CSSの基本プロパティ一覧

最初に覚えたい基本プロパティをカテゴリ別に紹介します。

文字に関するプロパティ

• color: 文字の色
• font-size: 文字のサイズ
• text-align: 文字の配置（中央・右寄せなど）

余白・配置に関するプロパティ

• margin: 外側の余白
• padding: 内側の余白
• display: ブロック・インラインなどの表示方式

ボックスに関するプロパティ

• border: 枠線の指定
• width / height: 幅・高さの指定
• background-color: 背景色

.card {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  width: 300px;
}

セレクタとプロパティを組み合わせて使う【基本パターン】

HTML

<div class="card">
  <h2>タイトル</h2>
  <p>ここに説明が入ります。</p>
</div>

CSS

.card {
  background-color: #fff;
  padding: 15px;
}

.card h2 {
  font-size: 20px;
}