2026年4月25日
はじめに
HTMLでWebページの内容を作ったら、次は CSS（シーエスエス） で見た目を整えましょう。CSSは Cascading Style Sheets の略で、文字の色・大きさ・背景色・余白などを指定する言語です。
この記事では、CSSファイルを作ってHTMLに読み込み、ページの見た目を変える方法をステップごとに解説します。
ステップ1：CSSファイルを作成する
HTMLファイルと同じフォルダに、style.css という名前のファイルを作ります。
- VS Codeのエクスプローラーで「新しいファイル」をクリック
- ファイル名を
style.cssと入力してEnter
ポイント：CSSファイルの拡張子は必ず .css にします。
ステップ2：HTMLにlinkタグを追加する
HTMLファイルの <head> の中に、CSSファイルを読み込む <link> タグを追加します。
<head>
<meta charset="UTF-8">
<title>はじめてのCSS</title>
<link rel="stylesheet" href="style.css">
</head>rel="stylesheet" は「このファイルはスタイルシートです」という意味です。href にCSSファイルの名前を書きます。
📖 詳しくはHTMLとCSSの違いで解説しています。
ステップ3：色やフォントを変更する
style.css に以下のコードを書いてみましょう。
body {
background-color: #f0f8ff;
font-family: sans-serif;
color: #333;
}
h1 {
color: #0f766e;
border-bottom: 3px solid #0f766e;
padding-bottom: 8px;
}
p {
font-size: 16px;
line-height: 1.8;
}CSSの基本構文は セレクタ { プロパティ: 値; } です。
background-color— 背景色を変えるcolor— 文字色を変えるfont-family— フォント（書体）を変えるfont-size— 文字の大きさを変えるborder-bottom— 下線を引く
👉 CSSで色を指定する方法も参考にしてください。
ステップ4：ブラウザで確認する
HTMLファイルとCSSファイルの両方を保存（Ctrl+S）したら、HTMLファイルをブラウザで開きましょう。背景色が水色になり、見出しが緑色になっていれば成功です！
🔗 あわせてCSSセレクターの使い方もチェックしてみましょう。
最初のCSSで試してみたいこと
CSSの基本がわかったら、次のことを試してみましょう。少しずつできることを増やしていくのが上達のコツです。
試してみよう1：背景色を変える
body要素にbackground-colorを指定すると、ページ全体の背景色が変わります。白い背景に飽きたら、薄い青（#f0f9ff）や薄いグレー（#f5f5f5）を試してみましょう。
試してみよう2：文字の色を変える
colorプロパティで文字の色を変えられます。見出しだけ色を変えると、メリハリのあるページになります。h1に好きな色を指定してみましょう。色の指定方法について詳しくは「CSSの色指定」で学べます。
試してみよう3：文字の大きさを変える
font-sizeプロパティで文字の大きさを変えられます。単位はpx（ピクセル）を使います。16pxが標準的な本文サイズです。見出しは24px〜32pxくらいにすると目立ちます。
試してみよう4：余白を追加する
paddingプロパティで要素の内側に余白を作れます。文字が枠にくっついていると読みにくいので、padding: 16px;のように余白を入れましょう。
試してみよう5：角を丸くする
border-radiusプロパティで要素の角を丸くできます。8pxくらいにすると、やわらかい印象のデザインになります。ボタンやカードに使うと効果的です。
CSSの全体像をもっと詳しく知りたい人は「CSSとは？初心者向けにわかりやすく解説」を読んでみてください。プロパティの一覧や書き方のルールを学べます。
余白の調整方法は「marginとpaddingの違いと使い方」で詳しく解説しています。
CSSが効かないときの確認ポイント
CSSを書いたのに見た目が変わらないとき、次のポイントを確認しましょう。
確認1：styleタグの位置は正しいか
styleタグはheadタグの中に書きます。bodyタグの中に書いても動くことがありますが、正しい位置はheadの中です。
確認2：セレクタは正しいか
スタイルを当てたい要素のタグ名やクラス名が正しいか確認しましょう。クラスセレクタを使うときは、先頭にドット（.）をつけることを忘れないでください。セレクタについて詳しくは「CSSセレクタの種類と使い方」で学べます。
確認3：プロパティ名のスペルは正しいか
「background-color」を「backgroud-color」と書いていませんか。スペルが間違っていると、ブラウザはそのプロパティを無視します。
確認4：セミコロンを忘れていないか
各プロパティの末尾にはセミコロン（;）が必要です。忘れると、その行以降のスタイルが全部無視されることがあります。
確認5：ファイルを保存したか
コードを変更したら、必ず保存してからブラウザを更新しましょう。保存を忘れているだけ、ということは意外と多いです。
最初のCSSを書いたあとの次のステップ
最初のCSSが書けたら、次は以下のことに挑戦してみましょう。
- 複数の要素に異なるスタイルを当てる
- クラスを使って特定の要素だけスタイルを変える
- ホバー（マウスを乗せたとき）で色が変わるボタンを作る
- 外部CSSファイルに分離する
一度に全部やる必要はありません。1日1つずつ新しいことを試していけば、1週間でかなりのことができるようになります。CSSは「試して、見て、調整する」の繰り返しです。正解は一つではないので、自分が「いいな」と思えるデザインを自由に探してみてください。楽しみましょう。
まとめ
- ✅ CSSファイル（
.css）を作成する - ✅ HTMLの
<head>に<link>タグでCSSを読み込む - ✅ セレクタ { プロパティ: 値; } の形でスタイルを書く
- ✅ 保存してブラウザで確認する