CSSって何？わかりやすく解説

2026年4月23日2026年4月25日

「Webサイトってどうやって作るんだろう？」って思ったとき、HTMLという言葉を調べると「じゃあCSSって何なの？」って疑問が出てきたりするよね。HTMLだけで作ったページを見て、なんか味気ないな…って感じたことがある人も多いはず。実はその「なんか味気ない」を解決するのがCSSなんだ。この記事を読めば、CSSが何者で、なぜWebサイトに欠かせないのかがしっかりわかるよ。

HTMLって聞いたことあるけど、CSSって全然別のやつなの？何が違うの？

いい質問！簡単に言うと、HTMLは「このページに何を載せるか」を決めるもので、CSSは「それをどう見せるか」を決めるものだよ。人間で例えると、HTMLが「骨格・内臓」、CSSが「服・髪型・メイク」みたいなイメージ。同じ骨格でも、服装次第で全然印象が変わるでしょ？Webサイトもそれと同じで、HTMLだけだと文字がただ並んでいるだけの味気ないページになっちゃうんだ。

じゃあCSSって具体的に何ができるの？色を変えたりするやつ？

そう！色を変えるのもCSSの仕事だよ。でも、できることはそれだけじゃなくて、文字の大きさを変えたり、要素を横並びにしたり、ボタンをふわっとアニメーションさせたり、スマホ画面に合わせてレイアウトを変えたり……とにかくWebサイトの見た目に関わること全部がCSSの担当なんだ。君が「かっこいい！」「きれい！」って思ったWebサイトのデザイン、あれ全部CSSで作られてるんだよ。

CSSって難しそう……。プログラミングみたいな感じ？

実は、CSSはプログラミング言語じゃなくてスタイルシート言語っていう分類なんだ。つまり「命令を書いてコンピューターに計算させる」ものじゃなくて、「これをこういう見た目にしてください」ってお願いを書くものだよ。書き方はすごくシンプルで、「どの部分に」「何を」「どうする」という3つのセットを書くだけ。最初の一歩はめちゃくちゃ簡単だから安心してね！

「Cascading Style Sheets」って正式名称らしいけど、「カスケーディング」って何？

「カスケーディング」っていうのは、つまり「上から順番に流れていく」ということだよ。滝が上から下に流れるイメージ！CSSでは複数のスタイルが重なったとき、どのスタイルを優先するかのルールがあって、それが「滝のように優先順位が流れていく」から「カスケーディング」って名前がついてるんだ。最初は気にしなくてOKだけど、「なぜか思ったスタイルにならない」ってときに関係してくる大事な仕組みだよ。

📝 3行でまとめると

CSSはWebサイトの 見た目・デザイン を担当するスタイルシート言語で、HTMLと組み合わせて使う
「どの部分に・何を・どうする」という シンプルな書き方 でWebページを自由にデザインできる
「カスケーディング」とは スタイルの優先順位 が上から流れていく仕組みのことを指す

もうちょっと詳しく

CSSは1996年にW3C（Webの標準を決める団体）が初めて仕様を発表したもので、今では世界中のあらゆるWebサイトで使われているよ。HTMLがWebページの「中身」を作るのに対して、CSSはそのページを「どう見せるか」を決める。たとえば「この見出しは赤くて大きい文字にしたい」「この部分は背景を薄いグレーにしたい」「このボタンにはカーソルを当てたときに色が変わる効果をつけたい」——そういった見た目の指示を全部CSSが引き受けてくれるんだ。HTMLとCSSを分けて管理することで、デザインだけを変えたいときにHTMLを触らなくて済むし、1つのCSSファイルをたくさんのページで共有することもできる。Webサイトを作るうえで、CSSはHTMLと同じくらい絶対に知っておくべき超基本の技術だよ。

💡 ポイント
HTMLが「骨格」でCSSが「服装」！セットで覚えよう

⚠️ よくある勘違い

❌ 「CSSはHTMLの中に書くもの」
→ HTMLタグの中に直接書くやり方（インラインスタイル）もあるけど、それは例外的な使い方。本来は別ファイルに分けて書くのが正しいやり方で、HTMLに混ぜて書き続けると管理がぐちゃぐちゃになってしまう。

⭕ 「CSSは基本的に別ファイル（.css）に書く」
→ 「style.css」のような専用ファイルにまとめて書くのがベスト。1つのCSSファイルを複数のHTMLページで使い回せるし、デザインを変えたいときもCSSファイルだけ編集すればOKになるので、管理がとても楽になるよ。

なるほど〜、あーそういうことか！

[toc]

CSSってそもそも何をするもの？HTMLとの違いを理解しよう

HTMLだけのページってどんな見た目？

まずHTMLだけで作ったWebページを想像してみてよ。文字はすべて黒、背景は白、見出しは少し大きいだけ、リンクは青くて下線つき……。シンプルすぎて、正直ちょっと退屈な見た目だよね。でも、それが「素のHTML」の姿なんだ。

HTMLはつまり「このページには見出しがあって、段落があって、リンクがある」という構造と内容を伝えるためのものなんだ。見た目を良くすることはHTMLの仕事じゃない。だからHTMLだけで作られたページはどうしても地味になっちゃうんだよ。

君がよく見ているおしゃれなサイト——カラフルなボタン、きれいなレイアウト、画像が並んだギャラリー、スクロールするとフワッと現れるアニメーション——あれ全部CSSの仕事なんだ。

CSSはWebページのスタイリストだ

CSSはつまり「Webページの服を着せる人」みたいな存在だよ。同じ人（HTML）でも、カジュアルな服を着せるかスーツを着せるかで印象がガラッと変わるでしょ？

たとえば、同じ「ようこそ！」という見出しでも——

文字を赤くして、サイズを60pxにして、中央揃えにする
文字をグラデーションカラーにして、影をつける
文字をアニメーションでじわじわ表示させる

——こんな風に、CSSを変えるだけで全然違う見た目を作れるんだ。HTMLの中身（「ようこそ！」という文章）は何も変わってないのに、ね。これがHTMLとCSSを分ける一番のメリットで、コンテンツとデザインを独立して管理できるから、どちらかを変えたいときに片方だけ編集すればいいんだよ。

CSSはプログラミング言語じゃない

「CSS＝プログラミング」って思ってる人も多いけど、正確には違う。CSSはスタイルシート言語で、「条件分岐（if文）」とか「繰り返し（ループ）」みたいなプログラミング的な処理はしない（一部の高度な機能を除けば）。あくまで「こういう見た目にしてください」というお願いを書くだけ。だから、プログラミングが苦手な人でもCSSはとっつきやすいよ！

CSSの書き方の基本——たった3つのセットで成り立っている

セレクター・プロパティ・値、この3つだけ

CSSの書き方はめちゃくちゃシンプルで、基本はこの形だよ：

セレクター：「どの部分に」適用するか（例：h1、p、.buttonなど）
プロパティ：「何を」変えるか（例：color、font-size、backgroundなど）
値：「どうする」か（例：red、24px、#ff0000など）

実際のコードで見てみよう。「h1の文字を赤くする」ならこう書く：

h1 {
  color: red;
}

「h1」がセレクター（どの部分）、「color」がプロパティ（何を）、「red」が値（どうする）だよ。これだけ！中括弧「{ }」の中にプロパティ：値；のセットを書いていく。複数の設定をしたいときは、セミコロン「;」で区切って続けて書けばいい。

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

これで「h1を赤・32px・中央揃えにする」という3つの指示ができたよ。

セレクターの種類を知ろう

セレクターには色んな種類があって、「どの要素に適用するか」を細かく指定できるんだ。主なものをざっくり紹介するね：

タグセレクター：「p」「h1」「a」など、HTMLタグの名前をそのまま書く。そのタグ全部に適用される
クラスセレクター：「.button」のように、ドット（.）をつけて書く。HTMLでclass=”button”と書いた要素に適用される
IDセレクター：「#header」のように、シャープ（#）をつけて書く。HTMLでid=”header”と書いた要素に適用される。ページに1つしかない要素に使う

一番よく使うのはクラスセレクターだよ。「このボタンだけ赤くしたい」「このカードだけ影をつけたい」みたいに、特定の要素だけに스타イルを当てたいときに大活躍するんだ。

CSSはどうやってHTMLと繋ぐの？3つの方法を知っておこう

一番おすすめ：外部ファイルとして読み込む方法

CSSをHTMLと繋げる方法は3種類あるんだけど、実際の現場では圧倒的に「外部ファイル」方式が使われてるよ。「style.css」みたいな別ファイルを作って、HTMLの<head>タグの中でこう書いて読み込む：

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

この方法のメリットは、1つのCSSファイルを複数のHTMLページで共有できること。たとえばサイト全体のデザインを変えたいとき、style.cssを1か所書き換えるだけで全ページに反映されるんだ。すごく効率的でしょ？

ページ内に書く方法と、タグに直接書く方法

外部ファイル以外にも、HTMLの<head>の中に<style>タグを使って書く方法（内部スタイルシートとつまりページ内に直接CSSを書く方式）と、HTMLタグに直接「style=”color:red;”」と書く方法（インラインスタイルとつまりタグ1個1個に直接書くやり方）もある。でも後者2つは管理が大変になりやすいので、基本的には外部ファイル方式を使うのがベストだよ。

優先順位はどうなる？カスケーディングの仕組み

複数の場所からCSSが当たったとき、どれが優先されるのかが「カスケーディング（cascading）」のルール。基本的には「より具体的に指定しているほど優先される」と覚えておくといいよ。

インラインスタイル（タグに直接書いたもの）が一番強い
次にIDセレクター（#）
次にクラスセレクター（.）
一番弱いのがタグセレクター（h1、pなど）

「スタイルを変えたつもりなのに変わらない！」ってときは、もっと強い指定が別の場所でかかってることが多い。これがわかると、CSSのトラブルシューティングがぐっとラクになるよ。

覚えておきたい！よく使うCSSプロパティ一覧

文字・テキスト系

Webサイトの要素で一番多いのは「文字」だよね。文字に関するプロパティを知っておくとすぐ使えるよ：

color：文字の色。「red」「blue」のほか、「#ff0000」のようなカラーコードでも指定できる
font-size：文字の大きさ。「24px」「1.5em」など。pxとはつまりピクセル（画面上の点の単位）のこと
font-weight：文字の太さ。「bold」で太字になる
font-family：フォントの種類。「’Noto Sans JP’」みたいにフォント名を書く
text-align：文字の揃え方。「center」で中央揃え、「right」で右揃え
line-height：行間。「1.8」みたいに数字で指定する。ブログ記事は1.7〜1.9くらいが読みやすいよ

ボックス・レイアウト系

Webデザインでは、すべての要素がつまり「四角いボックス」として扱われるんだ。これをボックスモデルと呼んで、レイアウトを理解するうえで超重要な概念だよ：

width / height：ボックスの幅と高さ
margin：ボックスの外側の余白。他の要素との間隔を空けるのに使う
padding：ボックスの内側の余白。文字とボックスの枠線の間を空ける
border：ボックスの枠線。「1px solid black」で黒い1pxの枠線になる
border-radius：ボックスの角を丸くする。「50%」にすると丸くなる（アイコンによく使う）
background-color：ボックスの背景色

marginとpaddingは特に混乱しやすいから、「marginは外側（他との距離）、paddingは内側（中身との距離）」って覚えておくとバッチリだよ。

表示・配置系

display：要素の表示方法。「flex」にするとフレックスボックスとつまり横並びレイアウトを簡単に作れる仕組みが使えるようになる
position：要素の配置方法。「absolute」や「fixed」で自由な位置に配置できる
opacity：透明度。0が完全透明、1が不透明

CSSを使えばこんなことができる！実例で感じてみよう

ボタンをおしゃれにする

「お問い合わせ」ボタンを例に、CSSの力を実感してみよう。HTMLだけだと、ただのグレーのボタンが表示されるだけ。でもCSSを使うと：

背景を鮮やかな青（#0070f3）にする
文字を白にする
角を丸くする（border-radius: 8px）
カーソルを当てたときに少し暗い青に変わるアニメーションをつける
影をつけてボタンが浮いて見えるようにする

こんな指定を書くだけで、プロが作ったようなおしゃれなボタンが完成するんだ。デザインが全部CSSで制御されてるから、「やっぱり緑にしたい」と思ったら色のコードを1か所変えるだけで即座に反映されるよ。

スマホとパソコンで見た目を変える：レスポンシブデザイン

今の時代、Webサイトはパソコンだけじゃなくてスマホでもタブレットでも見られるよね。画面の大きさが違うのに同じレイアウトのままだと、スマホで見たときに文字が小さすぎたり、横スクロールが必要になったりして読みにくくなっちゃう。

そこで使うのがメディアクエリというCSSの機能で、つまり「画面幅が〇〇px以下のときはこのスタイルを使う」という条件付きのスタイル指定ができる仕組みだよ。

/* スマホ向けのスタイル（画面幅768px以下） */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

この書き方で「メニューを横並びから縦並びに変える」みたいな対応ができる。同じHTMLファイルを使いながら、CSSだけでスマホとパソコンで全然違う見た目を実現できるのがレスポンシブデザイン（つまり画面サイズに応じてデザインが自動で調整される仕組み）の考え方だよ。今のWebサイトは全部これが基本になってるんだ。

アニメーションで動きをつける

CSSはジャバスクリプト（JavaScript）を使わなくても、簡単なアニメーションを作れるんだ。たとえばカーソルを当てたときにふわっと大きくなるカード、ゆっくり色が変わるボタン、ぐるぐる回るローディングアイコン——こういった動きがtransitionプロパティやanimationプロパティで実現できる。

Webサイトを見ていて「あ、このボタンなんか気持ちいい動き方するな」って感じたことがあれば、それ、たぶんCSSのtransitionが効いてるよ。たった1〜2行のCSSで、サイト全体の「触り心地」がグッと上がるんだ。

こうして見てみると、CSSってただの「色を変えるもの」じゃなくて、Webデザインのほぼすべてを担う超重要な技術だってわかるよね。HTMLを覚えたら次はCSS——この2つをセットでマスターすることが、Webサイト作りの第一歩だよ。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

案内人

大人になってから「これ知らなかった…」と恥ずかしい思いをした経験から、このサイトを作りました。お金・仕事・社会のしくみって、学校で教えてくれないのに知らないと損することだらけ。むずかしい言葉を「あーそういうことか！」って思えるまでかみ砕いて説明するのが得意です。主に経済・法律・税金・ライフイベント周りの用語を毎日更新中。