閉じる

CSSとは？できること・書き方・HTMLとの違いをまとめて解説

広告

CSSを学び始めると、まず「HTMLと何が違うのか」「どこにどう書けばいいのか」で迷いやすいです。

本記事では、CSSとは何かという基礎から、実際の書き方、HTMLとの関係、よく使う基本スタイルまでを、図解とサンプルコードを交えながら段階的に解説します。

初心者の方でも、読み終わるころには「簡単なWebページなら自分で見た目を整えられる」状態を目指します。

目次 [ close ]
  1. CSSとは何か？HTMLとの違いをやさしく解説
    1. CSSとは
    2. CSSとHTMLの違い
    3. CSSでできること
  2. CSSの基本構造と書き方
    1. セレクタとは
    2. プロパティと値とは
    3. CSSの基本文法の書き方例
    4. コメントの書き方と注意点
  3. CSSの適用方法
    1. インラインCSS(style属性)の書き方と特徴
    2. 内部CSS(styleタグ)の書きどころと使いどころ
    3. 外部CSS(別ファイル)の読み込み方法とメリット
    4. CSSの優先順位
  4. 初心者が最初に覚えたいCSSの基本スタイル
    1. 文字のスタイル
    2. 余白と枠線
    3. レイアウト
    4. 背景色と背景画像
    5. リンクやボタンのCSSデザイン入門
  5. まとめ

CSSとは何か？HTMLとの違いをやさしく解説

CSSとは

CSSとは、Webページの「見た目」を指定するための言語です。

HTMLがページの「骨組み」や「意味」を表すのに対して、CSSは色・文字サイズ・余白・レイアウトなどをコントロールします。

[図解作成の指示]

  • タイトル: 「HTMLとCSSの役割イメージ」
  • 左側に「HTML＝骨組み(構造)」と書かれたワイヤーフレーム風の灰色のページ
  • 右側に「CSS＝デザイン(見た目)」と書かれたカラフルで余白やフォントが整ったページ
  • 左右を矢印でつなぎ、「同じHTMLにCSSを適用すると見た目が変わる」という注釈

HTMLだけでも文字や画像は表示できますが、すべて同じような味気ない見た目になってしまいます。

そこでCSSを使うと、見出しを大きくしたり、リンクをボタン風にしたり、スマホでは縦並び・PCでは横並びにレイアウトを変えたりと、実用的で見やすいデザインに仕上げることができます。

CSSとHTMLの違い

HTMLとCSSは、役割がはっきり分かれています。

初心者のうちに、この考え方を整理しておくと後がとても楽になります。

[図解作成の指示]

  • 2列の対比図
  • 左列に「HTML」、右列に「CSS」
  • HTML側: 「見出し」「段落」「画像」などラベル付きのブロックを縦に並べたシンプルな箱
  • CSS側: 同じブロックが色・フォント・余白・境界線で装飾されている
  • 下に「HTML＝何を」「CSS＝どう見せるか」と大きめの見出し

文章で整理すると次のようになります。

HTMLは、ページに何があるかを表します。

例えば<h1>は「一番大事な見出し」、<p>は「段落」、<img>は「画像」です。

これは人間だけでなく、検索エンジンや支援技術(スクリーンリーダーなど)にとっても大切な意味情報です。

一方CSSは、その要素をどう見せるかを指定します。

同じ<h1>でも、CSSでfont-sizeやcolorを変えると大きさや色が変わりますが、HTMLの意味そのものは変わりません。

少し整理するために、違いを表にしてみます。

項目HTMLCSS
役割構造・意味見た目・デザイン
例見出し、段落、画像、リンク色、フォント、余白、枠線、レイアウト
ファイルの例index.htmlstyle.css
主なタグ/構文<h1><p><a>などh1 { color: red; }など
なくても表示されるか必須なくても表示されるが味気ない

HTMLとCSSはセットで使うものですが、役割を分けて考えることで、「どこを直せばいいか」が分かりやすくなります。

CSSでできること

CSSでできることは非常に多いですが、初心者の方がまずイメージしておきたいのは次のような分野です。

1つ目は文字の装飾です。

文字サイズや色、行間、フォントファミリなどを自由に調整できます。

例えば、見出しだけ太字にして大きくしたり、注意書きを赤色にしたりできます。

2つ目は余白(マージン・パディング)や枠線の調整です。

要素同士の間隔を広げて読みやすくしたり、ボックスに枠線や角丸をつけてカード風にしたりできます。

3つ目はレイアウトの制御です。

FlexboxやGridなどの仕組みを使い、横並びレイアウト、3カラムレイアウト、レスポンシブ対応(画面幅によって自動で並び替え)などが可能になります。

4つ目は背景や装飾です。

背景色や背景画像の指定、グラデーション、影、ホバー時のアニメーションなど、見た目の印象に関わる部分をコントロールできます。

このように、CSSを理解すると「なんとなくダサいページ」を「読みやすくて伝わるページ」に変えられるようになります。

CSSの基本構造と書き方

セレクタとは

CSSを書くときに、まず指定しなければならないのは「どのHTML要素に対してスタイルを当てるか」です。

この「対象を選ぶ部分」がセレクタです。

[図解作成の指示]

  • HTMLの簡単な例を左側に表示: <h1>見出し</h1><p>本文</p>
  • 右側にCSS: 「h1 { color: red; }」「p { font-size: 16px; }」
  • 矢印で「h1セレクタ → <h1>見出し</h1>に適用」「pセレクタ → <p>本文</p>に適用」と示す

初心者のうちは、次のようなセレクタから慣れていくと理解しやすいです。

  • 要素名セレクタ … p、h1 など、タグ名そのものを指定
  • クラスセレクタ … .button のように、HTMLのclass属性に対応
  • IDセレクタ … #header のように、HTMLのid属性に対応

例えば、HTMLに<p class="lead">と書いてある場合は、CSSで.lead { ... }と書くことで、その段落だけにスタイルを当てることができます。

プロパティと値とは

セレクタで「どの要素か」を選んだら、次は「どんな見た目にするか」を指定します。

その内容を決めるのがプロパティと値です。

[図解作成の指示]

  • 1つのCSSルールを分解した図
  • 「p { color: red; font-size: 16px; }」と書かれたコード
  • 「p → セレクタ」「color → プロパティ」「red → 値」「font-size → プロパティ」「16px → 値」とラベル付け

例えば次のように書いたとします。

CSS
p {
  color: blue;      /* 文字色のプロパティが color、その値が blue */
  font-size: 16px;  /* 文字サイズのプロパティが font-size、その値が 16px */
}

ここでcolorやfont-sizeがプロパティ、blueや16pxが値です。

プロパティごとに指定できる値は決まっています。

例えばfont-sizeの場合、16pxや1.5remなどの数値＋単位を使います。

CSSの基本文法の書き方例

CSSの基本的な書き方の形は、どのルールでも同じです。

「セレクタ { プロパティ: 値; プロパティ: 値; }」という形さえ覚えれば、あとは覚えるのはプロパティと値の名前だけです。

まずは最小の例を見てみます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS基本文法の例</title>

  <!-- head内にstyleタグでCSSを書く(内部CSS) -->
  <style>
    /* pタグすべてに適用されるCSS */
    p {
      color: blue;           /* 文字色を青にする */
      font-size: 18px;       /* 文字サイズを18pxにする */
      line-height: 1.6;      /* 行間を少し広げる */
    }

    /* h1タグすべてに適用されるCSS */
    h1 {
      color: #333333;        /* 濃いめのグレー */
      text-align: center;    /* 中央揃え */
    }
  </style>
</head>
<body>
  <h1>CSSの基本文法</h1>
  <p>この文章はCSSによって青色で表示され、文字サイズや行間も調整されています。</p>
</body>
</html>

この例では、pとh1がセレクタで、それぞれの中にプロパティと値の組み合わせが並んでいます。

プロパティと値の間には:、1つの指定の終わりには;を付けるのが決まりです。

コメントの書き方と注意点

CSSにも、コードの説明を書いておくためのコメントが使えます。

コメントはブラウザからは無視されるので、自分や他人が後から見返したときのメモとして役立ちます。

CSSでは、コメントは/* ここにコメント */という形式で書きます。

CSS
/* これはCSSのコメントです */
/* ブラウザには表示されません */

p {
  color: blue;      /* ここもコメント: pタグを青くする */
  font-size: 16px;
}

注意点として、CSSのコメントは/から/までが1つの塊として扱われるため、コメントの中にさらに/を書いてしまうと正しく閉じられなくなり、以降のCSSが壊れることがあります。

初心者のうちは、長いコメントを入れる場合も1つの/ ... */で完結させるようにすると安全です。

CSSの適用方法

CSSは「どこに書くか」によって、インラインCSS・内部CSS・外部CSSの3パターンがあります。

それぞれに特徴と使いどころがあります。

インラインCSS(style属性)の書き方と特徴

インラインCSSは、HTMLタグのstyle属性に直接CSSを書く方法です。

「とりあえずこの1カ所だけ見た目を変えたい」ときに便利ですが、たくさん使うと管理しづらくなります。

[図解作成の指示]

  • 左にインラインCSSを書いたHTMLの例: <p style=”color:red;”>など
  • 右に「HTMLとCSSが混ざっていて後から修正しにくい」というコメント
  • 下に×マークと「学習用途や一時的な調整以外には多用しない」と書く

サンプルコードで見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>インラインCSSの例</title>
</head>
<body>
  <!-- インラインCSS: style属性の中にプロパティと値を書く -->
  <p style="color: red; font-weight: bold;">
    この文章はインラインCSSで赤色かつ太字になっています。
  </p>
</body>
</html>

このように、style="color: red; font-weight: bold;"のように、HTMLタグの中に直接書きます。

ただし、同じようなスタイルを何度も書く必要があり、HTMLが読みにくくなるため、学習中の実験やメールテンプレートなど特殊な場合を除いては、あまり多用しないことをおすすめします。

内部CSS(styleタグ)の書きどころと使いどころ

内部CSSは、HTMLファイルの<head>タグ内に<style>タグを置き、その中にCSSを書く方法です。

小さなページや、1ページだけで完結する簡単なサンプルなどでよく使われます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>内部CSSの例</title>

  <!-- head内のstyleタグにCSSを書いている -->
  <style>
    body {
      font-family: sans-serif;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
    }

    p {
      color: #555555;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>内部CSSのサンプル</h1>
  <p>このページのスタイルは、head内のstyleタグにまとめて書かれています。</p>
</body>
</html>

内部CSSは、HTMLファイル1つに対してスタイルを1カ所にまとめられるので、インラインCSSよりもかなり管理しやすくなります。

チュートリアルや学習用サンプル、1ページ完結の小さなサイトでは、この方法が分かりやすいです。

外部CSS(別ファイル)の読み込み方法とメリット

外部CSSは、CSSを別ファイル(.css)に分けて保存し、HTMLからリンクする方法です。

実務ではほぼこの方法が使われます。

複数ページで同じCSSファイルを共有できるため、デザインの一括変更・再利用がとても楽になります。

[図解作成の指示]

  • ファイル構成のイメージ図
    • 左に「index.html」「about.html」「contact.html」
    • 右に「style.css」
    • 各HTMLファイルからstyle.cssへ矢印が伸びている
  • 下に「1つのCSSを複数ページで共有」「まとめてデザイン変更可能」と説明

まず、CSSファイルstyle.cssを作ります。

CSS
/* style.css: 外部CSSファイル */

body {
  font-family: sans-serif;
}

h1 {
  color: #1abc9c;
  text-align: center;
}

p {
  color: #333333;
  line-height: 1.8;
}

次に、HTMLファイルからこのCSSを読み込みます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部CSSの例</title>

  <!-- 外部CSSファイルを読み込むリンクタグ -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>外部CSSのサンプル</h1>
  <p>このページのスタイルは、外部ファイルstyle.cssから読み込まれています。</p>
</body>
</html>

このように<link rel="stylesheet" href="style.css">と書くことで、ブラウザは同じフォルダ内のstyle.cssを読み込み、スタイルを適用します。

ファイル構成にも気をつけて管理することで、サイト全体のデザインを1カ所からコントロールできるようになります。

CSSの優先順位

同じ要素に対して、複数のCSSが重なっている場合、どの指定が最終的に有効になるかを決めるのがCSSの優先順位(カスケーディング)です。

[図解作成の指示]

  • ピラミッド形の図
  • 下から順に「ブラウザのデフォルト」「外部CSS」「内部CSS」「インラインCSS」の階層
  • 上に行くほど「優先度が高い」と矢印
  • 横に「同じプロパティなら、より強いものが勝つ」と説明

初心者のうちは、次のルールを押さえておくと理解しやすいです。

  1. インラインCSS(style属性)が最も強い
  2. 同じ優先度同士では、より詳細なセレクタが勝つ(#idは.classより強い、など)
  3. それでも決まらない場合は、後から書かれたルールが優先される

簡単な例を見てみます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSSの優先順位の例</title>
  <style>
    p {
      color: blue;   /* 1. すべてのpタグを青に */
    }

    .important {
      color: green;  /* 2. class="important"は緑に */
    }

    #special {
      color: orange; /* 3. id="special"はオレンジに */
    }
  </style>
</head>
<body>
  <p>この段落は青になります。</p>
  <p class="important">この段落は緑になります。</p>
  <p id="special" class="important" style="color: red;">
    この段落はインラインCSSで赤になります。
  </p>
</body>
</html>

出力結果のイメージ:

(1行目) 青色の文字
(2行目) 緑色の文字
(3行目) 赤色の文字   ← インラインCSSが最優先

この例では、最後の段落に対しては、pによる青、.importantによる緑、#specialによるオレンジ、インラインCSSによる赤が競合しています。

最終的には、優先度が最も高いインラインCSSの赤が適用されます。

初心者が最初に覚えたいCSSの基本スタイル

ここからは、初心者の方が「最初に覚えておくと役に立つ」基本のスタイルを、まとまった例として紹介します。

1つのHTMLとCSSで、文字のスタイル、余白、レイアウト、背景、ボタンなどを一通り試してみます。

文字のスタイル

文字のスタイルでは、主にcolor、font-size、font-family、font-weight、line-heightなどを使います。

[図解作成の指示]

  • 同じテキストが「デフォルト」「フォントを変えた版」「大きく太くした版」と3パターン並んでいる
  • 下に各パターンで使ったプロパティを簡単に注釈

サンプルコードを見ていきます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字スタイルの基本</title>
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    h1 {
      font-size: 32px;    /* 見出しを大きく */
      font-weight: bold;  /* 太字 */
      color: #2c3e50;     /* 濃いめの青グレー */
    }

    p {
      font-size: 16px;    /* 標準的な本文サイズ */
      line-height: 1.8;   /* 行間を広めにして読みやすく */
      color: #333333;     /* 深いグレーで目が疲れにくい */
    }

    .note {
      color: #e74c3c;     /* 赤色で注意喚起 */
      font-weight: bold;  /* 強調のため太字 */
    }
  </style>
</head>
<body>
  <h1>文字スタイルのサンプル</h1>
  <p>CSSを使うと、文字の大きさや色、行間、フォントなどを調整して読みやすい文章を作ることができます。</p>
  <p class="note">この一文は注意書きとして赤く強調されています。</p>
</body>
</html>

このように、見出しと本文、注意書きでスタイルを分けるだけでも、ぐっと読みやすさが変わります。

余白と枠線

余白と枠線は、要素同士の距離感やまとまり感を調整するための重要な要素です。

主にmargin(外側の余白)、padding(内側の余白)、border(枠線)を使います。

[図解作成の指示]

  • 1つのボックスを表示し、「内側の余白＝padding」「枠線＝border」「外側の余白＝margin」とラベル
  • ボックスの外側に別の要素を配置し、marginで距離が空いている様子を視覚化

サンプルコードを見てみます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>余白と枠線の基本</title>
  <style>
    .card {
      border: 1px solid #cccccc; /* 薄いグレーの枠線 */
      padding: 16px;             /* 内側の余白: 文字と枠の間 */
      margin: 16px 0;            /* 上下の外側の余白 */
      border-radius: 8px;        /* 角を少し丸くする */
      background-color: #ffffff; /* 背景を白く */
    }

    body {
      background-color: #f5f5f5;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>カード風ボックス</h2>
    <p>paddingで内側の余白を取り、marginで周りとの間隔を空けることで、まとまりのあるボックスに見せることができます。</p>
  </div>

  <div class="card">
    <h2>もう1つのカード</h2>
    <p>同じクラスを複数の要素に使い回すと、統一感のあるデザインになります。</p>
  </div>
</body>
</html>

paddingは「ボックスの内側」、marginは「ボックスの外側」というイメージを持っておくと、混乱しにくくなります。

レイアウト

レイアウトでは、要素を横並びにしたり、画面幅に応じて配置を変えたりします。

最近のCSSではflex(Flexbox)がとてもよく使われます。

初心者のうちは、display: flex;とjustify-content、gapあたりから触れてみるとよいです。

[図解作成の指示]

  • 横並びの3つのカードを表示する図
  • 上に「display:flex; justify-content: space-between; gap: 16px;」などが書かれている
  • カード間のすき間に「gap」と矢印で注釈

サンプルコードを見てみます。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>レイアウトの基本(Flexbox)</title>
  <style>
    .container {
      display: flex;          /* 子要素を横並びにする */
      gap: 16px;              /* 要素間のすき間 */
    }

    .box {
      flex: 1;                /* 余白を均等に分配する */
      padding: 16px;
      background-color: #ecf0f1;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>
  </div>
</body>
</html>

このように.containerにdisplay: flex;を指定すると、その中にある.box要素が横一列に並びます。

gapでボックス同士の間隔を簡単に調整できます。

背景色と背景画像

背景色や背景画像は、ページ全体の雰囲気を大きく変える要素です。

まずはbackground-colorとbackground-imageから覚えると良いです。

[図解作成の指示]

  • 左に無地背景のカード、右に背景画像を敷いたカード
  • 下に「background-color」と「background-image」のコード例を並べる

サンプルコードを見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>背景色と背景画像の基本</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background-color: #f0f4f8; /* ページ全体の背景色 */
    }

    .hero {
      height: 200px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;

      /* 背景画像の設定 */
      background-image: url("https://via.placeholder.com/800x200");
      background-size: cover;      /* 余白が出ないように全面に表示 */
      background-position: center; /* 画像の中心を表示 */
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>背景画像付きのヘッダー</h1>
  </div>
</body>
</html>

背景色はシンプルにトーンを整え、背景画像は印象づけや装飾に使うことが多いです。

派手な画像を使いすぎると可読性が落ちるので、文字とのコントラストや見やすさを常に意識することが大切です。

リンクやボタンのCSSデザイン入門

最後に、実用的な例としてリンクやボタンのデザインを見てみます。

HTMLの<a>タグをCSSで装飾すると、よくある「ボタン風リンク」が作れます。

[図解作成の指示]

  • 通常のテキストリンク(青＋下線)と、CSSで装飾されたボタン風リンクを並べて比較
  • ボタン風リンクに「padding」「background-color」「border-radius」などのプロパティ名を吹き出しで説明

サンプルコードです。

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>リンクとボタンのデザイン</title>
  <style>
    /* 通常のリンクの色とホバー時の色 */
    a {
      color: #2980b9;
      text-decoration: none;   /* 下線を消す */
    }

    a:hover {
      text-decoration: underline; /* ホバー時に下線を表示 */
    }

    /* ボタン風リンクのスタイル */
    .btn {
      display: inline-block;       /* 幅や高さ、paddingを効かせるため */
      padding: 10px 20px;          /* 上下・左右の余白 */
      background-color: #3498db;   /* 背景色 */
      color: #ffffff;              /* 文字色を白に */
      border-radius: 4px;          /* 角を丸く */
      text-decoration: none;       /* 下線を消す */
      font-weight: bold;
    }

    .btn:hover {
      background-color: #2980b9;   /* ホバー時に少し濃い色に */
    }
  </style>
</head>
<body>
  <p>
    通常のリンク:
    <a href="#">こちらをクリック</a>
  </p>

  <p>
    ボタン風リンク:
    <a href="#" class="btn">申し込む</a>
  </p>
</body>
</html>

ここでは、.btnクラスを使ってリンクを装飾し、:hover疑似クラスを使って「マウスを乗せたときの見た目」も指定しています。

hover時の変化を付けると、ユーザーにとって「クリックできる場所」が視覚的に分かりやすくなります。

まとめ

CSSは、HTMLで作った「骨組み」にデザインという「洋服」を着せるための言語です。

本記事では、CSSとHTMLの役割の違いから始めて、セレクタ・プロパティ・値という基本構造、インライン・内部・外部といった書き方の種類、さらに文字・余白・レイアウト・背景・ボタンなどの基本スタイルまでを一通り紹介しました。

最初は覚えることが多く感じられますが、少しずつ実際にコードを書いてブラウザで確認しながら学ぶことで、自然と身についていきます。

まずはこの記事のサンプルをコピーして試し、そこから色や余白を変えて「自分なりのデザイン」にアレンジしてみてください。

CSSの基本と適用方法
  • CSSとは？できること・書き方・HTMLとの違い(1/1)

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！