第2回：CSS入門①

3月 10, 2026

授業目次

今日のゴール

  • CSSが「見た目を整えるための言語」だと理解する
  • HTMLとCSSの役割の違いを説明できる
  • 基本的なCSSの書き方を理解する
  • HTMLにCSSを読み込ませることができる
  • 文字・線に関する基本的なCSSを使えるようになる

1. 前回の復習

前回はHTMLを学びました。

HTMLは、文章に意味を与えて
ページの構造を作るためのものです。

例えば、

  • これは見出し
  • これは文章
  • これはリスト
  • これはリンク

ということをブラウザや検索エンジンに伝えるのがHTMLでした。

では次のような見た目はどうするのでしょうか？

  • 文字を赤くする
  • 文字を大きくする
  • 中央ぞろえにする
  • 線をつける
  • 角を丸くする

これを担当するのがCSSです。

2. CSSとは何か？

CSSは

HTMLで作った構造に対して見た目をつけるための言語

です。

HTMLが骨組みなら
CSSは見た目の装飾です。

例えばHTMLだけだと

<h1>こんにちは</h1>
<p>今日はCSSを学びます。</p>

このままでも表示はされます。

しかし

  • 色
  • 大きさ
  • フォント
  • 配置
  • 線
  • 丸み

などは調整されていません。

そこでCSSを使います。

3. HTMLとCSSの役割の違い

HTML

構造を作るもの

CSS

見た目を整えるもの

例えば

<h1>PROGCUBE</h1>

これは「重要な見出し」という意味です。

しかしこれだけでは

  • 黒文字なのか
  • 赤文字なのか
  • 大きいのか
  • 小さいのか
  • 中央に置くのか

は決まりません。

それをCSSで指定します。

h1 {
  color: red;
  font-size: 40px;
  text-align: center;
}

4. CSSの基本的な書き方

CSSは次の形で書きます。

セレクタ {
  プロパティ: 値;
}

例

h1 {
  color: blue;
}

この意味は

  • h1 → どこに
  • color → 何を
  • blue → どうするか

です。

つまり

h1タグの文字色を青にする

という意味です。

用語の確認

セレクタ

どのHTMLにCSSを当てるか指定する部分

プロパティ

何を変えるかを指定する部分

値

どう変えるかを指定する部分

複数書く場合

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

ポイント

  • 1行ごとに ; をつける
  • { } の中に書く

5. CSSの読み込み方

CSSを使う方法はいくつかあります。

まずは基本を覚えましょう。

方法① HTMLの中に直接書く

headタグの中に style を書きます。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<style>
h1 {
 color: blue;
 font-size: 32px;
}
p {
 color: gray;
}
</style>
</head>
<body>
 <h1>こんにちは</h1>
 <p>CSSの練習です</p></body>
</html>

方法② CSSファイルを読み込む

こちらが実際のWEB制作でよく使う方法です。

フォルダ構造

lesson2
  index.html
  style.css

HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>CSS練習</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>こんにちは</h1>
 <p>CSSの練習です</p></body>
</html>

CSS

h1 {
 color: blue;
 font-size: 32px;
}
p {
 color: gray;
}

この方法だと

HTML → 構造
CSS → 見た目

という形で役割を分けることができます。

6. よく使う基本CSS

今回覚える基本プロパティです。

color

文字の色を変える

p {
 color: red;
}

font-size

文字サイズを変える

p {
 font-size: 20px;
}

px は大きさの単位です。

font-family

フォントを変える

p {
 font-family: sans-serif;
}

例

  • serif
  • sans-serif
  • Yu Gothic
  • Hiragino Sans

font-weight

文字の太さ

p {
 font-weight: bold;
}

100から900までの数字を設定できます（100毎）
一部フォントでは、使えない値もありますが、その場合は近い値に補正されます。

text-align

文字の横位置

h1 {
 text-align: center;
}

値

  • left
  • center
  • right

border

線をつける

p {
 border: 1px solid black;
}

意味

1px → 線の太さ
solid → 実線
black → 色

border-radius

角を丸くする

p {
 border-radius: 10px;
}

7. 実践

前回作った自己紹介ページにCSSを追加します。
以下の全てのプロパティを使ってみましょう。

color・・・文字の色
font-size・・・文字のサイズ（大きさ）
font-family・・・文字のフォント（書体）
font-weight・・・文字の太さ
text-align・・・文字の向き
border・・・線の設定
border-radius・・・線の丸み

8. よくあるミス

① : と ; を忘れる

間違い

color red

正しい

color: red;

② CSSが読み込まれていない

<link rel="stylesheet" href="style.css">

ファイル名が違うと読み込まれません。

③ スペルミス

よく使うCSS

  • font-size
  • font-family
  • font-weight
  • text-align

9. 宿題

① 自己紹介ページにCSSを追加する

条件

  • color を1回以上使う
  • font-size を2回以上使う
  • text-align を1回使う
  • border を1回使う
  • border-radius を1回使う

② 架空サービス紹介ページにCSSを追加する

条件

  • h1のサイズを大きくする
  • 本文サイズを調整する
  • 線をつける
  • 角を丸くする
  • 文字位置を変える

発展課題

今回習ったプロパティ以外のプロパティを使って、「やりたいデザイン」を実現してみましょう。
知らないプロパティを使えば使うだけ＋100点です。

次回予告

次回はCSSをもう少し進めます。

← 週一覧に戻る