HTMLは「ページの骨組み」を作る言語ですが、
CSSは“見た目を整える”ための言語 です。
CSSを使うことで、
- 文字の色
- 背景
- 余白
- レイアウト
などを自由にデザインできるようになります。
この記事では、CSSの基礎中の基礎である
セレクタ・プロパティ・色指定・背景設定 をわかりやすく解説していきます。
CSSの書き方（基本構文）
まずは CSS の基本構文から。
セレクタ {
プロパティ: 値;
}例：
h1 {
color: blue;
font-size: 24px;
}これは
「h1タグの文字色を青に、サイズを24pxにする」 という意味です。
CSS の3つの書き方（初心者はここ重要）
同じCSSでも、書き方が3パターンあります。
① インラインCSS（タグ内に直接書く）
<p style="color:red;">赤い文字です。</p>→ 手軽だけど、管理が大変になるので基本は非推奨。
② 内部CSS（head内に書く）
<head>
<style>
p {
color: red;
}
</style>
</head>→ 小規模ページに向く。
③ 外部CSS（別ファイルに書く）← 一番おすすめ！
<link rel="stylesheet" href="style.css">→ 大規模サイト・ブログの基本。
大体はこの外部CSSとして書くことのほうが無難ですね。
セレクタとは？（CSSの“どこを”変えるのか）
セレクタとは、「どの要素にCSSを適用するか」 を指定する部分です。
① タグセレクタ（最も基本）
p {
color: green;
}→ ページ中のすべての <p> タグに適用。
② クラスセレクタ（使いやすさNo.1）
.text-red {
color: red;
}HTML：
<p class="text-red">赤文字</p>→ クラスは複数の要素で再利用できて便利。
③ IDセレクタ（1ページ1回だけ）
#main-title {
font-size: 30px;
}HTML：
<h1 id="main-title">タイトル</h1>→ 一意の要素に使う。
④ 子孫セレクタ（入れ子の中を指定）
nav ul li a {
color: blue;
}→ 「nav の中の ul の中の li の中の a」に適用。
⑤ グループセレクタ（まとめて指定）
h1, h2, h3 {
font-family: sans-serif;
}（実務ポイント）クラスセレクタが基本
Web制作では ほとんどクラス を使います。
- 再利用しやすい
- 柔軟にスタイルを当てられる
- 他のスタイルと衝突しにくい
IDも使うことはありますが、
最初はまずクラスセレクタを使っていきながら慣れていけばいいでしょう！
CSSで色を指定する方法（4種類）
① 色名（簡単だけど種類が少ない）
color: red;② HEX（16進数）← 実務で最も多い
color: #3498db;③ RGB（光の3原色）
color: rgb(255, 0, 0);④ RGBA（透明度つき）
color: rgba(0, 0, 0, 0.5);→ 半透明にしたいときに超便利。
VSCodeなどで色を付ける際に、
四角い色の部分に矢印を当てると下記のような画像になると思います。
このカラーパレットを使って自由自在に色を選択することもできます。
またこの方式で色を決めた場合は「RGB（光の三原色）」で表記されます。
背景（background）の基本
背景の変更などは様々な方法があります。
実際に書いて、どのような変化をするのか動かしながら覚えていきましょう！
① 背景色（background-color）
body {
background-color: #f5f5f5;
}② 背景画像（background-image）
.hero {
background-image: url("img/bg.jpg");
}urlの中には自身の保存した画像のパスを記載してください。
画像はプロジェクトのフォルダ内に配置していく必要があります。
③ 背景の繰り返し（repeat / no-repeat）
background-repeat: no-repeat;④ 背景位置（background-position）
background-position: center;⑤ 背景サイズ（cover / contain）
background-size: cover;→ 画像を画面いっぱいに広げたいときに使う。
よくある背景デザイン例
下記コード利用の際は、使用するHTMLの要素に「class=””」を使って記載することをお忘れなく。
① ヒーローセクション風（ホームページの最上部）
.hero {
background-image: url("img/hero.jpg");
background-size: cover;
background-position: center;
color: white;
padding: 80px 20px;
}② ライトグレーの背景（情報系サイトの定番）
.section-bg {
background-color: #f7f7f7;
padding: 40px 20px;
}実際にページにCSSを当ててみよう
HTML：
<h1 class="title">CSS入門</h1>
<p class="lead">セレクタと色指定を学んでいきましょう。</p>CSS：
.title {
color: #3498db;
font-size: 28px;
}
.lead {
color: #555;
background-color: #f0f0f0;
padding: 10px;
}この記事のまとめ
- CSSは見た目を整えるための言語
- セレクタは「どの部分にCSSを当てるか」
- 基本は クラスセレクタ を使う
- 色指定は HEX / RGB / RGBA を覚える
- 背景カラー、背景画像は超よく使う
CSSの基礎をおさえると
次の記事（⑧：文字装飾・フォント設定）がスムーズに理解できます。
ではでは！次回！：HTML/CSS入門⑧ 文字の大きさやフォントの変更
コメント