HTML CSS

Volardev 編集部 April 12, 2026

CSS（Cascading Style Sheets）は、Webページのレイアウトを整えるために使用されます。

CSSを使用することで、色、フォント、テキストサイズ、要素間の間隔、要素の配置や背景画像、異なるデバイスや画面サイズに応じた表示の切り替えなど、多くのスタイルを制御できます。

1. CSSとは

CSS（Cascading Style Sheets）は、Webページのプレゼンテーション（見た目）を定義するための言語です。HTMLが文書の構造を定義するのに対し、CSSはその構造をどのように見せるかを指定します。

2. CSSの3つの適用方法

HTMLドキュメントにCSSを追加するには、主に3つの方法があります。

インライン (Inline) - HTML要素内に style 属性を使用して記述する
内部 (Internal) - HTMLの <head> セクション内に <style> 要素を使用して記述する
外部 (External) - 外部のCSSファイルへのリンクを <link> 要素で指定する

最も一般的な方法は、スタイルを外部のCSSファイルに記述することです。ただし、このチュートリアルでは学習を容易にするために、主にインラインおよび内部CSSを使用します。

2.1 インラインCSS (Inline CSS)

インラインCSSは、特定のHTML要素に独自のスタイルを適用するために使用されます。

適用するには、HTML要素に style 属性を追加します。以下の例では、<h1> 要素のテキストの色を青に、<p> 要素のテキストの色を赤に設定しています。

<h1 style="color:blue;">青い見出し</h1>
<p style="color:red;">赤い段落</p>

2.2 内部CSS (Internal CSS)

内部CSSは、単一のHTMLページに対してスタイルを定義する場合に使用されます。

内部CSSは、HTMLページの <head> セクション内で <style> 要素を使用して定義されます。

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

2.3 外部CSS (External CSS)

外部CSSを使用すると、1つのファイルを変更するだけで、Webサイト全体のルックスを変更できます。

外部CSSを使用するには、HTMLページの <head> セクション内に <link> 要素を追加して、外部CSSファイルを読み込みます。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

外部CSSファイルは、任意のテキストエディタで作成できます。このファイルにはHTMLコードを含まず、.css 拡張子で保存する必要があります。

以下は、上記の styles.css ファイルの内容の例です。

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

3. CSSの色、フォント、サイズ

ここでは、一般的によく使われるCSSプロパティをいくつか紹介します。

color プロパティ：テキストの色を定義します。
font-family プロパティ：使用するフォントを定義します。
font-size プロパティ：テキストのサイズを定義します。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

4. CSSの境界線 (CSS Border)

CSSの border プロパティは、HTML要素の周囲に境界線を定義します。

[!TIP]
ほとんどすべてのHTML要素に対して境界線を定義することが可能です。

p {
  border: 2px solid powderblue;
}

5. CSSのパディング (CSS Padding)

CSSの padding プロパティは、テキストと境界線の間のスペース（内側の余白）を定義します。

p {
  border: 2px solid powderblue;
  padding: 30px;
}

6. CSSのマージン (CSS Margin)

CSSの margin プロパティは、境界線の外側のスペース（外側の余白）を定義します。

p {
  border: 2px solid powderblue;
  margin: 50px;
}

7. 外部CSSへのリンク

外部スタイルシートは、完全なURL（絶対パス）または現在のWebページからの相対的なパスで参照できます。

この例では、完全なURLを使用してスタイルシートにリンクしています。

<link rel="stylesheet" href="https://www.google.com/html/styles.css">

この例では、現在のWebサイトの html フォルダ内にあるスタイルシートにリンクしています。

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

この例では、現在のページと同じフォルダ内にあるスタイルシートにリンクしています。

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

8. まとめ

要素 / 属性	説明
`<style>`	内部CSSを定義するために使用されます。
`<link>`	外部CSSファイルを参照するために使用されます。
`color`	テキストの色を定義するCSSプロパティ。
`font-family`	テキストのフォントを定義するCSSプロパティ。
`font-size`	テキストのサイズを定義するCSSプロパティ。
`border`	要素の周囲の境界線を定義するCSSプロパティ。
`padding`	境界線の内側のスペースを定義するCSSプロパティ。
`margin`	境界線の外側のスペースを定義するCSSプロパティ。