HTML / CSS

CSS入門: CSSの基本の書き方とセレクタの使い方

2025-9-4

#CSS#基本#セレクタ#構文

🎨

HTMLで作成したウェブページの見た目を装飾するために必須なCSSについて解説します。

手を動かしながら学ぶことができるように、実際に簡単なコードを書きながら解説するよ！

HTML入門: HTMLの基本の書き方とタグの使い方について解説していますので、まだの方は先にこちらを読んでみてください！

CSSとは？

CSS(シーエスエス)とは、Cascading Style Sheetsの略で、HTMLで作成したウェブページの見た目を装飾するためのスタイルシート言語です。

CSSはプログラミング言語ではなく、スタイルシート言語と呼ばれます。HTMLで作成したコンテンツの色、サイズ、レイアウトなどを制御するために使用されます。

HTMLは「何を表示するか」、CSSは「どのように表示するか」というイメージです。

HTMLで「見出し」を作ったら、CSSで「その見出しを赤色にして、大きくする」というような装飾を加えることができます。

例としてHTML入門: HTMLの基本の書き方とタグの使い方の記事内で作成した自己紹介ページをCSSを使ってスタイルを当ててみます。

こちらはCSSを使っていない見た目です。

CSSを使わないHTMLページは、ブラウザのデフォルトスタイルが適用されたシンプルな見た目になります。

TODO: English version

CSSを使ってスタイルを当てた見た目です。

このようにCSSを使うことで、皆さんが見せたいようなウェブサイトを作ることができます。

TODO: English version

CSSを見てみよう

CSSはこのような感じで、HTMLの要素に対してスタイルを当てることができます。

h1 {
  color: red;
  font-size: 24px;
}

p {
  color: blue;
  font-size: 16px;
}

これから詳しく解説していきますね！

CSSファイルの読み込み方法

CSSファイルの読み込み方法は主に3つあります。

外部CSSファイル
内部CSS
インラインCSS

外部CSSファイル

別ファイルにCSSを書いて、HTMLから読み込む方法です。

もっともよく使う方法です。HTMLとCSSを分離することで、コードの管理がしやすくなります。

それぞれの方法について解説していきます。

実際にCSSを書いて表示させてみよう

それでは実際にCSSを書いて表示させてみましょう！

HTMLとCSSを学習するためのツールを用意の記事内でエディタとブラウザを用意する方法を説明しているので、まだの方は参考にしてみてください。

HTMLファイルを準備

まずは、CSSを適用するためのHTMLファイルを準備しましょう。

VSCodeでsample.htmlというファイルを作成し、以下のHTMLを貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの練習</title>
</head>
<body>
  <h1>NakoBase</h1>
  <p>CSSの基本を学ぼう</p>
  <h2>見出し2</h2>
  <p>段落のテキストです。</p>
</body>
</html>

CSSファイルを作成

次に、style.cssというファイルを新しく作成してください。

そして、以下のCSSを貼り付けてください。

h1 {
  color: red;
  font-size: 32px;
}

h2 {
  color: blue;
  font-size: 24px;
}

p {
  color: green;
  font-size: 16px;
}

HTMLとCSSを連携させる

HTMLファイルにCSSファイルを読み込むための<link>タグを追加します。

<head>タグの中に以下のコードを追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>NakoBase</h1>
  <p>CSSの基本を学ぼう</p>
  <h2>見出し2</h2>
  <p>段落のテキストです。</p>
</body>
</html>

ブラウザで表示

ブラウザでHTMLファイルを開くと、CSSが適用されて色付きのテキストが表示されます！

h1は赤色、h2は青色、pは緑色で表示されているはずです。

この流れを反復

では、CSSファイルを以下のように変更してみましょう。

style.css

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

h2 {
  color: orange;
  font-size: 28px;
}

p {
  color: darkblue;
  font-size: 18px;
  background-color: lightgray;
  padding: 10px;
}

これでブラウザを更新(リロード)すると表示が変わっていると思います。

このように、CSSファイルを更新 => ブラウザをリロード を繰り返すことで、見た目を確認しながらCSSを作り進めていくことができます。

この流れを反復していきウェブサイトのデザインを作っていきます。

CSSの書き方基本ルール

HTMLを作成できたところで、CSSの書き方の基本ルールを学んでいきましょう！

先ほどのstyle.cssに書いて進めると理解が深まると思います。

基本ルール1: セレクタ

CSSの基本は、セレクタと呼ばれるものです。

セレクタは、どのHTML要素にスタイルを適用するかを指定します。

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

例

h1 {
  color: red;
}

p {
  font-size: 16px;
}

セレクタの種類はたくさんあり、どのセレクタを使うかによってスタイルを適用する対象が変わります。

基本ルール2: プロパティと値

CSSはプロパティと値のペアでスタイルを指定します。

プロパティ: 値;

例

color: red;        /* 文字色を赤に */
font-size: 20px;   /* フォントサイズを20pxに */
background-color: blue; /* 背景色を青に */

つまり、セレクタ、プロパティ、値を覚えていくことでCSSを作成することができるということですね！

適切なセレクタとプロパティを使うことで、美しく使いやすいウェブサイトを作成することができます。

基本ルール3: セミコロンと波括弧

CSSでは、プロパティの最後に**セミコロン(;)を付け、セレクタの内容は波括弧({})**で囲みます。

h1 {
  color: red;
  font-size: 24px;
}

セミコロンを忘れるとエラーになることがあるので注意しましょう！

CSSの基本構造

基本ルールが分かったところで、CSSの基本構造とセレクタの種類を説明していきます。

要素セレクタ

HTMLのタグ名をそのまま使うセレクタです。

h1 {
  color: red;
}

p {
  font-size: 16px;
}

div {
  background-color: yellow;
}

IDセレクタ

HTMLのid属性を指定するセレクタです。#を付けて指定します。

#title {
  color: blue;
  font-size: 32px;
}

#content {
  background-color: lightgray;
}

対応するHTML

<h1 id="title">タイトル</h1>
<div id="content">コンテンツ</div>

クラスセレクタ

HTMLのclass属性を指定するセレクタです。.を付けて指定します。

.text-red {
  color: red;
}

.text-large {
  font-size: 24px;
}

.highlight {
  background-color: yellow;
}

対応するHTML

<p class="text-red">赤いテキスト</p>
<p class="text-large">大きなテキスト</p>
<p class="highlight">ハイライトされたテキスト</p>

IDセレクタは1つの要素に1つしか適用できませんが、クラスセレクタは複数の要素に同じクラスを適用することができます。

また、1つの要素に複数のクラスを適用することも可能です。

複数セレクタの指定

同じスタイルを複数の要素に適用したい場合は、カンマ(,)で区切って指定できます。

h1, h2, h3 {
  color: blue;
  font-family: Arial, sans-serif;
}

子要素セレクタ

特定の要素の子要素のみにスタイルを適用するセレクタです。

div p {
  color: red;
}

.container h1 {
  font-size: 28px;
}

対応するHTML

<div>
  <p>このpタグは赤色になります</p>
</div>
<div class="container">
  <h1>このh1は28pxになります</h1>
</div>

ここまでに紹介したセレクタがCSSの基本的なセレクタです。

実際にウェブサイトを作成する際は、これらのセレクタを組み合わせて使用していきます。

よく使うCSSプロパティ

ここからは、実際にウェブサイトを作成する際によく使うプロパティを紹介していきます。

文字色 (color)

テキストの色を指定するプロパティです。

h1 {
  color: red;
}

p {
  color: #333333; /* 16進数カラーコード */
}

.text-blue {
  color: blue;
}

色の指定方法は複数あります：

色名（red, blue, greenなど）
16進数カラーコード（#FF0000, #0000FFなど）
RGB値（rgb(255, 0, 0)など）

フォントサイズ (font-size)

文字の大きさを指定するプロパティです。

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

.small-text {
  font-size: 12px;
}

背景色 (background-color)

要素の背景色を指定するプロパティです。

body {
  background-color: lightblue;
}

.highlight {
  background-color: yellow;
}

.header {
  background-color: #333333;
}

余白 (margin, padding)

要素の外側と内側の余白を指定するプロパティです。

.box {
  margin: 20px;        /* 外側の余白 */
  padding: 15px;       /* 内側の余白 */
  background-color: lightgray;
}

marginは要素の外側の余白、paddingは要素の内側の余白です。

上下左右を個別に指定することもできます：

margin-top, margin-bottom, margin-left, margin-right
padding-top, padding-bottom, padding-left, padding-right

幅と高さ (width, height)

要素の幅と高さを指定するプロパティです。

.container {
  width: 800px;
  height: 600px;
  background-color: lightblue;
}

.square {
  width: 100px;
  height: 100px;
  background-color: red;
}

テキストの配置 (text-align)

テキストの水平方向の配置を指定するプロパティです。

h1 {
  text-align: center;    /* 中央揃え */
}

p {
  text-align: left;      /* 左揃え（デフォルト） */
}

.footer {
  text-align: right;     /* 右揃え */
}

フォントファミリー (font-family)

使用するフォントを指定するプロパティです。

body {
  font-family: Arial, sans-serif;
}

.heading {
  font-family: "Times New Roman", serif;
}

フォントは複数指定することができ、最初のフォントが利用できない場合は次のフォントが使用されます。

最後に一般的なフォントカテゴリ（serif, sans-serif, monospace）を指定することが推奨されています。

ボーダー (border)

要素の境界線を指定するプロパティです。

.box {
  border: 2px solid black;
}

.dashed-border {
  border: 1px dashed red;
}

.rounded-border {
  border: 3px solid blue;
  border-radius: 10px;  /* 角を丸くする */
}

ここまでに紹介したプロパティがよく使うCSSプロパティです。

実際にウェブサイトを作成する際は、これらのプロパティを組み合わせて使用していきます。

実践的な例

ここまでで紹介したプロパティを組み合わせて、実際に美しいウェブページを作成してみましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>私のポートフォリオ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>私のポートフォリオ</h1>
      <p class="subtitle">Webデザイナーを目指しています</p>
    </header>

    <main class="main-content">
      <section class="about">
        <h2>自己紹介</h2>
        <p>こんにちは！私はWebデザインを勉強中の学生です。</p>
        <p>HTMLとCSSを使って美しいウェブサイトを作ることが目標です。</p>
      </section>

      <section class="skills">
        <h2>スキル</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript（勉強中）</li>
        </ul>
      </section>
    </main>

    <footer class="footer">
      <p>&copy; 2024 私のポートフォリオ</p>
    </footer>
  </div>
</body>
</html>

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ヘッダーのスタイル */
.header {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 40px 20px;
}

.header h1 {
  font-size: 36px;
  margin: 0;
}

.subtitle {
  font-size: 18px;
  margin: 10px 0 0 0;
  opacity: 0.8;
}

/* メインコンテンツのスタイル */
.main-content {
  padding: 40px 20px;
}

.about, .skills {
  margin-bottom: 30px;
}

.about h2, .skills h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.skills ul {
  list-style-type: none;
  padding: 0;
}

.skills li {
  background-color: #ecf0f1;
  margin: 5px 0;
  padding: 10px;
  border-left: 4px solid #3498db;
}

/* フッターのスタイル */
.footer {
  background-color: #34495e;
  color: white;
  text-align: center;
  padding: 20px;
}

このように表示されていれば完成です。

色、レイアウト、フォントなど、CSSの基本的なプロパティを組み合わせて美しいページが作成できました！

CSSの読み込み方法

CSSをHTMLに適用する方法は3つあります。

1. 外部CSSファイル（推奨）

別ファイルにCSSを書いて、HTMLから読み込む方法です。

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

この方法が最も推奨されています。HTMLとCSSを分離することで、コードの管理がしやすくなります。

2. 内部CSS

HTMLファイルの<head>内に<style>タグでCSSを書く方法です。

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

3. インラインCSS

HTMLタグに直接style属性でCSSを書く方法です。

<h1 style="color: red;">タイトル</h1>
<p style="font-size: 16px;">テキスト</p>

補足

インラインCSSは簡単ですが、再利用性が低く、メンテナンスが困難になるため、特別な場合を除いて使用は避けることを推奨します。

まとめ

CSSの基本について解説しました。

本記事に基本が詰まっているので実際に手を動かして練習してみてください。

CSSの基本を理解したら、次はより高度なレイアウト（Flexbox、Grid）やアニメーション、レスポンシブデザインなどを学ぶことができます。まずは基本的なプロパティとセレクタを練習して、CSSに慣れていきましょう！

HTMLとCSSを組み合わせることで、美しく使いやすいウェブサイトを作成することができます。継続的に練習して、スキルを向上させていきましょう！