CSSとは？基本構文と使い方をわかりやすく解説
2025.07.14
CSSとは？基本構文と使い方をわかりやすく解説
Webページの見た目を整えるために欠かせないのがCSS（Cascading Style Sheets）です。HTMLだけでは表現できない「色」「文字の大きさ」「余白」「レイアウト」などをCSSで指定することで、視覚的に美しいWebページを作成できます。
CSSとは？
CSSとは、HTMLで記述された要素にスタイル（見た目のデザイン）を与えるための言語です。例えば、文字の色を赤くしたり、画像のサイズを調整したりといったことができます。
CSSの3つの記述方法
CSSには、以下の3つの記述方法があります：
- 外部スタイルシート：別ファイル（.css）を作ってHTMLから読み込む方法（推奨）
- 内部スタイルシート：<style>タグをHTML内に記述
- インラインスタイル：HTMLタグの中に直接書く
例：外部CSSファイルの読み込み
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>基本的なCSS構文
CSSの構文は以下のように書きます：
CSS
セレクタ {
プロパティ: 値;
}例：
CSS
h1 {
color: blue;
font-size: 24px;
}この場合、「h1」タグの文字を青色・24ピクセルに設定します。
よく使うCSSプロパティ
color：文字の色background-color：背景色font-size：文字サイズmargin：外側の余白padding：内側の余白border：枠線の指定
CSSを適用する対象（セレクタ）
CSSは「どの要素に適用するか」をセレクタで指定します。以下のような種類があります：
- タグセレクタ：例：
h1,p,img - クラスセレクタ：例：
.btn,.highlight - IDセレクタ：例：
#main,#header
まとめ
- CSSはHTMLにデザインを加えるためのスタイル言語
- 3つの記述方法（外部・内部・インライン）がある
- 基本構文を覚えれば、視覚的に整ったページが作れる
ALTERNATE toolsでは、今後CSSの活用例やレイアウトテンプレートも公開予定です。
