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

2026年2月12日

WEBページを作るとき、CSSという言葉を耳にしたことはありませんか？

CSSとは、文字や色、レイアウトなど、WEBページの見た目を整えるための仕組みです。

CSSを理解すると、HTMLとデザインの関係がわかるようになります。

この記事では、「CSSってなんだろう？」という疑問を持つ初心者でもわかるように、CSSの基本と書き方を解説していきます。

CSSとは？WEBページにおける役割と仕組み

CSSとは、WEBページの見た目やレイアウトを指定するための言語です。

文字の色や大きさ、フォント、背景色、余白、配置方法などを指定することで、ページの印象を細かく調整できます。

あらかじめルールを決めておくことで、複数の要素に同じデザインをまとめて適用することも可能です。

つまり、CSSを使うことで、ページ全体に統一感が生まれ、読みやすく見やすいWEBページを作れるようになります。

CSSとHTMLとの違いとは？

HTMLとCSSは、WEBページを作るうえで役割がはっきり分かれています。

HTMLは「見出し」「文章」「画像」などを使って、ページの内容や構造を作るためのものです。

一方で、CSSは、その内容に対して「文字を何色にするか」「どこに配置するか」など、見た目を整える役割を持っています。

家づくりにたとえると、HTMLが建物の骨組み、CSSが内装やデザインを整える工程だと考えるとわかりやすいでしょう。

CSSの基本的な書式

CSSは、「どの要素に」「何を」「どう変えるか」をセットで指定するのが基本です。

このルールは、セレクタ・プロパティ・値の3つで成り立っています。

CSSの基本的な書式

セレクタ	装飾したいHTML要素
プロパティ	変更したい項目（色・大きさなど）
値	具体的な指定内容

スクロールできます

セレクタ	装飾したいHTML要素
プロパティ	変更したい項目（色・大きさなど）
値	具体的な指定内容

たとえば、「見出しの文字色を赤にする」場合、「color」は文字色、「font-size」は文字の大きさを表します。

値には、その内容を具体的に書き、どのような見た目にするかを指示します。

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

見出し（h1）が赤くなり、文字が16pxで表示されるという流れになっています。

つまり、プロパティと値を「{}」で囲むことで、セレクタで指定した要素に対してデザインを反映できるという仕組みです。

CSSを記述する3つの方法

CSSには、外部スタイルシート・内部スタイルシート・インラインスタイルの3つの記述方法があります。

書く場所や影響範囲が異なり、使い分けを理解することで、管理しやすくトラブルの少ないWEBページが作成できます。

ここでは、3つの方法の違いと特徴を順番に見ていきましょう。

1：外部スタイルシート

外部スタイルシートとは、CSSをHTMLとは別のファイル（例：style.css）にまとめて記述し、HTMLから読み込んで使う方法です。

HTMLの<head>内に、次のような記述を追加してCSSファイルを読み込みます。

そして、CSSファイルには、たとえば次のようなスタイルを書きます。

h1 {color: red;}
p { color: black;}

この場合、ブラウザ上ではページ内の見出しが赤になり、本文が黒色で表示されます。

外部スタイルシートの大きな特徴は、1つのCSSファイルを複数のページで使い回せる点です。

そのため、デザインの管理や修正がしやすく、実務やWEB制作の現場では最も一般的に使われています。

初心者でも、早い段階からこの方法に慣れておくとよいでしょう。

2：内部スタイルシート（styleタグ）

内部スタイルシートとは、HTMLファイルの中にある<style>タグ内へ、直接CSSを記述する方法です。

上記の例では、同じHTMLファイル内にあるすべてのpタグの文字が、ブラウザ上で緑色に表示されます。

内部スタイルシートの特徴

1ページだけデザインを変えたいときに便利
HTMLとCSSを同じファイル内で管理できる
ページ数が増えると修正や管理がしづらくなる

外部スタイルシートとは異なり、CSSを別ファイルとして管理する必要がありません。

そのため、内部スタイルシートは小規模なページやデザイン確認、検証用として使われることが多い書き方です。

3：インラインスタイル（style属性）

インラインスタイルとは、HTMLタグに直接CSSを記述する方法です。

style属性を使い、その要素だけにデザインを指定できます。

<p>3つの文章の中で</p>
<p style=”color: red;”>ここだけ赤くする</p>
<p>表現もできます。</p>

上記の表示では、ブラウザ上で次のように表示されます。

3つの文章の中で
ここだけ赤くする
表現もできます。

ほかのpタグには影響しないため、「ここだけ少し変えたい」という場合にすぐ反映できるので便利です。

一方で、HTMLとCSSが混ざってしまうため、コードが読みにくくなりやすいという欠点もあります。

インラインスタイルの特徴

特定の要素だけにスタイルを即時反映できる
CSSの中でも優先度が高く、他の指定より反映されやすい
多用するとHTMLが複雑になり、理解しにくい

そのため、インラインスタイルは基本的には使いすぎず、外部や内部スタイルシートを優先して使うのがおすすめです。

基本のセレクタ指定方法を覚えよう

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

セレクタにはいくつか種類がありますが、まずは基本となる以下の3つをチェックしておきましょう。

基本のセレクタ指定方法

タグ名
class
id

これらを使い分けられるようになると、CSSがぐっと書きやすくなります。

タグ名で指定する（タイプセレクタ）

タイプセレクタとは、HTMLのタグ名をそのまま使ってスタイルを指定する方法です。

たとえば、「h1」と指定すると、ページ内にあるすべての見出し（h1タグ）が対象になります。

h1 { color: black;}

この場合、すべてのh1の文字色が黒で表示されます。

同じデザインをページ全体にまとめて適用したいときや、見出しや本文などの基本スタイルを設定するときに便利な指定方法です。

class名で指定する（クラスセレクタ）

クラスセレクタは、class属性で付けた名前を使ってスタイルを指定する方法です。

同じclass名を付けた要素には、同じデザインを何度でも適用できます。

html<p class=”text”>文章</p>
css.text { font-size: 16px;}

上記の例では、textというclassが付いた要素の文字サイズが16pxで表示されます。

見出しや文章、ボタンなど、同じデザインを複数の箇所で使いたい場合に、効率よくスタイルを整えられます。

id名で指定する（IDセレクタ）

IDセレクタは、id属性で付けた名前を使ってスタイルを指定する方法です。

idはページ内で同じ名前を1度しか使えないため、特定の1箇所だけにスタイルを当てたい場合に使用できます。

html<div id=”main”>この中にメインの内容が入ります</div>
css#main { width: 100%;}

この例では、mainというidが付いた要素の横幅が100％で表示されます。

ページのメインエリアなど、役割が決まっている部分にだけデザインを指定したいときに適した方法です。

【補足】classとidの使い分け

classとidの使い分けの基本ルールは、「繰り返し使うならclass」「1つだけならid」です。

classは複数の要素に同じスタイルを適用できるため、デザイン調整ではこちらを使うことがほとんどです。

一方、idはページ内で1度しか使えないため、特定のエリアを指定したい場合や、JavaScriptと連携する際によく使用されます。

初心者のうちは、まずclassを中心に考えると混乱しにくいでしょう。

文字と装飾のCSSプロパティ

CSSでは、文字の色や大きさ、背景、枠線などを「プロパティ」を使って指定します。

これらを使いこなせるようになると、WEBページの見た目を調整でき、デザインの表現も広がっていきます。

ここでは、初心者がまず覚えておきたい、よく使われるプロパティを紹介します。

文字の色・大きさ・フォントを変える

文字の見た目は、CSSのプロパティを使って調整できます。

以下の3つは、文字の印象や読みやすさに大きく関わってくるため、CSSの中でも特によく使われます。

文字を変えるプロパティ

color	文字色
font-size	文字の大きさ
font-family	フォントの種類

スクロールできます

color	文字色
font-size	文字の大きさ
font-family	フォントの種類

これらのプロパティを使用して、CSSでpタグに対して指定してみます。

p { color: #444444; font-size: 16px; font-family: sans-serif;}

pタグで書かれた文章が、やや柔らかい黒色で、標準的な大きさのゴシック体フォントで表示されます。

文字の設定はページ全体の印象を左右するため、見た目と読みやすさを意識した調整が大切です。

背景色や背景画像を設定する

CSSのプロパティを使うと、背景の色や画像を設定できます。

背景を変えることで、要素のまとまりが分かりやすくなり、ページ全体の雰囲気も整います。

背景を設定するプロパティ

background-color	背景色を指定する
background-image	背景画像を指定する

スクロールできます

background-color	背景色を指定する
background-image	背景画像を指定する

背景色を指定するプロパティを使用して、CSSでカラーを変えてみます。

.box { background-color: #f5f5f5;}

この場合、boxの要素に対して、薄いグレーの背景色が適用されます。

また、画像を背景として表示したい場合は、画像ファイルにパスを次のように指定します。

.box { background-image: url(bg.jpg);}

背景色や背景画像は、セクションの強調や視線誘導にも効果的なので、適宜取り入れてみましょう。

枠線を引く・角を丸くする

CSSでは、要素のまわりに枠線を引いたり、角を丸くしたりできます。

以下のプロパティを使用すると、ページ内の区切りや強調したい部分がわかりやすくなり、整理されたデザインが可能です。

枠線を調整するプロパティ

border	線の太さ・種類・色をまとめて設定できる
border-radius	要素の角を丸くできる

スクロールできます

border	線の太さ・種類・色をまとめて設定できる
border-radius	要素の角を丸くできる

たとえば、ご紹介した2つのプロパティを同時に使用してコードを書いてみましょう。

.box { border: 1px solid #cccccc; border-radius: 8px;}

上記の指定では、box要素に薄いグレーの1pxの枠線が表示され、角が少し丸くなります。

枠線と角丸を組み合わせることで、カードやボタンのような見た目になり、やわらかく親しみやすい印象を与えられます。

要素の配置を中央・右寄せにする

要素を配置する位置も、CSSを使って調整できます。

文字や見出しの横方向の位置を指定したい場合は、「text-align」プロパティを使用します。

たとえば、次のように指定すると、classに「text」を指定した要素内の文字が中央揃えになります。

.box { border: 1px solid #cccccc; border-radius: 8px;}

また、右寄せにしたい場合は「text-align: right;」を指定します。

この指定により、タイトルやテキストを目的に応じて、適切な位置に配置できます。

要素の配置には、文字やインライン要素を揃える「text-align」のほか、余白を調整する「margin」、要素の配置方法を制御する「position」などが使われます。

目的に応じて使い分けることで、レイアウトを柔軟に調整できます。

他のプロパティについては、次章で詳しく解説します。

脱・初心者！レイアウトと余白を操るCSS

レイアウトや余白を意識すると、WEBページの見た目が一気に整い、プロのような印象になります。

ここからは、要素の大きさや間隔、配置をコントロールするCSSの基本を学んでいきましょう。

要素の幅と高さを指定する

要素は「width」（幅）と「height」（高さ）のプロパティを使うことで、大きさを変更できます。

複数の要素のサイズを揃えたいときや、レイアウト全体を整えたいときに便利です。

たとえば、次のように指定すると、box要素が横幅300px、高さ200pxで表示されます。

.box { width: 300px; height: 200px;}

このようにサイズを指定すると、カードデザインや画像枠などの見た目が揃い、ページ全体のバランスも整います。

複数の要素を並べた場合も、サイズが統一されていると、ユーザーにとって見やすいページになります。

余白の基本「margin」と「padding」の違い

CSSでは、要素の周りの余白を調整するために「margin」と「padding」が使われます。

それぞれの使い方は以下のとおりです。

「margin」と「padding」の使い分け方法

margin	要素の外側の余白で、他の要素との距離を開けたいときに使う
padding	要素の内側に作る余白で、文字や画像が枠にくっつかないように調整する

スクロールできます

margin	要素の外側の余白で、他の要素との距離を開けたいときに使う
padding	要素の内側に作る余白で、文字や画像が枠にくっつかないように調整する

たとえば、次のように指定すると、要素の外側には20pxのスペースが確保され、枠線の内側には16pxの余白ができるため、内容が詰まりすぎない見た目になります。

.box { width: 300px; height: 200px;}

marginで外側の間隔を、paddingで内側のスペースを調整することで、ユーザーが快適に閲覧できるスッキリしたレイアウトになります。

要素を横並びにする「Flexbox」

Flexboxとは、複数の要素を横一列に並べたり、位置をそろえたりできるCSSの仕組みです。

横並びにしたい要素をまとめている親要素に、次のように指定します。

.box { width: 300px; height: 200px;}

上記の指定をすると、親要素の中にある子要素が自動的に横に並びます。

Flexboxを使うと、要素が並列に配置されるため、同じレベルの情報であることが直感的に伝わります。

カードやボタン、画像ギャラリーなど、さまざまな場面で活用できます。

さらに、要素の中央揃えや均等に間隔を空けることも可能で、ページ全体のレイアウトを整える際に非常に便利です。

要素を自由に配置する「position」

positionとは、要素の配置方法を自由に指定できるCSSプロパティです。

よく使われる指定は以下の3つです。

「position」でよく使用される指定

relative	元の位置を基準に少し動かすときに使う
absolute	親要素の枠を基準に、好きな場所に配置できる
fixed	画面に固定し、スクロールしても位置が変わらない

スクロールできます

relative	元の位置を基準に少し動かすときに使う
absolute	親要素の枠を基準に、好きな場所に配置できる
fixed	画面に固定し、スクロールしても位置が変わらない

たとえば、次のように指定すると、boxの要素を親要素の左上から10pxずつの位置に固定できます。

.box { width: 300px; height: 200px;}

positionを使うと、ボタンやメニューなど、ページ上で目立たせたい部分を目的の場所に配置できます。

見た目のバランスを整えたり、操作性を向上させたりする際に便利です。