前回の記事で、HTMLを使ってWebサイトの「骨組み」を作りました。
でも、今のままだと真っ白な画面に黒い文字が並んでいるだけで、少し寂しいですよね。
そこで登場するのがCSS（シーエスエス）です。
HTMLが「骨組み」なら、CSSは「見た目（ファッション・メイク）」を担当します。
この記事では、初心者が最初に覚えるべきCSSの基本ルールと、サイトを一気にオシャレにする魔法のプロパティを紹介します！
CSSの基本ルールは「誰の・何を・どうする」
CSSの書き方は、実はとてもシンプルです。覚える構文はたった1つだけ。
どこの {
何を: どうする;
}専門用語で言うと、以下のようになります。
- セレクタ（どこの）： デザインを変えたいタグを指定（例：h1、p）
- プロパティ（何を）： 変えたい項目（例：色、大きさ）
- 値（どうする）： 具体的な変化の内容（例：赤にする、大きくする）
具体例を見てみよう
例えば、「h1（見出し）の color（文字色）を red（赤）にしたい」場合はこう書きます。
h1 {
color: red;
}この「波括弧 {} で囲む」のと、最後に「セミコロン ; をつける」のが約束事です。
これさえ守れば、CSSは怖くありません！
CSSはどこに書くの？
CSSを書く場所はいくつかありますが、初心者のうちは「HTMLファイルの <head> の中に書く」のが一番手軽です。
<head> の中に <style> というタグを作って、その中にCSSを記述します。
<head>
<meta charset="UTF-8">
<title>はじめてのWebサイト</title>
<!-- ↓ここにCSSを書くエリアを作る -->
<style>
h1 {
color: blue;
}
</style>
</head>※本格的な開発では「CSS専用ファイル」を作りますが、学習中はこれでOKです！
これだけで変わる！魔法のプロパティ4選
CSSには何百ものプロパティがありますが、最初は以下の4つを覚えれば十分に見栄えが整います。
1. 文字の色を変える（color）
p {
color: #333333; /* 真っ黒より少しグレーがかった方がオシャレ */
}2. 背景の色を変える（background-color）
body {
background-color: #f0f0f0; /* 全体の背景を薄いグレーに */
}3. 文字の大きさを変える（font-size）
h1 {
font-size: 24px; /* ピクセル単位で指定します */
}4. 余白を作る（padding / margin）【最重要】
Webデザインで一番大事なのが「余白」です。CSSには2種類の余白があります。
- padding（パディング）： 箱の内側の余白（文字と枠線の間のスペース）
- margin（マージン）： 箱の外側の余白（隣の要素との距離）
「ダンボール箱」をイメージしてください。
箱の中に緩衝材を入れて中身を守るのが padding、箱と箱を離して置くのが margin です。
実践：自己紹介ページをデザインしよう
では、前回のHTMLコードにCSSを追加して、カード風のデザインに仕上げてみましょう。
以下のコードをまるごとコピペして、ブラウザで確認してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オシャレな自己紹介</title>
<style>
/* 1. ページ全体の背景とフォント */
body {
background-color: #e0f7fa; /* 薄い水色 */
font-family: sans-serif; /* ゴシック体で見やすく */
color: #444; /* 文字は濃いグレー */
}
/* 2. divで作った箱をカード風にする */
div {
background-color: #ffffff; /* 白い背景 */
width: 80%; /* 幅は画面の8割 */
margin: 20px auto; /* 上下に20px余白、左右は自動で真ん中寄せ */
padding: 20px; /* 内側に余白を入れて窮屈さを解消 */
border-radius: 10px; /* 角を少し丸くする */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ほんのり影をつける */
}
/* 3. 見出しのデザイン */
h1 {
color: #00bcd4; /* テーマカラーの青 */
border-bottom: 2px solid #00bcd4; /* 下線 */
padding-bottom: 10px;
}
h2 {
background-color: #00bcd4;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<h1>私の好きなもの紹介</h1>
<p>こんにちは！CSSを勉強して、デザインを変えてみました。</p>
</div>
<div>
<h2>好きな食べ物</h2>
<ul>
<li>ラーメン</li>
<li>カレーライス</li>
</ul>
</div>
</body>
</html>まとめ：CSSは「塗り絵」のように楽しもう
いかがでしたか？
HTMLだけの時とは見違えるほど、Webサイトらしくなりましたよね。
今回使ったテクニックのポイントは以下の通りです。
- 背景色 (
background-color) をつけてエリアを分ける - 余白 (
padding,margin) を入れて読みやすくする - 角丸 (
border-radius) や影 (box-shadow) で今風にする
CSSの値（数字や色）を少し変えるだけで、ガラッと雰囲気が変わります。
ぜひ数字を書き換えて、自分だけのオリジナルデザインを作って遊んでみてください！