CSSとは？基本構文と使い方をわかりやすく解説

CSSとは？基本構文と使い方をわかりやすく解説

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の活用例やレイアウトテンプレートも公開予定です。

PAGE TOP