初心者でもすぐできる！CSSの基本的な書き方と使い方ガイド

CSS

「ホームページの文字色を変えたい」
「ボタンの形を丸くしたい」

こんなときに使うのがCSSです。でも初めての人にとっては「CSSってどう書くの？」「HTMLとどう組み合わせるの？」とわからないことだらけ。

この記事では、CSSの基本的な書き方を、やさしい例を交えながら解説します。

スポンサーリンク

CSSとは？

CSSの役割

CSSは**Cascading Style Sheets（カスケーディング・スタイル・シート）**の略。ホームページの「見た目」を設定する言語です。

HTMLとCSSの違い

言語役割例
HTML構造・内容見出し、段落、画像の配置
CSS見た目・装飾色、サイズ、レイアウト

CSSでできること

文字の装飾

  • 文字の色やサイズ
  • フォントの種類
  • 太字や斜体

レイアウト

  • 要素の配置
  • 余白の調整
  • 背景色や背景画像

アニメーション

  • ホバー効果
  • フェードイン・フェードアウト
  • 要素の移動

なぜCSSが必要なの？

HTMLだけの場合

<p>これは普通のテキストです</p>

→ ブラウザの標準スタイルで表示（地味で単調）

CSS を使った場合

<p style="color: blue; font-size: 18px; background-color: #f0f8ff;">
  これは美しくデザインされたテキストです
</p>

→ 青い文字、大きなサイズ、薄い青の背景

まとめと次へのつなぎ

CSSはホームページの見た目を自由に変えられる便利な言語です。次は、実際のCSSの書き方を詳しく見ていきましょう。

CSSの基本的な書き方

CSSの基本構造

CSSは以下の形で書きます：

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

実際の例

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

この場合：

  • p はセレクタ（どのHTMLタグに適用するか）
  • color と font-size はプロパティ（何を変えるか）
  • blue と 16px は値（どう変えるか）

各部分の詳しい説明

セレクタ（何を選ぶか）

要素セレクタ

h1 { color: red; }      /* すべてのh1タグ */
p { font-size: 14px; }  /* すべてのpタグ */
div { margin: 10px; }   /* すべてのdivタグ */

クラスセレクタ

.highlight { background-color: yellow; }  /* class="highlight"の要素 */
.button { padding: 10px; }                /* class="button"の要素 */

IDセレクタ

#header { background-color: navy; }  /* id="header"の要素 */
#main { width: 100%; }               /* id="main"の要素 */

プロパティ（何を変えるか）

CSS には数百種類のプロパティがありますが、よく使うものから覚えていきましょう。

値（どう変えるか）

色の指定方法

color: red;           /* 色名 */
color: #ff0000;       /* 16進数 */
color: rgb(255,0,0);  /* RGB値 */

サイズの指定方法

font-size: 16px;      /* ピクセル（絶対値） */
font-size: 1.5em;     /* 親要素の倍率 */
font-size: 100%;      /* パーセンテージ */

コメントの書き方

CSSにはメモやコメントを書けます：

/* これはコメントです */
p {
  color: blue; /* 文字色を青に */
}

複数のセレクタに同じスタイルを適用

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

カンマで区切ると、複数の要素に同じスタイルを適用できます。

よく使うプロパティ一覧

文字に関するプロパティ

プロパティ説明例
color文字色color: red;
font-size文字サイズfont-size: 20px;
font-familyフォントfont-family: Arial;
font-weight太さfont-weight: bold;
text-align文字揃えtext-align: center;
line-height行間line-height: 1.5;
text-decoration装飾text-decoration: underline;

実用例

h1 {
  color: #333333;           /* 濃いグレー */
  font-size: 24px;          /* 24ピクセル */
  font-family: "Helvetica"; /* フォント指定 */
  text-align: center;       /* 中央揃え */
}

背景に関するプロパティ

プロパティ説明例
background-color背景色background-color: #f0f0f0;
background-image背景画像background-image: url('bg.jpg');
background-size背景サイズbackground-size: cover;
background-repeat背景の繰り返しbackground-repeat: no-repeat;

実用例

body {
  background-color: #f8f9fa;    /* 薄いグレーの背景 */
  background-image: url('pattern.png');
  background-repeat: repeat;     /* 繰り返し表示 */
}

レイアウトに関するプロパティ

マージンとパディング

マージン（外側の余白）

margin: 10px;           /* 全方向に10px */
margin: 10px 20px;      /* 上下10px、左右20px */
margin: 5px 10px 15px 20px; /* 上、右、下、左の順 */

パディング（内側の余白）

padding: 10px;          /* 全方向に10px */
padding-top: 5px;       /* 上だけ5px */
padding-left: 15px;     /* 左だけ15px */

ボックスモデルの理解

.box {
  width: 200px;              /* 幅 */
  height: 100px;             /* 高さ */
  padding: 10px;             /* 内側余白 */
  margin: 20px;              /* 外側余白 */
  border: 2px solid #333;    /* 境界線 */
}

境界線（ボーダー）のプロパティ

プロパティ説明例
border境界線（一括指定）border: 1px solid black;
border-color境界線の色border-color: red;
border-width境界線の太さborder-width: 2px;
border-style境界線のスタイルborder-style: dotted;
border-radius角の丸みborder-radius: 10px;

実用例

.button {
  border: 2px solid #007bff;    /* 青い境界線 */
  border-radius: 5px;           /* 角を丸く */
  padding: 10px 20px;           /* 内側余白 */
  background-color: #007bff;     /* 背景色 */
  color: white;                 /* 文字色 */
}

CSSをHTMLに適用する3つの方法

1. インラインスタイル（直接記述）

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

<p style="color: green; font-size: 18px;">
  これは緑色の大きな文字です
</p>

メリット・デメリット

メリット

  • 手軽ですぐに確認できる
  • 一時的なテストに便利

デメリット

  • HTMLが複雑になる
  • 同じスタイルを何度も書く必要がある
  • 管理が困難

使用場面

  • 一時的なテスト
  • 特定の要素だけ例外的にスタイルを変更

2. 内部スタイルシート（<style>タグ）

HTMLファイルの<head>部分にCSSを書く方法：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      color: darkgray;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>ページタイトル</h1>
  <p>ここに本文が入ります。</p>
</body>
</html>

メリット・デメリット

メリット

  • 1つのページ内でスタイルを一括管理
  • HTMLとCSSを分離できる
  • インラインより管理しやすい

デメリット

  • 他のページで同じスタイルを使い回せない
  • HTMLファイルが大きくなる

使用場面

  • 1ページだけの小さなサイト
  • そのページ固有のスタイル

3. 外部スタイルシート（推奨）

別ファイルにCSSを書いてHTMLにリンクする方法：

style.css（CSSファイル）

/* サイト全体のスタイル */
body {
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

p {
  color: #555;
  margin-bottom: 15px;
}

index.html（HTMLファイル）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>私のウェブサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ようこそ</h1>
  <p>このサイトでは○○について紹介します。</p>
</body>
</html>

メリット・デメリット

メリット

  • 複数のページで同じスタイルを共有
  • HTMLとCSSの完全な分離
  • 管理とメンテナンスが容易
  • ブラウザにキャッシュされて高速化

デメリット

  • ファイルが増える
  • 初心者には若干複雑

使用場面

  • 本格的なウェブサイト制作
  • 複数ページがあるサイト
  • チームでの開発

実践例：美しいボタンを作ってみよう

ステップ1：基本のボタン

HTML

<button class="my-button">クリックしてね</button>

CSS

.my-button {
  background-color: #007bff;  /* 背景色：青 */
  color: white;               /* 文字色：白 */
  border: none;               /* 境界線なし */
  padding: 10px 20px;         /* 内側余白 */
  font-size: 16px;            /* 文字サイズ */
}

ステップ2：角を丸くして立体感を追加

.my-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;          /* 角を丸く */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 影を追加 */
  cursor: pointer;             /* マウスカーソルを指の形に */
}

ステップ3：ホバー効果を追加

.my-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;   /* アニメーション */
}

.my-button:hover {              /* マウスが乗ったとき */
  background-color: #0056b3;    /* 少し暗い青に */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 影を濃く */
  transform: translateY(-2px);   /* 少し上に移動 */
}

完成形のコード

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .my-button:hover {
      background-color: #0056b3;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      transform: translateY(-2px);
    }
  </style>
</head>
<body>
  <button class="my-button">クリックしてね</button>
</body>
</html>

クラスとIDの使い分け

クラスセレクタ（.で始まる）

複数の要素で同じスタイルを使い回したい場合

.highlight {
  background-color: yellow;
  padding: 5px;
}

<p class="highlight">重要な段落1</p>
<p class="highlight">重要な段落2</p>
<span class="highlight">重要な部分</span>

IDセレクタ（#で始まる）

1つの要素だけに特別なスタイルを適用したい場合

#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

<div id="header">
  <h1>サイトのヘッダー</h1>
</div>

使い分けのルール

セレクタ用途特徴
クラス繰り返し使用同じページで何度でも使える
ID一意の要素同じページで1回だけ使用

レスポンシブデザインの基本

メディアクエリとは

画面サイズに応じてCSSを切り替える機能です。

/* スマートフォン用（768px以下） */
@media (max-width: 768px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
}

/* タブレット用（769px以上1024px以下） */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* デスクトップ用（1025px以上） */
@media (min-width: 1025px) {
  .container {
    padding: 30px;
    font-size: 18px;
  }
}

フレキシブルなレイアウト

.container {
  max-width: 1200px;    /* 最大幅を制限 */
  margin: 0 auto;       /* 中央配置 */
  padding: 0 20px;      /* 左右に余白 */
}

.content {
  width: 100%;          /* 幅を100%に */
  max-width: 600px;     /* 最大幅を制限 */
}

よくある間違いと対処法

よくある間違い1：セミコロンの忘れ

❌ 間違い

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

✅ 正解

p {
  color: blue;          /* セミコロンが必要 */
  font-size: 16px;
}

よくある間違い2：クラス名の書き方

❌ 間違い

button {                /* classを付けずに要素名だけ */
  background: blue;
}

✅ 正解

.my-button {            /* クラス名を付ける */
  background: blue;
}

よくある間違い3：単位の忘れ

❌ 間違い

div {
  width: 200;           /* 単位がない */
  margin: 10;           /* 単位がない */
}

✅ 正解

div {
  width: 200px;         /* pxを付ける */
  margin: 10px;         /* pxを付ける */
}

よくある間違い4：プロパティ名のスペル

❌ 間違い

p {
  colour: red;          /* 英国式のスペル */
  backgroung-color: yellow; /* タイプミス */
}

✅ 正解

p {
  color: red;           /* 米国式のスペル */
  background-color: yellow; /* 正しいスペル */
}

CSS学習の次のステップ

中級者向けのトピック

Flexbox レイアウト

.container {
  display: flex;
  justify-content: center;  /* 水平中央揃え */
  align-items: center;      /* 垂直中央揃え */
}

CSS Grid レイアウト

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3列のレイアウト */
  gap: 20px;                           /* 間隔 */
}

CSS変数（カスタムプロパティ）

:root {
  --main-color: #007bff;
  --text-color: #333;
}

.button {
  background-color: var(--main-color);
  color: var(--text-color);
}

おすすめの学習リソース

オンライン学習サイト

  • MDN Web Docs：正確で詳しい情報
  • CSS-Tricks：実践的なテクニック
  • Codepen：コード例とインスピレーション

開発者ツールの活用

  1. ブラウザでF12キーを押す
  2. 「Elements」タブで要素を選択
  3. 「Styles」パネルでCSSを確認・編集
  4. リアルタイムで変更を確認

まとめ

CSSの基本的な書き方をマスターすることで、ウェブサイトの見た目を自由自在にコントロールできるようになります。

重要なポイント

  • 基本構造：セレクタ { プロパティ: 値; }
  • 適用方法：インライン、内部、外部の3つの方法
  • よく使うプロパティ：color、font-size、background-color、margin、padding
  • クラスとID：適切な使い分けが重要

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました