CSSとは？初心者向けに基本を解説

Webサイトを作成する際に、HTMLと並んで欠かせないのがCSS（Cascading Style Sheets）です。HTMLがWebページの「骨組み」を作るのに対し、CSSはそのデザインやレイアウトを担当し、より見た目の良いページを作るために使用されます。

この記事では、CSSの基本概念や書き方、具体的な使用例をわかりやすく解説します！

[目次を開く]

1. CSSとは？ 2. CSSの書き方 (1) インラインCSS（HTMLタグ内に直接指定） (2) 内部CSS（<style>タグ内に記述） (3) 外部CSS（別のCSSファイルを作成して読み込む） 3. CSSの基本プロパティ 4. CSSとHTMLの関係 5. CSSを学ぶメリットまとめ

1. CSSとは？

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

例えば、HTMLで作成したページの文字の色や背景色、フォントサイズ、余白の調整などをCSSで設定できます。

🔹 HTMLのみのWebページ

<!DOCTYPE html>
<html>
<head>
    <title>CSSとは？</title>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは本文の段落です。</p>
</body>
</html>

⬇️ CSSを適用すると...

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: lightblue; }
        h1 { color: darkblue; font-size: 30px; }
        p { color: gray; }
    </style>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは本文の段落です。</p>
</body>
</html>

✅ 背景色が青くなり、見出しの色やサイズ、本文の色が変わりました！

2. CSSの書き方

CSSは3つの方法で適用できます。

(1) インラインCSS（HTMLタグ内に直接指定）

<p style="color: red; font-size: 20px;">赤い文字の段落</p>

✅ メリット: すぐに適用できる

❌ デメリット: たくさんの要素に適用すると管理が大変

(2) 内部CSS（`<style>`タグ内に記述）

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

✅ メリット: HTMLファイル内にまとめて記述できる

❌ デメリット: ページごとにCSSを書かないといけない

(3) 外部CSS（別のCSSファイルを作成して読み込む）

style.css（CSSファイル）

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

HTMLファイルで読み込む:

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

✅ メリット: 複数のHTMLファイルで共通のCSSを使える

❌ デメリット: 別のファイルを用意する手間がある

3. CSSの基本プロパティ

CSSにはさまざまなプロパティ（設定項目）がありますが、代表的なものを紹介します。

プロパティ	説明	例
`color`	文字の色を変更	`color: red;`
`font-size`	文字の大きさを変更	`font-size: 20px;`
`background-color`	背景色を変更	`background-color: yellow;`
`width` / `height`	要素の幅・高さを指定	`width: 200px; height: 100px;`
`margin`	外側の余白を設定	`margin: 10px;`
`padding`	内側の余白を設定	`padding: 10px;`
`border`	枠線を指定	`border: 2px solid black;`

例: 見出しを青くし、文字サイズを30pxにする

h1 {
    color: blue;
    font-size: 30px;
}

4. CSSとHTMLの関係

HTML → 構造 / CSS → デザイン

[ HTML ]  → ページの骨組み（見出し・文章）
[ CSS ]   → 見た目（色・フォント・レイアウト）

例えば、以下のHTMLページにCSSを適用すると...

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: lightgray; }
        h1 { color: darkblue; text-align: center; }
        p { font-size: 18px; color: gray; }
    </style>
</head>
<body>
    <h1>CSSの例</h1>
    <p>これはCSSを適用した段落です。</p>
</body>
</html>

✅ 見出しの色が青になり、文字が中央寄せに！

✅ 段落の文字サイズが18pxになり、灰色になった！

5. CSSを学ぶメリット

(1) Webサイトを自由にデザインできる

CSSを使えば、Webサイトの見た目を自由にカスタマイズ可能！

(2) スマホ対応（レスポンシブデザイン）も簡単

@media を使えば、スマホでも見やすいサイトを作れる！

@media screen and (max-width: 600px) {
    body { background-color: lightgreen; }
}

（画面幅600px以下のとき、背景色を緑にする）

(3) Web開発の基礎として必須

HTMLだけではシンプルすぎるため、CSSの知識はWeb制作に欠かせません！

まとめ

✔ CSSはWebページのデザインやレイアウトを指定する言語！

✔ HTMLの骨組みにCSSを適用することで、美しいデザインが可能！

✔ 外部CSSを使うと、複数のページでスタイルを統一できる！

✔ レスポンシブデザインを取り入れて、スマホ対応も可能！

WebサイトをおしゃれにカスタマイズするにはCSSが必須なので、ぜひ学んでみてください！

アルアカ - Arcadia Academia