CSSスタイルシートの使い方とテクニックを徹底解説！

はじめに
●CSSの基本的な使い方
●CSSの基本的な構文
まとめ

はじめに

Webページ制作において、HTMLとCSSは切っても切り離せない技術です。

HTMLはウェブページの基本構造を形作る言語であり、CSSはその骨組みをデザインするための強力なツールです。

本記事では、CSSの基本的な使い方から応用まで、初心者でもわかりやすく解説します。

●CSSの基本的な使い方

ウェブページのスタイリングにはCSSが欠かせません。

CSSのコードはHTMLファイルに記述することができ、その方法は大きく分けて3つあります。

それぞれの方法について、その特徴と使い方を説明していきます。

○HTML内に直接記述する方法

HTMLファイル内に<style>タグを用いてCSSコードを直接記述する方法は、簡単で直感的です。

下記のサンプルコードは、HTMLの基本構造とともに、<h1>要素のテキスト色を赤にするCSSを含んでいます。

この方法は小規模なウェブページや単一ページでの使用に適しています。

<!DOCTYPE html>
<html>
<head>
	<title>HTMLとCSSの基本的な使い方</title>
	<style>
		h1 {
			color: red;
		}
	</style>
</head>
<body>
	<h1>Hello, World!</h1>
</body>
</html>

このコードは、HTMLの基本構造を持つウェブページのサンプルを表しています。

こちらの構造は、次の要素で構成されています。

<!DOCTYPE html>：これは文書宣言で、現在の文書がHTML5で書かれていることをブラウザに伝えます。
<html>タグ：これはHTML文書のルート要素です。すべての他の要素はこのタグの内部に配置されます。
<head>タグ：これは、ページのメタデータやスタイル、スクリプトなど、ページの見た目や動作に影響を与える情報を持っています。
<title>タグ：これはブラウザのタブや履歴で表示されるページのタイトルを定義するものです。
<style>タグ：これは、ページ内で直接CSSスタイルを定義する場所です。この例では、<h1>要素のテキスト色を赤に設定しています。
<body>タグ：これはページの主要なコンテンツを含む部分です。この例では、”Hello, World!”というテキストを持つ見出しを表示しています。

上記のコードに基づいて、このページをブラウザで開くと、”Hello, World!”という赤い色の見出しを見ることができます。

HTMLとCSSの組み合わせにより、ウェブページの構造とデザインが簡単かつ効果的に制御されています。

○外部ファイルにCSSを記述する方法

CSSコードを外部ファイルに記述し、それをHTMLファイルにリンクする方法は、より効率的で再利用可能です。

この方法を使うと、一つのCSSファイルを複数のHTMLファイルで共有でき、スタイルの一貫性を維持しつつ、メンテナンスも容易になります。

下記のコード例は、外部CSSファイルを利用して、<h1>要素の色を赤にする方法を表しています。

<!DOCTYPE html>
<html>
<head>
	<title>HTMLとCSSの基本的な使い方</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Hello, World</h1>
</body>
</html>

/* style.css */
h1 {
	color: red;
}

このコードは、HTMLページと外部のCSSファイルを関連付けています。

具体的には、HTMLの<head>セクション内に<link>要素を配置して、rel="stylesheet"属性を用いてCSSファイルとの関係を表しています。

href="style.css"属性は、リンク先のCSSファイルの場所を指定しています。

外部ファイル style.css には、見出し<h1>のテキスト色を赤に設定するスタイルが定義されています。

これにより、HTMLファイル内の<h1>タグの内容、この場合は”Hello, World!”が赤色で表示されます。

この方法を利用することで、同じスタイルを持つ複数のページを持つウェブサイトを構築する際に、一貫性を保ちつつ、変更や更新を効率的に行うことができます。

例えば、将来的に全ての見出しの色を変更したい場合、style.cssファイルの一箇所を修正するだけで、すべてのページにその変更が反映されるのです。

○インラインスタイルを使用する方法

HTMLとCSSの相互作用を理解するために、まず最も基本的な方法から考えると良いでしょう。

それが、HTML要素内で直接スタイルを適用する「インラインスタイル」です。

インラインスタイルは、特定のHTML要素に直接CSSスタイルを適用するためのものです。

下記のコードでは、<h1>タグを使用して「こんにちは、世界！」というテキストを表示し、そのテキストの色を赤に設定しています。

<!DOCTYPE html>
<html>
<head>
	<title>HTMLとCSSの基本的な使い方</title>
</head>
<body>
	<h1 style="color: red;">こんにちは、世界！</h1>
</body>
</html>

このコードは、HTMLの<h1>要素に直接style属性を使用して、その要素に対するスタイルを設定しています。

具体的には、color: red;というスタイル指定を行っています。

これにより、「こんにちは、世界！」というテキストが赤色で表示されることになります。

このようなインラインスタイルの指定方法は、特定の要素にのみスタイルを適用する場合や、一時的なスタイル変更を行いたい場合に有用です。

しかしながら、大規模なウェブサイトや、複数のページで同じスタイルを適用したい場合にインラインスタイルを使用するのは非効率的です。

そこで、外部のCSSファイルを使用する方法があります。これを「外部スタイルシート」と呼びます。

外部スタイルシートは、一つのCSSファイル内に複数のスタイルルールを定義し、それを複数のHTMLファイルで再利用することができます。

下記のコードは、外部のCSSファイルstyle.cssを使用して、テキストの色を赤に設定しています。

<!DOCTYPE html>
<html>
<head>
	<title>HTMLとCSSの基本的な使い方</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>こんにちは、世界！</h1>
</body>
</html>

/* style.css */
h1 {
	color: red;
}

このコードは、HTMLの<head>内で<link>タグを使用して外部のCSSファイルstyle.cssを読み込んでいます。

そして、そのCSSファイル内でh1セレクタを使用して、全ての<h1>要素に対して赤色のテキストカラーを指定しています。

このようにして、複数のページに同じスタイルを適用することができます。

外部スタイルシートの利点は、一度の変更で複数のページのデザインを一括して更新できることや、ページの読み込み速度を向上させることができる点です。

また、デザインとコンテンツを分離することで、メンテナンスやデザインの再利用が容易になります。

これらの技術を適切に組み合わせることで、効率的でメンテナンスしやすいウェブデザインを実現することができます。

●CSSの基本的な構文

CSSはプロパティと値を組み合わせてスタイルを定義します。

例えば、<h1>要素のテキスト色を赤にする基本的なスタイルは、次のように記述します。

また、クラスやIDを使って特定のHTML要素にスタイルを適用する方法もあり、この柔軟性がCSSの強力な特徴です。

h1 {
	color: red;
}

このコードは、h1タグ内のテキストの色を赤色に設定するものです。

ここで、colorはプロパティであり、redはその値となります。

プロパティと値はコロン（:）で繋ぎ、セミコロン（;）で終了します。

このセミコロンは、特に複数のプロパティを指定する際に、各プロパティの終わりを明示的に表すために重要です。

さらに、背景色や文字の大きさなど、複数のスタイルを同時に適用したい場合もあります。

そのような場合、次のような記述が可能です。

h1 {
	color: red;
	background-color: yellow;
}

このコードは、h1タグのテキストの色を赤にし、その背景色を黄色にするものです。

colorとbackground-colorは2つの異なるプロパティで、それぞれに赤と黄色という値が設定されています。

しかし、CSSの真の力は、特定のHTML要素だけでなく、クラスやIDを使って特定の要素群や、特定の要素だけを対象にスタイルを適用する能力にあります。

例えば、次のHTMLとCSSのコードは、クラス名”sample”を持つ要素に赤い文字色、24pxのフォントサイズ、そして黄色の背景色を適用するものです。

<!DOCTYPE html>
<html>
<head>
  <style>
    .sample {
      color: red;
      font-size: 24px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1 class="sample">Hello, World!</h1>
  <p class="sample">This is a sample paragraph.</p>
</body>
</html>

このコードは、HTML文書の中で.sampleというクラスを持つ全ての要素（この場合、h1とp）に対して、赤い文字色、24pxのフォントサイズ、黄色の背景を適用しています。

CSS内の.の後に続く文字列は、HTML要素のclass属性の値を指定していることを表します。

このHTML文書の中では、h1タグとpタグの両方にclass=”sample”という属性が設定されています。

これにより、同じスタイルがこれら2つの異なる要素に適用されることになります。

このように、クラスを使うことで、HTML文書内の特定の要素群に一貫したスタイルを適用することができるのです。