CSSとは？書き方や基本知識を初心者向けにわかりやすく解説

Webサイト制作の学習を始めると、HTMLとセットで必ず登場するのが「CSS」です。

HTMLがWebページの骨格を作る言語であるのに対し、CSSはその見た目を整え、デザインを豊かにするための言語になります。
カラフルな文字や美しいレイアウト、動きのあるアニメーションなど、私たちが普段目にする魅力的なWebサイトのほとんどはCSSによって作られています。

しかし、プログラミング初心者の方にとっては、「HTMLと何が違うの？」「どうやって書けばいいの？」といった疑問も多いかもしれません。

そこでこの記事では、CSSの基本的な概念から具体的な書き方、そして効率的な学習方法まで、初心者の方にもわかりやすいように順を追って丁寧に解説します。

【本記事の信頼性】

執筆者は元エンジニア
大手プログラミングスクールのWebディレクター兼ライターを経験
自らも地元密着型のプログラミングスクールを運営

忖度一切なし！
受講生から評判の良いプログラミングスクール

スクール	特徴	受講料金
RUNTEQ （ランテック）	大手比較サイトで4年連続人気NO.1！受講生からの評判も非常に高く、Web系のエンジニアを目指すならRUNTEQ一択。	550,000円（給付金適用あり）
RaiseTech （レイズテック）	月単価80万円以上の現役エンジニア講師による指導！一度入会すればサポートは半永久的。	498,000円
デイトラ	格安で質の高いWeb制作スキルを習得したい人におすすめ！業界最安級の料金でありながら、コミュニティやサポートが充実。	129,800円～
0円スクール（ゼロスク）	完全無料でプログラミングが学べる貴重なスクール！最短1ヶ月で卒業可能。ゼロスク運営会社への就職もできる。	無料
RareTECH （レアテック）	長期間に渡って学習し、希少人材を目指す人に最適なスクール！受講料は高いものの、高収入を得られる人材を目指せる。	96～132万円

CSSについてわかりやすく解説
CSSを構成する要素
CSSの具体的な書き方
【初心者におすすめ】CSSの学習方法
まとめ

CSSについてわかりやすく解説

まずは、CSSがどのようなもので、Webページにおいてどんな役割を担っているのか、その全体像を解説していきます。

CSSとは

CSSとは、「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略称で、Webページのスタイルを指定するための言語です。

具体的には、HTMLで作られた文字の色や大きさ、背景色、レイアウト（配置）など、Webページの「見た目」に関する部分を設定する役割を持っています。

よく家づくりに例えられるのですが、HTMLが柱や壁、屋根といった家の「構造（骨組み）」を定義するものだとすれば、CSSは壁紙の色を決めたり、家具を配置したり、照明をデザインしたりする「内装や装飾」を担当するものと考えるとわかりやすいでしょう。

CSSがあるおかげで、Webページを読みやすく、そして魅力的にデザインすることが可能になるのです。

CSSとHTMLの違い

HTMLとCSSの最も大きな違いは、その役割にあります。

HTML
Webページの文章構造や骨組みを定義する言語。「ここが見出し」「ここが段落」「ここに画像を配置する」といった、コンテンツの意味や情報構造をコンピューターが理解できるように示す役割を担う。

CSS
HTMLで定義された要素の見た目を装飾する言語。「見出しの文字を赤色にする」「段落の文字サイズを16ピクセルにする」「画像を右側に配置する」といった、デザインに関する指定を行う。

かつてはHTMLの機能だけで文字色を変えることもできましたが、現在では構造とデザインを分離して管理するのが一般的です。

CSSの必要性

なぜHTMLとCSSの役割を分ける必要があるのでしょうか。

それは、Webサイトの管理と更新を効率化するためです。

もしCSSがなく、HTMLだけでデザインを行っていた場合、例えばサイト全体の文字色を変更したいと考えたとします。
すると、何十、何百とある全てのHTMLファイルを一つひとつ開き、色の指定を書き換えなければならなくなります。

これは非常に手間がかかり、修正漏れの原因にもなるでしょう。

しかし、CSSを使えば、デザインに関する記述を一つのファイルにまとめて管理できます。
そして、そのCSSファイルを修正するだけで、サイト全体のデザインを一括で変更することが可能なのです。

CSSでできること

CSSを使いこなすことで、Webページのデザインを自由自在にコントロールできます。

具体的にできることの代表例をいくつか見てみましょう。

文字の装飾	フォントの種類、サイズ、色、太さ、行間などを細かく調整できます。
背景の指定	背景に特定の色をつけたり、好きな画像を表示させたりすることが可能です。
レイアウトの調整	要素の幅や高さを指定したり、回り込みを設定したり、複数の要素を横並びにしたりと、ページ全体のレイアウトを構築します。近年ではFlexboxやGridといった高度なレイアウト手法も主流です。
アニメーションの実装	マウスカーソルを乗せるとボタンの色が変わったり、要素がふわっと表示されたりといった、動きのあるデザインを実装できます。
レスポンシブデザイン	閲覧しているデバイス（PC、タブレット、スマートフォン）の画面サイズに応じて、レイアウトやデザインを自動的に最適化させることができます。

CSSを構成する要素

CSSのコードは、非常にシンプルなルールの組み合わせで成り立っています。
「どの要素を」「何を」「どうする」という3つの要素で構成されていると理解するとわかりやすいでしょう。

セレクタ

セレクタは、「どのHTML要素にスタイルを適用するのか」を指定する部分です。
CSSのルールの先頭に記述されます。

例えば、h1（大見出し）のスタイルを変更したい場合はh1がセレクタとなり、p（段落）のスタイルを変更したい場合はpがセレクタとなり、特定のidやclassを持つ要素だけを指定するなど、様々な指定方法が存在します。

セレクタを使いこなすことが、効率的なCSS記述の第一歩です。

プロパティ

プロパティは、「セレクタで指定した要素の、何を（どのスタイルを）変更するのか」を指定する部分です。

例えば、文字の色を変更したい場合はcolor、背景色ならbackground-color、文字の大きさならfont-sizeといったように、変更したいスタイルの種類をプロパティで指定します。

どのようなプロパティがあるのかを覚えていくことが、CSS学習の中心となるでしょう。

値

値は、「プロパティで指定したスタイルを、具体的にどう変更するのか」を指定する部分で、プロパティの後ろにコロン（:）を挟んで記述します。

例えば、colorプロパティに対してはredや#333333といった色の値を、font-sizeプロパティに対しては24pxや1.5remといったサイズの値を指定します。

プロパティと値は必ずセットで記述することを覚えておいてください。

CSSの具体的な書き方

CSSをHTMLに適用するには、いくつかの方法があります。
それぞれの書き方には特徴があり、目的に応じて使い分けることが重要です。

ここでは、代表的な3つの書き方を紹介します。

HTMLファイルに直接書き込む方法（インラインスタイル）

インラインスタイルは、スタイルを適用したいHTMLタグの中にstyle属性として直接CSSを書き込む方法です。

<p style="color: blue; font-size: 20px;">この段落の文字は青色で20pxになります。</p>

この方法は、特定の要素にだけ一時的にスタイルを適用したい場合など、ごく限定的な場面で使われます。

手軽ですが、修正が煩雑になるため多用は避けるべきでしょう。

HTMLのheadタグ内に記述する方法（内部スタイルシート）

内部スタイルシートは、HTMLファイルの<head>タグ内に<style>タグを設置し、その中にCSSをまとめて記述する方法です。

<!DOCTYPE html>
<html>
<head>
  <title>内部スタイルシート</title>
  <style>
    h1 {
      color: green;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>緑色の見出し</h1>
  <p>16pxの段落です。</p>
</body>
</html>

この方法は、そのHTMLページにしか使わないスタイルを適用する場合に有効です。

しかし、他のページと共通のデザインを適用したい場合には不向きと言えます。

外部ファイルとして読み込む方法（外部スタイルシート）

外部スタイルシートは、CSSの記述をHTMLファイルとは別の専用ファイル（拡張子は.css）に保存し、HTMLからそのファイルを読み込んで適用する方法です。

外部スタイルシートが、最も一般的で推奨される方法になります。

【style.css】

h1 {
  color: red;
}
p {
  line-height: 1.8;
}

【index.html】

<!DOCTYPE html>
<html>
<head>
  <title>外部スタイルシート</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>赤色の見出し</h1>
  <p>行間が1.8の段落です。</p>
</body>
</html>

HTMLの<head>タグ内で<link>タグを使い、href属性でCSSファイルの場所を指定して読み込みます。