CSSとは、Webページの色、文字、余白、配置などを決めるための言語です。「HTMLは聞いたことがあるけれど、CSSは何をするもの？」という初心者でも、役割を分けて考えると難しくありません。
HTMLがページの内容と構造を作り、CSSがその見せ方を整えます。2つを組み合わせることで、見出しや文章を読みやすくし、パソコンとスマートフォンの両方で使いやすいページを作れます。
この記事では、知識ゼロの人へ向けて、CSSの意味、HTMLとの違い、ブラウザに表示される仕組み、基本の書き方を順番に解説します。最後には、2つのファイルを作って10分ほどで試せる練習も用意しました。
CSSとはWebページの見せ方を指定する言語
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。Webページを表示するブラウザに対して、「この見出しは青色」「このカードには余白を付ける」のような見せ方を伝えます。
CSSで変更できる代表的な内容は次のとおりです。
- 文字の色、大きさ、太さ、行間
- 背景色、枠線、角丸、影
- 要素の幅、高さ、余白
- 横並びやグリッドなどのレイアウト
- スマートフォンに合わせた表示
- マウス操作に応じた変化やアニメーション
CSSは「おしゃれにするためだけ」のものではありません。情報のまとまりを分かりやすくし、文字を読みやすくし、操作できる場所を見つけやすくする役割もあります。
CSSでできることをコード例で詳しく見たい人は、次の記事も参考にしてください。
HTMLとCSSの違い
HTMLとCSSはセットで使うことが多いものの、役割は異なります。まずは「内容」と「見せ方」を分けて覚えましょう。
| 言語 | 主な役割 | ブラウザへ伝えること |
|---|---|---|
| HTML | 内容と構造を作る | これは見出し、文章、画像、リンクである |
| CSS | 見た目と配置を整える | この色、大きさ、余白、並び方で表示する |
たとえば、次のHTMLでは見出しと文章を作っています。h1はページの主な見出し、pは段落を表すHTML要素です。
<h1>CSSを学ぼう</h1>
<p>HTMLで文章の構造を作ります。</p>ここへCSSを追加すると、内容は変えずに見た目だけを変更できます。
h1 {
color: #2563eb;
font-size: 2rem;
}
p {
line-height: 1.8;
}CSSを外しても、見出しと文章というHTMLの意味は残ります。CSSを読み込むと、見出しが青く大きくなり、文章の行間が広がります。
CSSがブラウザへ反映される仕組み
Webページを開くと、ブラウザはHTMLを読み、見出しや段落などの構造を理解します。その後、HTMLから読み込まれたCSSを確認し、対象となる要素へ色や余白などを適用して画面に表示します。
上の図では、左側のHTMLとCSSを、中央でブラウザが組み合わせています。右上がCSS適用後、右下の灰色の表示が装飾前のイメージです。
CSSファイルの読み込みに失敗すると、HTMLは表示されても装飾が付かない状態になります。ページが壊れたように見えても、まずはHTMLとCSSをつなぐ指定を確認すると原因を見つけやすくなります。
CSSの基本文法
CSSは「どのHTML要素を」「何を」「どの状態へ変えるか」の順で書きます。基本となる3つの名前を覚えましょう。
h1 {
color: blue;
}| 部分 | 名前 | この例での意味 |
|---|---|---|
h1 | セレクター | 変更する対象を選ぶ |
color | プロパティ | 文字色を変更する |
blue | 値 | 青色にする |
セレクターは変更する対象を選ぶ
セレクターは、CSSを適用したいHTML要素を選ぶ部分です。h1と書くと、ページ内のh1要素が対象になります。
特定の要素だけを選びたいときは、HTMLへclass属性を付け、CSSでは先頭にピリオドを書きます。
<p class="lead">最初に読んでほしい文章です。</p>.lead {
font-weight: 700;
}プロパティは変更する項目を決める
プロパティは、色、文字サイズ、余白など、変更したい項目を表します。たとえばcolorは文字色、background-colorは背景色、paddingは内側の余白です。
値は変更後の状態を決める
値には、具体的な色や大きさを書きます。プロパティと値の間にはコロン、指定の最後にはセミコロンが必要です。
.card {
color: #1e293b;
background-color: #f8fafc;
padding: 1.5rem;
}波括弧の中へ複数の指定を書けば、同じ要素へ文字色、背景色、余白をまとめて適用できます。
HTMLへCSSを適用する3つの方法
CSSをHTMLへ適用する方法は3つあります。初心者がページを作るときは、HTMLとCSSを別ファイルに分ける「外部CSS」を基本にしましょう。
| 方法 | 書く場所 | 使い方 |
|---|---|---|
| 外部CSS | style.cssなどの別ファイル | 通常のWeb制作で基本となる方法 |
| 内部CSS | HTMLのstyle要素内 | 1ページだけの小さな確認 |
| インラインCSS | HTML要素のstyle属性 | 一時的な指定。多用しない |
外部CSSなら、複数ページで同じデザインを共有できます。色を変更するときもCSSファイルを直せばよいため、HTMLへ同じ装飾を何度も書かずに済みます。
3つの方法の使い分けと記述場所は、次の記事で詳しく解説しています。
10分でCSSを試す手順
ここから実際に手を動かしてみましょう。特別な有料ソフトは不要です。テキストエディターとブラウザがあれば試せます。
作業用フォルダーを作る
デスクトップなど分かりやすい場所へ、css-practiceというフォルダーを作ります。その中へindex.htmlとstyle.cssの2ファイルを作ってください。
ファイル名の末尾が.txtにならないように確認します。2つのファイルは同じフォルダーへ置きましょう。
変更前のHTMLを書く
index.htmlへ次の内容を書き、保存します。link要素で同じフォルダーのstyle.cssを読み込んでいます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="profile">
<h1>はじめてのCSS</h1>
<p>CSSでカードの見た目を整えます。</p>
<a class="button" href="#">詳しく見る</a>
</main>
</body>
</html>この時点でindex.htmlをブラウザで開くと、見出し、文章、リンクが初期状態のまま縦に表示されます。内容は読めますが、カードらしいまとまりはまだありません。
style.cssへデザインを書く
次にstyle.cssへCSSを書き、保存します。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 2rem 1rem;
color: #1e293b;
background-color: #eff6ff;
font-family: sans-serif;
}
.profile {
max-width: 32rem;
margin-inline: auto;
padding: 2rem;
background-color: #ffffff;
border-radius: 1rem;
box-shadow: 0 12px 30px rgb(30 64 175 / 15%);
}
.profile h1 {
margin-top: 0;
color: #1d4ed8;
}
.button {
display: inline-block;
margin-top: 1rem;
padding: 0.75rem 1.25rem;
color: #ffffff;
background-color: #2563eb;
border-radius: 0.5rem;
text-decoration: none;
}ブラウザを再読み込みする
ブラウザへ戻って再読み込みすると、ページ全体に淡い背景が付き、白いカードの中へ内容がまとまります。見出しとリンクは青色になり、リンクはボタンのように表示されます。
ここまで表示できれば、HTMLとCSSの接続は成功です。#2563ebを別の色へ変える、paddingを増減するなど、値を1つずつ変更して結果を比べてみましょう。
CSSが反映されないときの確認ポイント
書いたCSSが画面に反映されなくても、最初からやり直す必要はありません。初心者がつまずきやすい箇所を上から順番に確認します。
index.htmlとstyle.cssを保存したか- 2つのファイルが同じフォルダーにあるか
href="style.css"のファイル名が一致しているか- class名のつづりがHTMLとCSSで一致しているか
- classセレクターの先頭にピリオドがあるか
- コロン、セミコロン、波括弧が半角で正しく閉じているか
- ブラウザを再読み込みしたか
たとえばHTMLがclass="button"なのに、CSSを.butonと書くと対象が一致しません。エラー表示が出ない場合もあるため、名前を1文字ずつ比べてください。
初心者がCSSを学ぶ順番
CSSには多くの機能がありますが、すべてを暗記してから作り始める必要はありません。次の順番で、小さな制作と復習を繰り返すのがおすすめです。
- HTMLで見出し、段落、リンクを作る
- 外部CSSファイルを読み込む
- セレクター、プロパティ、値を理解する
- 文字、色、背景を変更する
- marginとpaddingで余白を整える
- FlexboxとGridで配置する
- スマートフォン幅の表示を調整する
- hoverやfocusの状態を整える
最初は見本と同じコードを写しても構いません。ただし、写した後に値を変え、「どこがどう変わったか」を自分の言葉で説明すると理解が定着します。
練習方法や課題の選び方は、次の記事で詳しく紹介しています。
CSS初心者のよくある質問
CSSはプログラミング言語ですか？
CSSは一般に、プログラミング言語ではなくスタイルシート言語に分類されます。条件に応じた見せ方や計算機能もありますが、主な目的は文書の表示方法を指定することです。
CSSだけでWebサイトを作れますか？
CSSだけでは作れません。見出し、文章、画像、リンクなどの内容と意味はHTMLで作り、その見た目をCSSで整えます。データ取得や複雑なクリック処理にはJavaScriptやサーバー側の仕組みも使います。
CSSのプロパティは全部覚えますか？
全部覚える必要はありません。よく使うプロパティは練習の中で自然に覚え、分からない機能はMDNのCSSリファレンスなどで確認します。名前を丸暗記するより、調べて試す流れを身に付けることが大切です。
HTMLとCSSはどちらから学びますか？
最初にHTMLで見出し、段落、リンク、画像の基本を学び、その直後からCSSを並行して学ぶと理解しやすいです。HTMLだけを長期間学び続けるより、1つのページを作りながら両方の役割を確認しましょう。
用語や仕組みをもう少し詳しく復習したい場合は、CSSの全体像をまとめた記事も利用できます。
まとめ
CSSとは、HTMLで作ったWebページの色、文字、余白、配置などを指定する言語です。HTMLが内容と構造、CSSが見た目とレイアウトを担当します。
基本文法は「セレクター・プロパティ・値」の3つです。最初は外部CSSファイルを使い、HTMLからstyle.cssを読み込む方法を覚えましょう。
まずはこの記事のプロフィールカードを作り、色や余白の値を1つずつ変えてみてください。ブラウザの変化を自分で確認することが、CSSを理解する最初の一歩です。