CSS基本ガイド

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを制御するために使用されるスタイルシート言語です。HTMLがウェブページの構造を定義するのに対し、CSSはその見た目を決定します。ウェブデザインを行う上で不可欠なツールであり、HTMLコンテンツの視覚的なプレゼンテーションを管理します。本記事では、CSSの基本的な概念から高度な技術まで、包括的に解説します。

1. CSSの基本概念

1.1 CSSとは？

CSSは、ウェブページの外観を定義するためのスタイルシート言語です。CSSは、文字の色、フォント、レイアウト、背景色、余白、ボーダーなど、さまざまな視覚的要素を制御できます。HTMLファイルにCSSを追加することで、ページ全体のデザインを一貫して管理できるようになります。

1.2 CSSの構成要素

CSSは、基本的に以下の3つの主要な構成要素で成り立っています：

セレクタ（Selector）：スタイルを適用する対象となるHTML要素を指定します。
プロパティ（Property）：要素のどのスタイルを変更するかを指定します。
値（Value）：指定したプロパティに与える具体的な値を設定します。

例えば、以下のCSSコードでは、pタグ（段落要素）の文字色を青色に設定しています。

css
p {
  color: blue;
}

pはセレクタで、段落要素を指します。
colorはプロパティで、文字の色を変更することを示します。
blueは値で、文字色を青に設定しています。

2. CSSの適用方法

CSSはHTMLドキュメントにいくつかの方法で適用できます。主に以下の3つの方法があります。

2.1 インラインCSS

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

html
<p style="color: red; font-size: 16px;">これは赤い文字の段落です。p>

インラインCSSは簡単に適用できますが、複数のページで共通のスタイルを適用するには不便です。

2.2 内部CSS（内部スタイルシート）

内部CSSは、HTMLファイル内の