1.2 C S S

CSS入門 - ウェブデザインを制御するスタイルシート言語 #

概要: 本記事では、ウェブページのスタイルやデザインを制御するスタイルシート言語であるCSSについて詳しく解説します。CSSの基本概念、セレクタ、プロパティ、値の説明や、実践的なサンプルコードを交えて、CSSを理解し、活用できるようになることを目指します。

1. CSSとは #

Cascading Style Sheets（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>
  <style>
    h1 {
      color: red;
    }

    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>これはCSSのサンプルコードです。</p>
</body>
</html>

このサンプルコードでは、タグ内にCSSを記述しています。h1要素の文字色を赤にし、p要素の文字サイズを16pxに設定しています。

2. セレクタの種類と使い方 #

セレクタは、CSSでスタイルを適用する対象の要素を指定するためのルールです。以下は、一般的なセレクタの種類と使い方です。

  • 要素セレクタ: 要素名を指定してスタイルを適用する
  • クラスセレクタ: クラス名を指定してスタイルを適用する（.で始まる）
  • IDセレクタ: ID名を指定してスタイルを適用する（#で始まる）属性セレクタ: 属性名と値を指定してスタイルを適用する（[]で囲む）
  • 子孫セレクタ: 親要素と子孫要素の関係を指定してスタイルを適用する（空白で区切る）
  • 子セレクタ: 親要素と直接の子要素の関係を指定してスタイルを適用する（>で区切る）
/* 要素セレクタ */
p {
  color: blue;
}

/* クラスセレクタ */
.highlight {
  background-color: yellow;
}

/* IDセレクタ */
#main-title {
  font-size: 24px;
}

/* 属性セレクタ */
input[type="submit"] {
  background-color: green;
}

/* 子孫セレクタ */
nav ul {
  list-style-type: none;
}

/* 子セレクタ */
section > h2 {
  margin-top: 30px;
}

3.プロパティと値 #

CSSでは、セレクタで指定した要素に対して、プロパティと値をペアで指定してスタイルを適用します。以下は一般的なプロパティと値の例です。

  • color: 文字色を指定する
  • font-size: 文字サイズを指定する
  • background-color: 背景色を指定する
  • margin: 要素の外側の余白を指定する
  • padding: 要素の内側の余白を指定する
h1 {
  color: red;
  font-size: 32px;
  background-color: white;
  margin: 20px 0;
  padding: 10px;
}

このサンプルコードでは、h1要素に対して、文字色を赤にし、文字サイズを32pxに設定し、背景色を白にし、外側の余白を上下20px、左右0に設定し、内側の余白を10pxに設定しています。

4 CSSボックスモデル #

CSSボックスモデルは、ウェブページ上の要素がどのように配置されるかを決定する概念です。要素は、以下の4つの領域から構成されます。

  • コンテンツボックス: 要素の実際のコンテンツ部分
  • パディングボックス: 要素の内側の余白（padding）
  • ボーダーボックス: 要素の境界線（border）
  • マージンボックス: 要素の外側の余白（margin）
div {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

このサンプルコードでは、div要素に対して、幅300px、高さ200pxのコンテンツボックスを設定し、内側の余白（パディング）を10pxに設定し、境界線（ボーダー）を2pxの黒い実線に設定し、外側の余白（マージン）を20pxに設定しています。

5. レイアウトの基本: フレックスボックスとグリッド #

CSSでは、フレックスボックス（Flexbox）とグリッド（Grid）という2つのレイアウトシステムを使って、要素の配置を制御できます。以下はそれぞれの基本的な使い方です。

フレックスボックス: #

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

グリッド: #

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

6.レスポンシブデザインの実装 #

CSSを使って、異なるデバイスや画面サイズに対応するレスポンシブデザインを実装できます。以下はメディアクエリを使った例です。

サンプルコード:

/* デフォルトのスタイル */
body {
  font-size: 16px;
}

/* 画面幅が768px以上の場合 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

7. CSSアニメーションとトランジション #

CSSでは、アニメーションとトランジションを使って、要素に動きを追加できます。以下はそれぞれの基本的な使い方です。

アニメーション: #

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 1s linear;
}

トランジション: #

.element {
  opacity: 0;
  transition: opacity 1s linear;
}

.element:hover {
  opacity: 1;
}

まとめ #

本記事では、CSSの基本概念や使い方について解説しました。これらの知識を活用して、ウェブページのデザインやレイアウトを制御し、見た目を整えることができます。さらに学びを深めることで、より高度なデザインや機能を実現できるようになります。