Webページを作る上で、HTMLがページの「骨格」や「構造」を作る役割を担うのに対し、CSS (Cascading Style Sheets) は、その骨格を**装飾（スタイル付け）**する役割を持っています。色を付けたり、文字の大きさを変えたり、要素を配置したりと、Webサイトの見た目を決定づけるのがCSSです。
この記事では、CSSの基本概念と、すぐに使える基本的な書き方を解説します。
1. CSSとは何か？
CSSは、HTMLやXMLで書かれたドキュメントの**見た目（プレゼンテーション）**を指定するための言語です。
- 色（Color）
- フォント（Font Size, Type）
- レイアウト（Position, Display, Float）
- アニメーション（Transition, Animation）
これらすべてを制御し、ユーザー体験（UX）を向上させることがCSSの目的です。
HTMLとの関係
Web開発では、HTMLとCSSは常にセットで考えられます。
| 言語 | 役割 | 例 |
| HTML | 構造 (何があるか) | 見出し、段落、画像、リンクといった要素を作る |
| CSS | 装飾 (どう見えるか) | 見出しを赤くする、段落の幅を300pxにする |
Google スプレッドシートにエクスポート
2. CSSの基本的な書き方
CSSは、主に**「どのHTML要素」を「どのようなスタイル」**にするかを記述します。
基本構文
CSSのルールは、「セレクタ」「プロパティ」「値」の3つの部品で構成されます。
CSS
/* セレクタ { プロパティ: 値; } の形式で記述します */
p {
color: blue; /* プロパティ: color (文字色) を blue (青) に設定 */
font-size: 16px; /* プロパティ: font-size (文字サイズ) を 16ピクセルに設定 */
}
- セレクタ (Selector)：スタイルを適用したいHTML要素を指定します（この例では
<p>タグ）。 - プロパティ (Property)：変更したいスタイル属性の名前（例：
color、font-size）。 - 値 (Value)：そのプロパティに適用したい具体的な設定（例：
blue、16px）。
3つのCSS適用方法
HTMLにCSSを適用する方法はいくつかありますが、最も一般的で推奨されるのは外部スタイルシートです。
- 外部スタイルシート (External Stylesheet)：
style.cssなどの外部ファイルにCSSを書き、HTMLファイル内で読み込ませる方法。- 推奨：HTMLとCSSが分離されるため、管理しやすく、複数のページで同じスタイルを使い回せます。
<link rel="stylesheet" href="style.css"> - 埋め込みスタイルシート (Internal Stylesheet)：
- HTMLファイルの
<head>タグ内に<style>タグを使ってCSSを直接記述する方法。 - 一つのページだけで使うスタイルなどに利用されます。
- HTMLファイルの
- インラインスタイル (Inline Styles)：
- HTML要素の
style属性の中に直接CSSを記述する方法。 - 非推奨：構造と装飾がごちゃ混ぜになり、管理が非常に難しくなります。
- HTML要素の
3. 最重要セレクタの種類 🎯
スタイルを正確に適用するために、CSSでは様々な方法でHTML要素を指定できます。
1. タグセレクタ (要素セレクタ)
HTMLのタグ名（要素名）で指定します。
CSS
h1 {
color: red; /* すべての <h1> タグの文字色を赤にする */
}
2. クラスセレクタ
HTML要素に割り当てられた**class属性**を使って指定します。.(ドット)から書き始めます。最も頻繁に使うセレクタです。
HTML
<p class="main-text">重要なテキスト</p>
<p class="sub-text">補足情報</p>
CSS
.main-text {
font-weight: bold; /* main-textクラスを持つ要素を太字にする */
}
3. IDセレクタ
HTML要素に割り当てられた**id属性を使って指定します。#(ハッシュ)から書き始めます。IDはページ内で一つしか使えません**。
HTML
<div id="header">サイトのヘッダー</div>
CSS
#header {
background-color: black; /* IDがheaderの要素の背景色を黒にする */
}
4. 必ず押さえておきたい基本プロパティ
ここでは、Webデザインで頻繁に使用する基本的なプロパティを紹介します。
1. 色と背景
| プロパティ | 説明 | 例 |
color | 文字の色 | color: #333; (濃い灰色) |
background-color | 要素の背景色 | background-color: yellow; |
Google スプレッドシートにエクスポート
2. テキスト関連
| プロパティ | 説明 | 例 |
font-size | 文字の大きさ | font-size: 20px; |
font-family | フォントの種類 | font-family: 'Arial', sans-serif; |
text-align | テキストの配置 | text-align: center; (中央揃え) |
line-height | 行の高さ（行間） | line-height: 1.5; |
Google スプレッドシートにエクスポート
3. ボックスモデル（Box Model）📦
Web上のすべてのHTML要素は、**「ボックス（四角）」**として扱われます。このボックスの構造を理解することが、CSSのレイアウトを組む上で最も重要です。
要素は内側からコンテンツ (Content)、パディング (Padding)、ボーダー (Border)、マージン (Margin) の4つの層で構成されます。
| プロパティ | 役割 | 意味 |
width / height | 要素の幅と高さ | コンテンツのサイズを指定 |
padding | 内側の余白 | コンテンツとボーダーの間の余白 |
border | 境界線 | パディングの外側にある線のスタイル |
margin | 外側の余白 | ボーダーと他の要素の間の余白 |
Google スプレッドシートにエクスポート
CSS
.box {
width: 200px;
padding: 10px; /* 上下左右に10pxのパディング */
border: 1px solid #ccc; /* 1pxの灰色の実線ボーダー */
margin: 20px auto; /* 上下に20px、左右は自動（中央寄せ）のマージン */
}
5. 次のステップへ
CSSの基本を理解したら、次は以下のトピックに進むことで、より本格的なWebデザインが可能になります。
- Flexbox (フレックスボックス)：要素の配置や整列を簡単に行うための強力なレイアウト手法。
- Grid (グリッド)：2次元（行と列）のレイアウトを組むための手法。
- レスポンシブデザイン：スマートフォン、タブレット、PCなど、様々な画面サイズに合わせてデザインを調整する手法（
@mediaクエリ）。
CSSをマスターすれば、あなたのWebページはより魅力的で使いやすいものへと大きく進化します。まずはお気に入りのWebサイトを参考に、簡単なCSSを書いてみることから始めましょう！