CSSを書きたいものの、「どのファイルに何を書けばよいの？」「記号の意味が分からない」と迷っていませんか。
CSSは、基本の形とHTMLへの読み込ませ方を押さえれば、初心者でもすぐに試せます。この記事では、CSSの書き方を基礎から説明し、実際に文字色や余白を変えてブラウザで確認するところまで進めます。
CSSとはWebページの見た目を整える言語
CSS（Cascading Style Sheets）は、HTMLで作った文書に色・大きさ・余白・配置などの見た目を指定するための言語です。
HTMLが見出しや段落などの「構造」を担当し、CSSが「デザイン」を担当します。たとえば、HTMLで作った見出しにCSSを適用すると、文字を青くしたり、背景色や余白を加えたりできます。
<h1 class="page-title">CSSをはじめよう</h1>.page-title {
color: #2563eb;
}このCSSを適用すると、「CSSをはじめよう」という見出しが青色になります。HTMLとCSSは役割を分けて書くと、内容とデザインをそれぞれ整理しやすくなります。
CSSの基本的な書き方
CSSは「どの要素の、何を、どう変えるか」を次の形で書きます。
セレクター {
プロパティ: 値;
}
セレクターは変更するHTML要素を選ぶ
セレクターは、CSSを適用する相手です。タグ名を使う要素型セレクター、ピリオドから始まるclassセレクター、シャープから始まるIDセレクターなどがあります。
| 種類 | 書き方 | 選ぶ対象 |
|---|---|---|
| 要素型セレクター | p | すべてのp要素 |
| classセレクター | .note | class=”note”の要素 |
| IDセレクター | #header | id=”header”の要素 |
同じデザインを複数の場所で使いやすいため、普段のスタイル指定ではclassセレクターを使うことが多いです。
プロパティは変更する項目を指定する
プロパティは「文字色」「背景色」「余白」など、変更したい項目を表します。プロパティの後ろには半角のコロン（:）を置きます。
値は具体的な設定内容を書く
値には、色を表すカラーコードや、大きさを表す数値などを書きます。宣言の終わりには半角のセミコロン（;）を付けるのが基本です。
.card {
color: #1f2937;
background-color: #eff6ff;
padding: 24px;
border-radius: 12px;
}1つのセレクターには複数の宣言を書けます。この例では、文字色、背景色、内側の余白、角の丸みを順番に指定しています。
HTMLにCSSを書く3つの方法
CSSをHTMLへ適用する方法は3つあります。作るページや試したい内容に合わせて使い分けます。
外部CSSファイルに書く方法
HTMLとは別にstyle.cssを作り、HTMLのhead要素内から読み込みます。複数ページで同じCSSを使いやすく、HTMLも読みやすいため、Webサイト制作では基本となる方法です。
<link rel="stylesheet" href="style.css">style要素の中に書く方法
HTMLのhead要素内にstyle要素を置き、その中へCSSを書きます。1ページだけで試す場合には手軽ですが、CSSが増えるとHTMLが長くなります。
<style>
.page-title {
color: #2563eb;
}
</style>style属性へ直接書く方法
HTML要素のstyle属性へCSSを直接書く方法です。すぐに試せる一方、同じ指定を再利用しにくく、HTMLとデザインが混ざって管理しづらくなります。
<h1 style="color: #2563eb;">CSSをはじめよう</h1>初心者が練習するときも、基本はHTMLとCSSを別ファイルにする方法がおすすめです。ファイルの読み込み方は、次の記事でパスの違いまで詳しく説明しています。
外部CSSファイルを使って書く手順
ここからは、実際にindex.htmlとstyle.cssを作り、プロフィールカードの見た目を整えます。コードを順番に追加すれば、そのまま動きを確認できます。
作業用フォルダーと2つのファイルを作る
任意の場所にcss-practiceというフォルダーを作り、その中へindex.htmlとstyle.cssを保存します。2つのファイルは、最初は同じフォルダーに置きましょう。
css-practice/
├── index.html
└── style.cssHTML・CSS向けのエディタがまだない場合は、次の記事で初心者向けの選び方と使い方を確認できます。
変更前のHTMLを書く
まずはCSSを読み込んでいない状態のHTMLを書きます。class="card"は、あとでCSSからプロフィール全体を選ぶための目印です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの練習</title>
</head>
<body>
<article class="card">
<h1 class="card-title">CSSをはじめよう</h1>
<p>基本の書き方を練習しています。</p>
</article>
</body>
</html>この時点ではブラウザの標準スタイルで表示されるため、文字や余白はほとんど装飾されていません。
link要素でstyle.cssを読み込む
head要素内へ次の1行を追加します。href="style.css"は、同じフォルダーにあるstyle.cssを読み込む指定です。
<link rel="stylesheet" href="style.css">style.cssにデザインを書く
次に、style.cssへCSSを書きます。最初はコピーして、保存後の変化を確認してみてください。
body {
margin: 0;
padding: 40px 16px;
background-color: #f1f5f9;
color: #1f2937;
font-family: sans-serif;
}
.card {
max-width: 560px;
margin: 0 auto;
padding: 32px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}
.card-title {
margin-top: 0;
color: #2563eb;
font-size: 32px;
}bodyではページ全体の背景色や文字を設定しています。.cardではカードの幅、余白、背景、角丸、影を指定し、.card-titleでは見出しを青く大きくしています。
max-widthを使うと、画面が広くてもカードが大きくなりすぎません。一方で要素は画面幅に合わせて縮むため、スマートフォンでも横にはみ出しにくい書き方です。
変更後のHTMLを確認する
link要素を追加したあとのindex.html全体は次のとおりです。追加位置はhead要素の中で、title要素の下になっています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article class="card">
<h1 class="card-title">CSSをはじめよう</h1>
<p>基本の書き方を練習しています。</p>
</article>
</body>
</html>2つのファイルを保存してindex.htmlをブラウザで開くと、薄いグレーの背景に白いカードが表示され、見出しが青色になります。これが「HTMLで構造を作り、CSSで見た目を整える」という基本の流れです。
HTMLファイルをブラウザで開く操作が分からない場合は、次の記事を参考にしてください。
初心者がよく使うCSSプロパティ
CSSのプロパティを最初からすべて暗記する必要はありません。まずは次の基本的なプロパティを使い、必要になったものを少しずつ調べるのがおすすめです。
| プロパティ | 役割 | 記述例 |
|---|---|---|
color | 文字色 | color: #2563eb; |
background-color | 背景色 | background-color: #ffffff; |
font-size | 文字サイズ | font-size: 16px; |
font-weight | 文字の太さ | font-weight: 700; |
margin | 要素の外側の余白 | margin: 24px; |
padding | 要素の内側の余白 | padding: 24px; |
border | 枠線 | border: 1px solid #cbd5e1; |
width | 幅 | width: 100%; |
marginは要素の外側、paddingは要素の内側に余白を作ります。似ていますが、背景色や枠線の内側に空間を作りたいときはpaddingを使います。
よく使うHTMLタグとCSSプロパティをまとめて確認したい場合は、次の記事も役立ちます。
CSSを書くときの注意点
記号は半角で書く
波括弧（{ }）、コロン（:）、セミコロン（;）は半角で入力します。全角記号を使うとCSSの文法として認識されません。
最後の宣言だけはセミコロンを省略できる場合もありますが、宣言を追加したときのミスを防ぐため、毎回付ける習慣にすると安心です。
class名の先頭にピリオドを付ける
HTMLでclass="card"と書いた要素は、CSSでは.cardと指定します。ピリオドを付けずにcardと書くと、cardという名前のHTML要素を探す別のセレクターになります。
CSSは上から順番に読み込まれる
同じ要素へ同じプロパティを同じ強さで指定した場合、基本的には後に書かれた宣言が優先されます。これがCSSの「カスケード」と呼ばれる仕組みの一部です。
.message {
color: blue;
}
.message {
color: red;
}この例では後に書いたcolor: red;が適用されます。ただし、セレクターの種類や!importantなども優先順位に関係するため、「必ず最後が勝つ」とだけ覚えないようにしましょう。
CSSが反映されないときの確認ポイント
コードを書いても見た目が変わらないときは、次の項目を上から確認します。
index.htmlとstyle.cssを保存したかhrefのファイル名と場所が実際の構成に合っているか- class名のつづりと大文字・小文字がHTMLとCSSで一致しているか
- 波括弧、コロン、セミコロンが半角で正しい位置にあるか
- ブラウザを再読み込みしたか
- より優先度の高いCSSに上書きされていないか
ブラウザの開発者ツールを使うと、CSSファイルが読み込まれているか、どの指定に上書きされたかを確認できます。具体的な見方は次の記事で解説しています。
CSSの書き方でよくある疑問
CSSファイル名はstyle.cssでないといけませんか？
ファイル名は自由です。たとえばmain.cssでも問題ありません。ただし、HTMLのhrefには実際のファイル名を正確に書く必要があります。
CSSはどこに書くのがおすすめですか？
基本は外部CSSファイルに書く方法がおすすめです。HTMLとデザインを分けられ、複数ページで再利用しやすいためです。短い動作確認ならstyle要素に書いても構いません。
セレクターやプロパティは暗記する必要がありますか？
すべてを暗記する必要はありません。color、font-size、margin、paddingなどを実際に使い、分からないものは公式リファレンスで調べる進め方が効率的です。
CSSのコメントはどう書きますか？
/*と*/で囲んだ部分がコメントになります。CSSの目的を日本語で残しておくと、あとから読み返しやすくなります。
/* プロフィールカードの見出し */
.card-title {
color: #2563eb;
}まとめ
CSSは「セレクター { プロパティ: 値; }」の形で書きます。セレクターでHTML要素を選び、プロパティで変更項目を決め、値で色や大きさなどの具体的な設定を指定します。
まずはindex.htmlとstyle.cssを同じフォルダーに作り、文字色や背景色を変えてみてください。保存と再読み込みを繰り返し、コードと表示結果のつながりを確かめることがCSS習得の近道です。