CSSとは、Webページの文字色、背景、余白、配置などの見た目を整えるための言語です。正式名称は「Cascading Style Sheets（カスケーディング・スタイル・シート）」で、一般に「シーエスエス」と読みます。
HTMLが見出しや段落などページの内容と構造を表すのに対し、CSSはその内容をどのように見せるかを指定します。この記事では、CSSでできること、HTMLとの違い、基本文法、実際にCSSを読み込んで表示を変える手順まで初心者向けに解説します。
CSSとはWebページの見た目を整える言語
CSSは、HTMLやXMLで作られた文書を画面上でどのように表示するか指定するスタイルシート言語です。ブラウザはHTMLからページの構造を読み取り、CSSの指定を当てはめて画面に表示します。
たとえば、CSSでは次のような見た目を指定できます。
- 文字を青くする
- 文字サイズを大きくする
- 下に余白を付ける
CSSがなくてもHTMLは表示できますが、その場合はブラウザが持つ初期スタイルで表示されます。
上の図では、左側がHTMLで作ったページの構造、右側がCSSで色、余白、配置を整えた状態です。内容そのものは同じでも、CSSを適用すると情報の区切りや重要な部分が分かりやすくなります。
HTMLとCSSの違い
HTMLとCSSは一緒に使いますが、担当する役割は異なります。家にたとえると、HTMLは柱や部屋を作る「構造」、CSSは壁の色や家具の配置を決める「内装」です。
| 言語 | 主な役割 | 記述する内容 |
|---|---|---|
| HTML | ページの内容と構造を作る | 見出し、段落、画像、リンク、リストなど |
| CSS | ページの見た目を整える | 色、文字サイズ、余白、枠線、配置など |
| JavaScript | ページに動きや処理を加える | メニューの開閉、入力チェック、内容の切り替えなど |
HTMLは文書の意味を表すマークアップ言語、CSSは見た目を指定するスタイルシート言語です。CSSは条件分岐やデータ処理を主な目的とするプログラミング言語とは役割が異なります。
HTMLそのものについて先に確認したい方は、次の記事でタグの役割や基本構造を解説しています。
CSSでできること
CSSで変更できるのは色や文字サイズだけではありません。現在のWebサイトでは、ページ全体のレイアウトやスマートフォン対応にもCSSを使います。
- 文字の色、サイズ、太さ、行間、フォントを変える
- 背景色、背景画像、枠線、角丸、影を付ける
- 要素の内側と外側に余白を付ける
- 画像や文章を横並び・縦並びに配置する
- 画面幅に合わせてレイアウトを切り替える
- ホバー、フォーカス、簡単なアニメーションを表現する
パソコンでは横並び、スマートフォンでは縦並びにするようなレスポンシブ対応もCSSで行います。見た目だけでなく、文字と背景のコントラストやキーボード操作時のフォーカス表示を整え、読みやすさや操作しやすさを高めることも大切です。
CSSの基本文法
CSSは「どの要素の」「何を」「どのようにするか」の順で考えると理解しやすくなります。基本形は次のとおりです。
セレクタ {
プロパティ: 値;
}
図の例では、pがセレクタ、colorがプロパティ、blueが値です。全体では「すべてのp要素の文字色を青にする」という意味になります。
セレクタは変更する対象を選ぶ
セレクタは、CSSを適用するHTML要素を選ぶ部分です。pと書けばすべてのp要素、.cardと書けばclass="card"が付いた要素を選べます。
プロパティは変更する項目を決める
プロパティは、対象の何を変えるかを指定します。文字色ならcolor、背景色ならbackground-color、文字サイズならfont-sizeを使います。
値は変更後の状態を決める
値は、選んだプロパティをどのような状態にするか指定します。color: blue;なら文字色を青、font-size: 20px;なら文字サイズを20ピクセルにします。
プロパティと値を結ぶコロン:、宣言の終わりを示すセミコロン;、宣言を囲む波括弧{ }も必要です。最後のセミコロンは省略できる場合がありますが、コードを追加したときのミスを防ぐため付ける習慣にしましょう。
HTMLだけのページへCSSを追加する
ここからは、実際にHTMLとCSSを書いて表示の変化を確認します。作業用フォルダーを作り、その中へindex.htmlとstyle.cssの2つのファイルを用意してください。
変更前のHTMLを書く
最初に、index.htmlへ次のコードを書いて保存します。この時点ではCSSファイルをまだ読み込んでいません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSSの練習</title>
</head>
<body>
<main class="card">
<h1>はじめてのCSS</h1>
<p>CSSでWebページの見た目を整えます。</p>
<a href="#">詳しく見る</a>
</main>
</body>
</html>index.htmlをブラウザで開くと、見出し、文章、リンクが縦に表示されます。見出しが大きく、リンクが青く見えるのはHTMLの機能ではなく、ブラウザの初期スタイルによるものです。
上の画像がCSSを適用する前の表示です。見出し、段落、リンクはHTMLに書いた順番で並んでいますが、ページの背景、カードの余白、角丸、影はまだありません。リンクもボタンではなく、ブラウザ標準の青い下線付き文字として表示されています。
CSSファイルをHTMLへ読み込む
CSSを反映するには、HTMLとCSSを関連付ける必要があります。index.htmlのhead要素内へ、次のlink要素を追加します。
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルがスタイルシートであることを示し、href="style.css"はCSSファイルの場所を示します。2つのファイルを同じフォルダーに置くため、ファイル名だけで指定できます。
style.cssへデザインを書く
次に、style.cssへ以下のコードを書いて保存します。ページの背景、カードの幅と余白、見出しの色、リンクの見た目を整えるCSSです。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px 16px;
color: #1f2937;
background-color: #eff6ff;
font-family: sans-serif;
}
.card {
width: min(100%, 640px);
margin-inline: auto;
padding: 32px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
}
.card h1 {
margin-top: 0;
color: #043481;
}
.card a {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
color: #fff;
background-color: #1268d8;
border-radius: 8px;
text-decoration: none;
}
.card a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}ブラウザを再読み込みすると、薄い青色の背景に白いカードが表示され、見出しとリンクにも色が付きます。画面が狭いときはwidth: min(100%, 640px);によってカードが画面幅に収まり、左右の余白も保たれます。
上の画像がCSSを適用した後の表示です。bodyの背景は薄い青色になり、.cardには白い背景、内側の余白、角丸、影が付きました。見出しは濃い青色へ変わり、下線付きだったリンクは白い文字の青いボタンとして表示されています。
HTMLに書かれた「見出し・段落・リンク」という内容と順番は変わっていません。2枚を比べると、CSSがページの内容ではなく、見た目を担当していることが分かります。
記事前半の「HTMLからCSSへ」の図と同じように、HTMLの内容と構造は変えず、CSSだけで見た目を変更できました。HTMLとデザインを分けると、複数ページの見た目をまとめて変更しやすくなります。
CSSが反映されない場合の確認点を含め、link要素の書き方は次の記事で詳しく解説しています。
CSSをHTMLへ適用する3つの方法
CSSをHTMLへ適用する方法は3つあります。基本は、先ほど使った外部CSSファイルです。
| 方法 | 書く場所 | 特徴 |
|---|---|---|
| 外部スタイルシート | style.cssなどの別ファイル | 複数ページで共有しやすく、管理しやすい |
| 内部スタイルシート | HTMLのstyle要素内 | 1ページだけでCSSを試しやすい |
| インラインスタイル | HTML要素のstyle属性 | 1つの要素へ直接指定できるが、管理しにくい |
学習用の短いコードでは内部スタイルシートも使えますが、実際のサイトではHTMLとCSSを分ける外部スタイルシートが基本です。同じCSSファイルを複数ページから読み込めるため、色や余白をまとめて変更できます。
CSSの「カスケーディング」とは
CSSの正式名称にある「Cascading」は、日本語で「段階的に重なる」「上から流れ落ちる」といった意味です。同じ要素へ複数のCSSが指定されたとき、出所、優先度、記述順などのルールに従って、最終的に使う値が決まります。
p {
color: blue;
}
p {
color: green;
}
上の図では、同じpセレクタに対して、先に青色、後に緑色を指定しています。2つはセレクタもプロパティも同じ条件なので、後から読み込まれたcolor: green;が先の指定を上書きし、ブラウザでは文字が緑色になります。
ただし、カスケーディングは記述順だけで決まるわけではありません。CSSの出所、!importantの有無、セレクタの詳細度などを比較し、それらも同じ場合に後の指定が使われます。そのため、「同じ優先条件なら後に書いた指定が適用される」と覚えましょう。
初心者が最初に覚えたいCSS
CSSの機能を最初からすべて暗記する必要はありません。まずは、よく使う次のプロパティを実際に書き、ブラウザで変化を確認してみてください。
| プロパティ | 役割 | 記述例 |
|---|---|---|
color | 文字色 | color: #333; |
background-color | 背景色 | background-color: #fff; |
font-size | 文字サイズ | font-size: 1.25rem; |
margin | 要素の外側の余白 | margin: 24px; |
padding | 要素の内側の余白 | padding: 16px; |
border | 枠線 | border: 1px solid #ccc; |
width | 横幅 | width: 100%; |
display | 表示形式やレイアウト | display: flex; |
分からないプロパティが出てきたら、その都度MDNのCSSリファレンスなどで意味と使用例を調べる方法がおすすめです。暗記よりも「調べて、書いて、表示を確認する」流れを繰り返す方が身に付きます。
初心者がよく使うHTMLタグとCSSプロパティは、次の記事でも一覧で確認できます。
CSSの学習に必要なもの
CSSを始めるために高価なソフトは必要ありません。コードを書くエディタと、表示を確認するブラウザがあれば学習できます。
- コードエディタ：Visual Studio Codeなど
- ブラウザ：Google Chrome、Firefox、Safariなど
- 練習用ファイル：
index.htmlとstyle.css
エディタ選びやファイルの作り方で迷った場合は、次の記事で初心者向けのエディタと、HTML・CSSを表示する手順を解説しています。
CSSでよくある疑問
CSSはプログラミング言語ですか？
一般にはプログラミング言語ではなく、文書の見た目を指定するスタイルシート言語に分類されます。変数、計算、条件によるスタイル変更などの機能もありますが、主な目的はWebページの表示を定義することです。
CSSだけでWebサイトを作れますか？
CSSだけでは、見出し、文章、画像、リンクなどページの内容と構造を作れません。基本的にはHTMLで内容を作り、CSSで見た目を整えます。必要に応じてJavaScriptで動きや処理を追加します。
CSS3やCSS4を学ぶ必要はありますか？
現在のCSSは、機能ごとに分かれたモジュール単位で更新されています。そのため、CSS全体を「CSS3」「CSS4」という1つの版として順番に学ぶ必要はありません。まず基本文法を覚え、必要な機能を現在のリファレンスで確認しましょう。
CSSはすべて暗記した方がよいですか？
すべてを暗記する必要はありません。よく使うプロパティは自然に覚えられます。最初は正確なスペルを調べながら書き、ブラウザで結果を確認してください。
まとめ
CSSとは、HTMLで作ったWebページの色、文字、余白、配置などを整えるスタイルシート言語です。HTMLが内容と構造、CSSが見た目を担当します。
まずはセレクタ { プロパティ: 値; }という基本形を覚え、index.htmlからstyle.cssを読み込んでみましょう。短いコードでも、保存してブラウザを再読み込みすると見た目が変わります。この小さな変化を繰り返すことが、CSSを理解する近道です。