CSS（Cascading Style Sheets）は、HTMLで作った構造に対して「見た目」や「配置」を指定するデザイン指示書です。色を塗ったり、文字の大きさを整えたり、レイアウトを組んだりする役割を担います。
最新のCSSでは、FlexboxやGridといった機能により、複雑な整列も数行で記述できます。また、スマホとPCでデザインを切り替える「レスポンシブデザイン」や、JavaScriptを使わない滑らかなアニメーションも実現可能です。
HTMLが「何があるか」を伝え、CSSが「どう見せるか」を磨くことで、ユーザーに伝わるWebサイトが完成します。
CSSの基本構文：セレクタ・プロパティ・値
CSSは「セレクタ」「プロパティ」「値」の3要素で構成されます。セレクタ { プロパティ : 値 ; } という形式で記述します。
- セレクタ：スタイルを適用するHTML要素を指定する
- プロパティ：何を変えるかを指定する（例：color、font-size）
- 値：どう変えるかを指定する（例：#333、24px）
主なプロパティの種類
| カテゴリ | プロパティ例 |
|---|---|
| 文字（テキスト） | color、font-size、font-weight、text-align |
| 背景 | background-color、background-image |
| ボックスモデル | width、height、margin、padding、border |
| 配置・レイアウト | display、position、top/bottom/left/right |
記述例
h1 {
color: #333; /* 文字色をグレーに */
font-size: 24px; /* 文字サイズを24pxに */
margin-bottom: 10px; /* 下側の余白を10pxに */
}値の終わりには必ず ;（セミコロン）を付けます。/* */ で囲まれた部分はコメントとして扱われ、ブラウザには反映されません。
色の値は、カラー名・16進数（#000000）・RGB/RGBA（255,0,0）・HSL/HSLA（0,100%,50%）など複数の形式で指定できます。
CSSの適用（記述）方法
CSSをHTMLに適用する方法は3種類あります。
① 外部ファイル（推奨）
最も一般的な方法です。style.css という別ファイルにまとめて記述し、HTMLの <head> 内で読み込みます。
<link rel="stylesheet" media="all" type="text/css" href="style.css" />/* style.css */
h1 {
color: #333;
}② 内部スタイル（<style>タグ）
HTMLファイルの <head> 内に <style>...</style> を記述します。
<style>
h1 {
color: #333;
}
</style>③ インラインスタイル
HTMLタグに直接 style="..." の形式で記述します。スコープが狭く、管理しにくいため原則として推奨しません。
<h1 style="color: #333;">タイトル</h1>クラスとIDをつける
HTMLタグには class="クラス名" や id="id名" を自由に設定でき、CSSでそれぞれを狙い撃ちしてスタイルを当てられます。
| class | id | |
|---|---|---|
| CSSの書き方 | .クラス名 { }（ドット） |
#id名 { }（シャープ） |
| 同一ページでの重複 | 複数設置OK | 1ページに1つのみ |
| 用途 | 使い回すパーツ全般 | ページ固有の要素・アンカーリンク |
名前に使える文字は英数字・-（ハイフン）・_（アンダーバー）のみで、先頭に数字は使えません。
記述例
<!-- HTML -->
<div id="container">
<h1 class="logo">Hello World</h1>
<p>こんにちは。練習用のページです。</p>
</div>/* CSS */
#container {
width: 1000px;
margin: 0 auto;
}
.logo {
font-size: 40px;
}
#container p {
color: #666;
font-size: 15px;
}命名のポイント
クラス名・id名は、誰が見ても役割が伝わる名前を付けることが大切です。実務現場でのよくある命名例を挙げます。
container/wrapper：コンテンツ全体の外枠inner：内側の余白調整用の箱title/heading：見出しlist：リスト全体、item：各リスト項目
aaa や b01 のような意味のない名前は、後から修正するときに混乱の原因になります。英語で役割をそのまま名前にする習慣をつけましょう。
セレクタの指定方法まとめ
要素セレクタ
特定のタグすべてに共通のデザインを当てます。サイト全体のベーススタイルに使います。
p {
color: #333; /* すべてのpタグがグレーになる */
}クラスセレクタ・IDセレクタ
クラスはドット（.）、IDはシャープ（#）を先頭につけます。
.btn {
background-color: orange;
}
#container {
width: 1000px;
}子孫セレクタ（スペース区切り）
半角スペースで区切ることで、特定の要素の中にある要素だけを狙い撃ちできます。
/* headerタグの中にあるaタグだけを白くする */
header a {
color: white;
}
/* #containerの中のdivの中の.btnだけ背景を赤にする */
#container div .btn {
background-color: red;
}複数指定（カンマ区切り）
複数の要素に同じデザインをまとめて当てられます。
h1, h2, h3 {
margin-bottom: 20px;
}要素＋クラスの組み合わせ
div.box {
color: red;
}
p.box {
color: white;
}CSSのカスケードと優先順位
CSSの「C」はCascading（カスケーディング）、つまり「滝のように上から下へ流れる」という意味です。同じ要素・プロパティを複数回指定した場合、後から書かれた方が優先されます。
/* 1. 最初は赤を指定 */
p {
color: red;
}
/* 2. 後から青を指定（こちらが上書きされる） */
p {
color: blue;
}詳細度（Specificity）
「後から書いた方が強い」ルールに加えて、より具体的に書かれた方が強いというルールがあります。これを「詳細度」と呼びます。
| 強さ | セレクタの種類 | 例 |
|---|---|---|
| 強い | IDセレクタ | #container |
| 中くらい | クラスセレクタ | .btn |
| 弱い | 要素セレクタ | p、h1 |
例えば p { color: red; } と .text-blue { color: blue; } が書かれていた場合、p の方が後に書かれていても、クラスセレクタである .text-blue が優先されます。
!important の使い方
!important を付けると、カスケードや詳細度のルールを無視して強制的に優先させることができます。
p {
color: red !important; /* どんな強い指定があっても赤になる */
}ただし、!important は以下のような場面以外ではなるべく使わないのがプロの現場でのマナーです。
- 外部ライブラリやプラグインのスタイルをどうしても上書きしたいとき
.is-hidden { display: none !important; }のような強力なユーティリティクラス- サイトが崩れていて緊急対応が必要なとき
効率的なCSS設計のコツ
クラスの「重ね着」（マルチクラス）
1つのタグに複数のクラスをスペース区切りで設定できます。「共通の見た目」と「差分だけ」を分けて管理できるため、コードの重複を減らせます。
<button class="btn btn-red">ボタン</button>
<button class="btn btn-blue">ボタン</button>.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
font-size: 15px;
color: #fff;
}
.btn-red { background-color: red; }
.btn-blue { background-color: blue; }共通クラスと専用クラスの使い分け
実務では以下の2種類を使い分けるとコードが整理しやすくなります。
- 共通クラス（ユーティリティ）：
.text-center、.mt-20、.btnなど、サイト内で使い回す汎用ルール。一箇所直せばサイト全体に反映される。 - 専用クラス（コンポーネント・固有）：
.main-visual-title、.footer-addressなど、その場所でしか使わない特別なルール。他の場所に影響を与えずに微調整できる。
CSSファイルの推奨構成順
/* 1. サイト全体のベース設定 */
p {
color: #333;
line-height: 1.6;
}
/* 2. 共通パーツの設定 */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
/* 3. 特定の場所の微調整 */
.hero-area .btn {
font-size: 24px;
padding: 20px 40px;
}まとめ
CSSの基本は「セレクタ・プロパティ・値」の3つの組み合わせです。記述方法は外部ファイル・内部スタイル・インラインの3種類があり、実務では外部ファイルを使うのが基本です。
- クラスはドット（
.）、IDはシャープ（#）でセレクタを書く - 同じ要素・プロパティが複数ある場合は後から書いた方が優先される
- 詳細度の順位は ID > クラス > 要素
!importantは強力だが乱用せず、最終手段として使う- クラス名は役割がわかる英語にする（
aaaやb01は避ける） - 共通クラスと専用クラスを使い分けることでコードが整理しやすくなる
CSSの「上から順に読み込む」というカスケードの仕組みを意識しながら、少しずつスタイルを追加・調整していくのが上達への近道です。
