こんにちは。この記事では、CSSの基本概念から実践的なコーディングまで、丁寧に解説していきます。HTMLの基礎が少し分かる方を対象にしていますが、HTMLも全く分からない方は、HTMLの基礎を学んでから、この記事に戻ってくると良いでしょう。

目次

CSSとは
開発環境の準備
CSSの基本構造
よく使われるCSSプロパティ
セレクタと詳細度
ボックスモデルと表示の制御
メディアクエリ
実践例

1. CSSとは

CSSは、ウェブページの見た目をスタイリングするための言語です。HTMLがウェブページの構造を定義するのに対し、CSSはその構造をどのように見せるかを指定します。CSSを使うことで、テキストの色やサイズ、背景色、レイアウトなどを自由にカスタマイズできます。

2. 開発環境の準備

CSSを書くための開発環境として、テキストエディタが必要です。ここではVisual Studio Code（VS Code）を使用します。VS Codeをインストールし、HTMLファイルとCSSファイルを作成しましょう。

3. CSSの基本構造

CSSは以下のような基本構造を持っています：

セレクタ {
  プロパティ: 値;
}

例えば、段落タグ（<p>）のテキスト色を赤にするには以下のように書きます：

p {
  color: red;
}

4. よく使われるCSSプロパティ

CSSには多くのプロパティがありますが、よく使われるものをいくつか紹介します：

color: テキストの色を指定します。
background-color: 背景色を指定します。
font-size: フォントサイズを指定します。
margin: 要素の外側の余白を指定します。
padding: 要素の内側の余白を指定します。

5. セレクタと詳細度

CSSセレクタは、どのHTML要素にスタイルを適用するかを指定します。代表的なセレクタには以下があります：

要素セレクタ：p、h1、divなど
クラスセレクタ：.className
IDセレクタ：#idName
擬似クラス：:hover、:activeなど

詳細度（Specificity）は、複数のスタイルが競合した場合にどのスタイルが適用されるかを決定します。詳細度は以下のように計算されます：

インラインスタイル：1000
IDセレクタ：100
クラスセレクタ：10
要素セレクタ：1

6. ボックスモデルと表示の制御

ボックスモデルは、HTML要素がどのようにスペースを占有するかを示す概念です。ボックスモデルは以下のように構成されています：

マージン（margin）
ボーダー（border）
パディング（padding）
コンテンツ（content）

ブロック要素とインライン要素の違いも理解しておきましょう。ブロック要素は、常に新しい行から始まり、幅いっぱいに広がります。一方、インライン要素は、行内に並びます。

7. メディアクエリ

メディアクエリを使うと、デバイスの種類や画面サイズに応じてスタイルを変えることができます。以下は、画面幅が768ピクセル以下の場合に適用されるスタイルの例です：

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

8. 実践例

最後に、実際のコーディング例を通してCSSの使い方を確認しましょう。例えば、以下のHTMLとCSSを使って、簡単なウェブページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>CSSの例ページ</h1>
    </header>
    <main>
        <p>これは段落です。</p>
        <p class="highlight">これはハイライトされた段落です。</p>
    </main>
</body>
</html>

/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

h1 {
  color: navy;
}

p {
  color: darkslategray;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

このコードを使って、自分のウェブページを作成し、CSSの効果を確認してみてください。
この記事では、CSSの基本から実践までをカバーしました。これらの知識を使って、ウェブページのデザインをカスタマイズし、より魅力的なウェブサイトを作成できるようになりましょう。