プログラミング

CSSの基本と活用法

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

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを制御するために使用されるスタイルシート言語です。HTMLと組み合わせて使用され、ウェブサイトの外観を指定するための重要な役割を果たします。このガイドでは、CSSの基本から応用までを紹介し、初心者から上級者まで役立つ知識を提供します。

1. CSSの基本

CSSはHTMLドキュメントの構造とは独立して、外観やレイアウトを管理します。CSSを使用することで、文字の色、フォント、背景色、レイアウトなどを制御することができます。基本的なCSSの書き方は次の通りです。

関連記事
css
selector {
  property: value;
}

  • selector（セレクター）は、スタイルを適用するHTML要素を指定します。

  • property（プロパティ）は、変更したいスタイルの種類を指定します（例：color, font-size, marginなど）。

  • value（値）は、プロパティに設定する値を指定します（例：red, 16px, 20pxなど）。

例：

css
p {
  color: blue;
  font-size: 18px;
}

この例では、すべての

タグのテキストが青色になり、フォントサイズが18pxに設定されます。

2. CSSの適用方法

CSSは、HTMLファイルに対して3つの異なる方法で適用できます。

(1) インラインスタイル

HTMLタグ内で直接CSSスタイルを指定する方法です。

html
<p style="color: red; font-size: 20px;">これはインラインスタイルの例です。p>

(2) 内部スタイルシート

HTMLドキュメント内の