CSS（Cascading Style Sheet）は、Webページのデザインやレイアウトをコントロールするための言語です。HTML（HyperText Markup Language）でWebページの構造を作成した後、CSSを使ってデザインやスタイルを適用することができます。
参考 HTMLとは？
このページでは、CSSとは何か？（役割・処理内容は？）をわかりやすく簡単に解説していきながら、自分一人でコーディングができるようにCSSの書き方の基本も１からご説明します。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
CSSとは？簡単に
CSSとは、Cascading Style Sheetsの略で、Webページのデザインやレイアウトをコントロールするための言語です。
初心者向けに簡単に説明すると、CSSはウェブページの「装飾」を担当している言語です。文字の色やサイズ、背景色、画像の配置や大きさ、ページ内の要素の余白や幅など、ウェブページの見た目に関するすべての要素を制御することができます。
Webページを家に例えると、HTMLが家の骨組みや間取りを決めるのに対して、CSSは家具の配置や壁の色などを決める役割を担います。
参考 HTMLとCSSの違い
ここではCSSの役割をより直感的に理解できるように、CSSの適用前後のサンプルWebページをお見せします。まずは、CSSで装飾する前のシンプルなHTMLページの例を示します。この例では、タイトルと段落が含まれています。
<!DOCTYPE html> <html> <head> <title>サンプルページ</title> </head> <body> <h1>こんにちは、世界！</h1> <p>これはCSSを使わないシンプルなページです。</p> </body> </html>
このコードだけでは、文字色や背景色、フォントサイズなどはデフォルトのままで、装飾がされていません。
次に、CSSで装飾を追加したバージョンのコードを示します。以下の例では、<style>タグを使ってCSSを直接HTMLファイルに記述しています。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
padding: 20px;
border-radius: 10px;
}
p {
color: darkblue;
font-size: 18px;
text-align: justify;
padding: 10px;
}
</style>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはCSSを使って装飾されたページです。</p>
</body>
</html>
CSSを適用することで、HTMLだけでは実現できなかったレイアウトの変更や、文字のフォントの変更、また綺麗な見出しなどをデザインすることができます。
参考 HTMLの書き方の基本ルール / hタグ / pタグ
CSS：書き方のルール
CSSは以下のように、セレクタとプロパティ、そして値の３つの要素から成り立ちます。
CSSの書き方の基本１：セレクタ
CSSのセレクタは、スタイルを適用するHTML要素を特定するための指定方法です。
要はHTMLで構成された文章のうち、どの部分を変えるか？を特定するための仕組みがセレクタです。上記の例だと、bodyタグを指定しています。
セレクタの種類や使い方はいくつか存在します。初心者向けに以下の4つの基本的なセレクタを説明します。
要素セレクタ（タグセレクタ）
要素セレクタは、HTMLのタグ名をそのまま指定して、そのタイプのすべての要素にスタイルを適用します。例えば、<p>要素に対してスタイルを適用する場合、以下のように記述します。
p {
color: red;
}
クラスセレクタ
クラスセレクタは、HTML要素に付与されたクラス名を指定して、特定のクラスが付与された要素にスタイルを適用します。クラスセレクタはドット（.）で始まります。
例えば、<p class="important">のようなクラスが「important」の要素に対してスタイルを適用する場合、以下のように記述します。
.important {
font-weight: bold;
}
参考 HTMLのクラスとID
IDセレクタ
IDセレクタは、HTML要素に付与されたID名を指定して、特定のIDが付与された要素にスタイルを適用します。IDセレクタはシャープ（#）で始まります。
例えば、<p id="main-content">のようなIDが「main-content」の要素に対してスタイルを適用する場合、以下のように記述します。
#main-content {
font-size: 20px;
}
子孫セレクタ
子孫セレクタは、ある要素の内部（子要素や孫要素など）にある特定の要素にスタイルを適用します。子孫セレクタは、親要素のセレクタと子孫要素のセレクタをスペースで区切って記述します。
例えば、<div>要素内の<p>要素に対してスタイルを適用する場合、以下のように記述します。
div p {
color: blue;
}
参考 divタグ
このように、CSSのセレクタを使って、どのHTML要素にスタイルを適用するかを簡単に指定することができます。セレクタを組み合わせたり、より複雑なセレクタを使うことで、さまざまな要素へのスタイル適用が可能です。
さらに詳しくセレクタについて知りたい方はこちらの記事をどうぞ。
セレクタの基本を理解できたら、続いて第２の要素「プロパティ」について解説します。
CSSの書き方の基本２：プロパティ
プロパティは、何を変えるか？を指定します。上記の例では、bodyタグの「background-color（＝背景色）」を変えるという意味になります。
多くのプロパティが存在しますが、初心者向けにいくつかの一般的なプロパティを以下に紹介します。
color（文字の色）
colorは文字の色を指定します。
色の指定には、色名（red、blueなど）や16進数コード（#FF0000、#0000FFなど）、RGB値（rgb(255,0,0)、rgb(0,0,255)など）を使用できます。
p {
color: red;
}
background-color（背景色）
background-colorは要素の背景色を指定します。色の指定方法はcolorプロパティと同様です。
div {
background-color: lightblue;
}
font-size（文字サイズ）
font-sizeは文字のサイズを指定します。単位にはピクセル（px）、ポイント（pt）、パーセント（%）、em、remなどがあります。
h1 {
font-size: 24px;
}
font-family（文字のフォント）
font-familyは文字のフォントを指定します。複数のフォント名をカンマで区切って指定し、ブラウザは先に指定されたフォントから順に利用可能なものを選択します。
body {
font-family: Arial, sans-serif;
}
これらは、CSSのプロパティの一部です。さまざまなプロパティを組み合わせることで、ウェブページのデザインやレイアウトを自由にカスタマイズできます。プロパティには多くの種類がありますので、必要に応じて調べて使用してみてください。
代表的なCSSプロパティ
| カテゴリ | プロパティ | 説明 |
|---|---|---|
| テキスト | color | 文字の色を指定 |
font-size | 文字のサイズを指定 | |
font-family | フォントの種類を指定 | |
font-weight | 文字の太さを指定 | |
text-align | テキストの水平方向の配置を指定 | |
text-decoration | テキストに下線、上線、打ち消し線を追加 | |
| 背景 | background-color | 要素の背景色を指定 |
background-image | 要素の背景画像を指定 | |
background-repeat | 背景画像の繰り返し方法を指定 | |
background-position | 背景画像の位置を指定 | |
| ボックスモデル | width | 要素の幅を指定 |
height | 要素の高さを指定 | |
border | 要素の境界線のスタイル、幅、色を指定 | |
padding | 要素の内側の余白を指定 | |
margin | 要素の外側の余白を指定 | |
| 表示 | display | 要素の表示タイプを指定 |
visibility | 要素の表示/非表示を指定 | |
opacity | 要素の透明度を指定 | |
float | 要素を左右に回り込ませる | |
| 位置 | position | 要素の配置方法を指定 |
top, right, bottom, left | 要素の位置を指定（positionプロパティと併用） | |
z-index | 要素の重なり順序を指定（positionプロパティと併用） |
CSSは基本的にこの3要素を理解し、適切にコーディングしていくことで成り立ちます。セレクタ・プロパティ・プロパティの３要素をここで丁寧に理解しておきましょう。
CSSの書き方の基本３：{} / .
セレクタ・プロパティを理解したあなたは加えて以下の点にさえ注意すればOKです。
CSS3とは？CSSの歴史とバージョン
最後に、CSSの歴史と発展について補足しておきます。
なぜCSSが誕生したのか？そして現代の主流「CSS3とはどんな特徴があるのか？」を理解しておくことで、CSSを利用する際の質が向上するため、この点も併せて頭に入れておきましょう。
CSSは、1990年代半ばにHåkon Wium LieとBert Bosによって提案されました。当時、Webページのスタイルを制御する手段が限られており、HTML内でスタイルを指定するしかなかったため、CSSが開発されました。
CSSのバージョンは、以下のように進化しています。
| バージョン | 発表年 | 主な特徴 |
|---|---|---|
| CSS1 | 1996年 | フォント、色、マージン、背景などの基本的なスタイリング |
| CSS2 | 1998年 | 新しいセレクタ、プロパティ追加、メディアタイプ対応、絶対・相対位置指定 |
| CSS3 | 現行バージョン | モジュール化、新しいセレクタ、プロパティ追加、メディアクエリ、Flexbox、Grid Layout、レスポンシブデザイン対応 |
CSS3は、機能ごとにモジュール化されているため、バージョンナンバーが一貫していません。それぞれのモジュールが独立して開発・更新されており、ウェブブラウザが徐々に対応しているという状況です。
つまり、CSS3と言ってもその中身はいくつかの部品（＝モジュール）に分かれており、その部品単位で進化・発展しています。ブラウザは徐々にそのモジュール単位でCSS3を取り込んでいっているため、稀に最新のプロパティなどを適用しても、一部のブラウザではスタイルが適用されないといった事象が発生する場合があります。
CSS3とは？
CSS3は現在利用されているCSSの最新バージョンです。
CSS3はCSS2に比べて機能が大幅に拡張され、中身もモジュール化されています。これにより、機能が独立して開発・更新されることが可能になりました。以下にCSS3の特徴を整理してみました。
これらの新機能により、CSS3ではウェブページのデザインやレイアウトをより柔軟かつ効率的に制御できるようになりました。
したがって、これからCSSを学習しようとしている方は、まずは本ページで解説したCSSの基本文法（セレクタやプロパティ）を理解するとともに、様々なセレクタやプロパティ、フレックスコンテナなどの応用的なテクニックを学んでいく必要があります。
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。
Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
