Webサイトを作成する際に、HTMLと並んで欠かせないのがCSS(Cascading Style Sheets)です。HTMLがWebページの「骨組み」を作るのに対し、CSSはそのデザインやレイアウトを担当し、より見た目の良いページを作るために使用されます。
この記事では、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が必須なので、ぜひ学んでみてください!