INDEX

はじめに
CSSの適用方法
CSSの基本的なプロパティ
クラスとIDによるスタイルの適用
1. クラスを使ったスタイルの適用
2. IDを使ったスタイルの適用
まとめ

はじめに

HTMLはウェブページの構造を作成するためのマークアップ言語ですが、デザインやレイアウトを設定するには、CSS（Cascading Style Sheets） を使用します。CSSを使うことで、文字の色やサイズ、配置、背景色など、ページ全体の見た目を自由にカスタマイズできます。今回は、HTMLとCSSの基本的な連携方法を学び、スタイルを適用する方法について解説します。

CSSの適用方法

CSSをHTMLに適用する方法には、以下の3つがあります。

インラインスタイル

インラインスタイルは、style 属性を使用して、HTML要素に直接スタイルを指定する方法です。例えば、以下のように特定の要素にスタイルを適用できます。

<p style="color: red; font-size: 20px;">
  この段落は赤色で表示され、フォントサイズが20pxです。
</p>

例: インラインスタイルを使用した結果

この段落は赤色で表示され、フォントサイズが20pxです。

内部スタイルシート

内部スタイルシートは、HTMLファイル内の <head> タグ内に <style> タグを使ってスタイルを定義します。全体のスタイルを1か所で管理できるため、ページ全体に影響を与えるスタイルを定義する際に便利です。

<style>
  p {
    color: blue;
    font-size: 18px;
  }
</style>

この方法を使うと、ページ内のすべての段落に青色で18pxのフォントサイズが適用されます。

外部スタイルシート

外部スタイルシートは、CSSファイルをHTMLファイルからリンクさせる方法です。複数のページに同じスタイルを適用する場合に最適で、スタイルを一元管理できます。外部スタイルシートを適用するには、HTMLファイルの <head> タグ内で <link> タグを使用します。

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

外部スタイルシートにより、複数のページで一貫したデザインを簡単に維持できます。

CSSの基本的なプロパティ

CSSでは、さまざまなプロパティを使ってスタイルを適用します。ここでは、基本的なプロパティをいくつか紹介します。

色の設定

color プロパティを使ってテキストの色を設定し、background-color プロパティを使って背景色を指定します。

p {
  color: blue;
  background-color: yellow;
}

例: この段落は青色のテキストと黄色の背景を持っています。

この段落は青色のテキストと黄色の背景を持っています。

フォントサイズとフォントファミリ

font-size プロパティでフォントの大きさを指定し、font-family プロパティでフォントの種類を指定します。

h1 {
  font-size: 36px;
  font-family: Arial, sans-serif;
}

例: 見出しのフォントサイズを36pxに、フォントをArialに設定しています。

大きな見出しの例

余白の設定

margin プロパティは要素の外側の余白を、padding プロパティは要素の内側の余白を設定します。

div {
  margin: 20px;
  padding: 10px;
  background-color: lightgray;
}

例: 外側に20px、内側に10pxの余白を持つボックスの例です。

余白が設定されたボックス

クラスとIDによるスタイルの適用

CSSでは、class 属性や id 属性を使って、特定の要素にだけスタイルを適用することができます。class は複数の要素に適用でき、id は1ページにつき1つの要素にだけ使用します。

クラスを使ったスタイルの適用

クラスは、同じスタイルを複数の要素に適用したいときに便利です。クラス名はピリオド（.）を使って指定します。

<!-- HTML -->
<p class="highlight">この段落は強調されています。</p>

<!-- CSS -->
.highlight {
  color: red;
  font-weight: bold;
}

例: 以下の段落は、クラス highlight によって赤色で太字になります。

この段落は強調されています。

IDを使ったスタイルの適用

id 属性は、特定の要素に一意のスタイルを適用するために使用します。IDはシャープ記号（#）を使って指定します。

<!-- HTML -->
<div id="main-content">ここがメインコンテンツです。</div>

<!-- CSS -->
#main-content {
  background-color: #2ecc71;
  color: white;
  padding: 20px;
}

例: 以下のボックスは、ID main-content によってスタイルが適用されています。

ここがメインコンテンツです。

まとめ

今回は、HTMLとCSSの連携方法や、スタイルを適用するための基本的なプロパティについて学びました。CSSを使うことで、ウェブページのデザインを自由にコントロールすることができ、より魅力的なページを作成することができます。次回は、CSSレイアウトの基本について学び、ページの構造を整理する方法を学びましょう！

HTML入門講座

1. HTMLとは？基礎と概要

2. HTMLの基本構造と要素

3. テキストの装飾とフォーマット

4. リンクを作成する: ハイパーリンクの基礎