プログラミング

CSS 基本ガイド

最終更新： 23/04/2025
1 分の読み

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、ウェブページのデザインやレイアウトを整えるためのスタイルシート言語です。HTML（HyperText Markup Language）がページの内容や構造を定義するのに対し、CSSはその内容をどのように表示するかを指定します。この記事では、CSSの基本から応用までを徹底的に解説し、実際に使用する方法を紹介します。

1. CSSの基本概念

CSSは、ウェブページのスタイルを管理するための言語で、要素の色、フォント、レイアウトなどを定義します。CSSはHTMLコードとは独立して記述されますが、HTMLの要素にスタイルを適用するためにリンクされます。CSSは、主に以下の3つの方法でHTMLに適用されます。

関連記事

1.1 インラインCSS

インラインCSSは、HTMLタグ内で直接スタイルを記述する方法です。例えば、次のようにタグ内でstyle属性を使用します。

html
<p style="color: blue; font-size: 20px;">これは青色のテキストです。p>

この方法は簡単ですが、大規模なプロジェクトには向いていません。スタイルを変更する場合、各要素を個別に編集する必要があり、保守性が低くなります。

1.2 内部CSS

内部CSSは、HTMLファイルのセクション内に記述する方法です。スタイルを一元管理できるため、インラインCSSよりも効率的です。

html
<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }
  style>
head>

1.3 外部CSS

外部CSSは、スタイルを別のCSSファイルに記述し、そのファイルをHTMLでリンクする方法です。これにより、複数のHTMLファイルで同じスタイルを共有できるため、特に大規模なプロジェクトで非常に便利です。

html
<head>
  <link rel="stylesheet" href="styles.css">
head>

2. セレクタとプロパティ

CSSは「セレクタ」と「プロパティ」を使用してスタイルを定義します。セレクタはスタイルを適用するHTML要素を指定し、プロパティはその要素に適用するスタイルの内容を定義します。

2.1 セレクタの種類

CSSセレクタは、HTML要素を指定する方法です。主なセレクタには以下の種類があります。

  • 要素セレクタ: 特定のHTMLタグにスタイルを適用します。

    css
    p {
  color: green;
}

  • クラスセレクタ: 特定のクラス属性を持つ要素にスタイルを適用します。

    css
    .highlight {
  background-color: yellow;
}

  • IDセレクタ: 特定のID属性を持つ要素にスタイルを適用します。IDはページ内で一意であるべきです。

    css
    #header {
  text-align: center;
}

  • 子要素セレクタ: 親要素とその子要素にスタイルを適用します。

    css
    div > p {
  font-weight: bold;
}

2.2 プロパティの種類

CSSプロパティは、スタイルを実際に設定するための指示です。主なプロパティには次のようなものがあります。

  • color: テキストの色を指定します。

    css
    p {
  color: blue;
}

  • background-color: 背景色を指定します。

    css
    div {
  background-color: lightgrey;
}

  • font-size: フォントのサイズを指定します。

    css
    h1 {
  font-size: 32px;
}

  • margin: 要素の外側の余白を指定します。

    css
    div {
  margin: 20px;
}

  • padding: 要素の内側の余白を指定します。

    css
    div {
  padding: 10px;
}

3. レイアウトの基本

CSSは、ウェブページのレイアウトを制御するための多くの強力なツールを提供します。最も基本的なレイアウトプロパティは、ボックスモデルです。

3.1 ボックスモデル

ボックスモデルは、すべてのHTML要素がボックスとして扱われる概念です。ボックスは、次の4つの領域で構成されています。

  1. コンテンツ（Content）: 要素の実際の内容（テキストや画像など）。

  2. パディング（Padding）: コンテンツと境界線の間の空間。

  3. ボーダー（Border）: 要素の枠線。

  4. マージン（Margin）: 要素と他の要素との間の空間。

css
div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

3.2 フレックスボックス（Flexbox）

フレックスボックスは、要素を行または列に簡単に配置できるCSSのレイアウト方法です。display: flex;を使用して親要素に適用します。

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3.3 グリッドレイアウト（CSS Grid）

CSS Gridは、複雑なレイアウトを構築するための非常に強力なツールです。display: grid;を使用して親要素に適用し、子要素の位置をグリッドの行や列に基づいて指定します。

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

4. レスポンシブデザイン

レスポンシブデザインは、異なる画面サイズに対応するウェブページを作成するための方法です。CSSでは、メディアクエリを使用して画面サイズに応じてスタイルを変更することができます。

css
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

5. 高度なCSSテクニック

5.1 アニメーションとトランジション

CSSは、要素にアニメーションやトランジションを追加することができます。アニメーションは、要素のプロパティが時間の経過とともに変化する効果を作り出します。

css
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  animation: example 3s infinite;
}

トランジションは、ユーザーが要素にホバーしたときなど、状態が変化する際にスムーズな変化を作り出します。

css
button {
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: blue;
}

5.2 擬似クラスと擬似要素

擬似クラスは、特定の状態にある要素にスタイルを適用する方法です。hoverやfocusが代表的な擬似クラスです。

css
a:hover {
  color: red;
}

擬似要素は、要素の一部にスタイルを適用するために使用します。例えば、リンクの前にアイコンを追加する場合などに使用します。

css
p::before {
  content: "★";
  color: gold;
}

6. まとめ

CSSはウェブデザインに欠かせない重要な言語であり、基本的なスタイル指定から高度なレイアウト技術まで、さまざまな方法でウェブページの見た目を制御できます。この記事で紹介した基本概念やテクニックを理解し、実際のプロジェクトで活用することで、より魅力的で機能的なウェブサイトを作成することができます。CSSの習得はウェブ開発において非常に重要なスキルであり、どんどん使いこなせるように練習を重ねていきましょう。

最終更新： 23/04/2025
1 分の読み
Back to top button