CSSをゼロから学ぶ

CSSの基本的な書き方、HTMLへの適用方法

この動画のゴール

CSSがどういう役割なのかを理解する
CSSの基本的な書き方がわかる
HTMLにCSSを適用する方法がわかる

CSSは何のためのものか (1)

HTMLだけでも、Webブラウザは最低限コンテンツが見える状態にしてくれます。

見出しは大きく表示
段落は改行される
リンクは青色で下線付き

例:

それ以上のデザインをしてもらうときに、CSSが必要です。

CSSは何のためのものか (2)

CSS（Cascading Style Sheets） を使うと、HTML要素の見た目を自由にコントロールできます。

CSSでできることの例:

文字の色やサイズを変更
背景色や画像を設定
レイアウトを整える（横並び、縦並びなど）
アニメーションを追加

CSSの構文（基本形）

CSSは以下のような構文で記述されます。

h1 {
  color: blue;
  font-size: 24px;
}

CSSの構文: セレクター

h1 {
  color: blue;
}

セレクター: h1

どのHTML要素にスタイルを適用するか指定するためのもの
この例では、すべての <h1> 要素が対象となる

CSSの構文: プロパティと値

h1 {
  color: blue;
  font-size: 24px;
}

プロパティ: color（何を変えるか）
値: blue（どう変えるか）
プロパティと値は : でつなぐ
各宣言の末尾は ; で終わる

CSS適用の例

こちらのURL から、以下のCSSがある場合とない場合を比べてみましょう。

span {
  border: 1px solid black;
  background-color: lime;
}

CSSのコメント

/* と */ で囲んだ部分がコメントとなり、この間に書いている文字は無視されます。

/* これはコメントです */
h1 {
  color: red; /* 見出しを赤色に */
}

/*
  複数行のコメントも
  このように書けます
*/

CSSにおけるホワイトスペース (1)

CSSでは、スペースや改行は自由に入れられます。

以下の2つは同じ意味として扱われます:

h1 { color: blue; font-size: 24px; }

h1 {
  color: blue;
  font-size: 24px;
}

読みやすさのため、2つ目の書き方が推奨されます。

CSSにおけるホワイトスペース (2)

複数の値が必要なプロパティもあり、この場合は値の間にホワイトスペースが必要になります。

/* `0` と `auto` という値を持つ */
margin: 0 auto;

/* 間違い: 0とautoの間にスペースがない */
margin: 0auto;

HTMLにスタイルを適用する方法

特定のHTML文章に対してCSSでのスタイルを割り当てる方法は3つあります。

外部スタイルシート（推奨）
内部スタイルシート
インラインスタイル

外部スタイルシート

CSSを .css ファイルとして別に作成し、HTMLの link 要素で指定します。

styles.css:

h1 {
  color: navy;
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  ...
  <link rel="stylesheet" href="styles.css">
  ...

補足: 外部スタイルシートの指定方法 (1)

HTMLファイルからCSSファイルを指定する場合、以下のような方法があります

同じディレクトリにあるCSSファイルを指定:

project/
|
├── index.html
└── styles.css

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

補足: 外部スタイルシートの指定方法 (2)

サブディレクトリにあるCSSファイルを指定

project/
├── index.html
└── css/
    └── styles.css

index.html

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

補足: 外部スタイルシートの指定方法 (3)

URLで指定

<link rel="stylesheet" href="https://example.com/styles.css">

別のWebサーバから配信されているCSSファイルを読み込む場合に使用できます

外部スタイルシートのメリット

複数のHTMLページで同じCSSを共有できる
=> CSSファイルの変更だけで、全ページのスタイルを一括変更可能

例: 複数のページで同じCSSを共有

project/
├── index.html
├── about.html
└── styles.css

=> index.html と about.html から styles.css を参照できる

内部スタイルシート

HTMLファイルの <head> 内に <style> タグで記述します。

<head>
  <style>
    h1 {
      color: purple;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>

そのHTMLファイル内でのみ有効です。

インラインスタイル

HTML要素の style 属性に直接CSSを書きます。

<h1 style="color: orange; font-size: 28px;">
  オレンジの見出し
</h1>

注意: これは非推奨の方法になります

コードが読みにくくなる
同じスタイルを複数箇所に適用しにくい
複数の要素に共通のスタイル変更をしようとすると多数の変更が必要 => 保守性が低い

3つの方法の比較

方法	使い分け
外部スタイルシート	通常はこれを使う（推奨）
内部スタイルシート	1つのHTMLファイルだけでページを作りたい場合
インラインスタイル	非推奨。一時的なスタイル変更の確認など

セレクターとは

セレクターは、HTMLが読み込んだCSSルールをどの要素に適用するかを指定する部分です。

p {
  color: gray;
}

この例では p がセレクターとなり、すべての <p> 要素に色が適用されます。

セレクターによる要素の指定方法は多数の方法があり、一部を紹介していきます。

要素型セレクター

要素型セレクター（タグ名セレクターとも呼ばれる）は、HTML要素名をそのまま指定します。

/* すべてのh1要素 */
h1 {
  color: darkblue;
}

/* すべてのp要素 */
p {
  line-height: 1.8;
}

クラスセレクター (1)

クラスセレクターは、特定のクラスを持つ要素を選択します。

HTMLで class 属性を指定:

<p class="important">重要なお知らせ</p>
<p>普通の段落</p>

CSSでドット (.) から始める:

.important {
  color: red;
  font-weight: bold;
}

クラスセレクター (2)

複数の要素に同じ class の値を設定し、同じスタイルを割り当てられます:

<h2 class="highlight">注目の見出し</h2>
<p class="highlight">注目の段落</p>
<span class="highlight">注目のテキスト</span>

.highlight {
  background-color: yellow;
}

→ 3つの要素すべてに黄色い背景が付く

クラスセレクター (3)

1つの要素に複数の class の値を割り当てて、複数のスタイルを割り当てられます:

<div class="box warning">警告メッセージ</div>

.box {
  padding: 16px;
  border: 1px solid gray;
}

.warning {
  background-color: #fff3cd;
  border-color: #ffc107;
}

IDセレクター (1)

IDセレクターは、特定のIDを持つ要素を選択します。

HTMLで id 属性を指定:

<header id="main-header">
  <h1>サイトタイトル</h1>
</header>

CSSでシャープ (#) から始める:

#main-header {
  background-color: #333;
  color: white;
}

IDセレクター (2)

IDはHTMLのページ内で一意（ユニーク）である必要があります。

<!-- 正しい: 1つだけ -->
<nav id="global-nav">...</nav>

<!-- 間違い: 同じIDを複数使用 -->
<div id="sidebar">...</div>
<div id="sidebar">...</div>  <!-- ダメ！ -->

そのため、IDセレクターを使って複数の要素に同じスタイルを割り当てることはできません。

セレクターの比較

	要素型セレクター	クラスセレクター (`.`)	IDセレクター (`#`)
書き方	`タグ名`	`.クラス名`	`#ID名`
属性	不要	`class="クラス名"`	`id="ID名"`
適用範囲	その要素型のすべて	同じクラスを持つ要素すべて	特定の1要素のみ
例	`p`, `h1`, `a`	`.button`, `.card`	`#header`, `#footer`

使い分けの目安:

要素型セレクター: 特定の要素に共通のスタイル設定
IDセレクター: どうしても特定の要素にだけ指定したいスタイル設定
クラスセレクター: 上記以外の場合は基本的にこちらを使う

それ以外のセレクター

ここから紹介するセレクターについて、最初の時点では無理に覚えようとせず、
「こういう要素の指定方法もあるんだな」
と思ってもらうくらいで大丈夫です。

必要になった時に MDN で調べたり、AIに「こういう要素の指定方法はどうする？」などAIに聞く形で解消し、よく使うものは必要になったら覚えておくくらいで良いでしょう。

属性セレクター

HTML要素の属性名や属性値を指定して要素を選択できます。

<a href="https://example.com">外部リンク</a>
<a href="/about.html">内部リンク</a>

/* href属性が"https://"で始まる要素を選択 */
a[href^="https://"] {
  color: blue;
}

セレクターリスト

複数のセレクターに同じスタイルを適用したいとき、
カンマ (,) で区切ってまとめられます。

/* 別々に書く場合 */
h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

/* まとめて書く場合 */
h1, h2, h3 {
  color: navy;
}

全称セレクター

全称セレクター（*）は、すべての要素を選択します。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

子孫結合子

子孫結合子は、ある要素の中にある要素を選択します。
セレクターをスペースで区切ります。

<article>
  <p>記事の<span>本文</span>です</p>
</article>

article span {
  color: blue;
}

→ <article> の中にある <span> が青色になる

子結合子

子結合子 (>) は、直接の子要素のみを選択します。

<ul>
  <li>アイテム1</li>
  <li>アイテム2
    <ul>
      <li>サブアイテム</li>
    </ul>
  </li>
</ul>

ul > li {
  color: green;
}

→ 直接の子の <li> だけが緑色になる

次兄弟結合子

次兄弟結合子 (+) は、直後の兄弟要素を選択します。

<h2>見出し</h2>
<p>最初の段落</p>
<p>2番目の段落</p>

h2 + p {
  font-weight: bold;
}

→ <h2> の直後にある <p> だけが太字になる

入れ子によるセレクター

CSSでは、セレクターを入れ子で書くこともできます。

article {
  h1 {
    color: navy;
  }
  p {
    line-height: 1.6;
  }
}

これは article h1 と article p を書いたのと同じ意味です。

セレクターを全部覚える必要はありません！

今回紹介したセレクター以外にも多くのセレクターがありますが、セレクターの種類や名前をすべて覚える必要はありません。

大切なのは:

基本的なセレクター（要素型、クラス、ID）の使い所を押さえていること
「こういう選択方法もある」と知っておくこと

必要になったら AIに聞いたり、MDNのwebサイトで調べれば 良いです。

まとめ

CSSはHTML要素の見た目を制御するための言語
基本構文: セレクター { プロパティ: 値; }
HTMLがCSSを使うための方法は外部スタイルシート、内部スタイルシート、インラインスタイルといった方法があるが、外部スタイルシート を推奨
(例: <link rel="stylesheet" href="styles.css">)
セレクターは、スタイルを特定の要素に適用するために使われる
要素型セレクター (p, h1, div など): 特定の要素に共通のスタイルを適用
クラスセレクター (.クラス名): 同じクラス名を持つ要素に共通のスタイルを適用
IDセレクター: #ID名: そのIDを持つ要素にだけ指定するスタイルを適用
他にもセレクターは多数ある。必要に応じて調べれば良い

description/[quizSetId]