【Chapter1】CSSの基本

概要と目標 CSSとは何かを知り、
基本的な記述方法を覚えよう。

CSSの基本を学習し、CSSの記述方法や記述場所を理解しましょう。

今回のゴール

RERUN

新しいウインドウで表示する

CSSとは HTMLをデザインする言語。

CSSとは、Cascading（カスケーディング） Style（スタイル） Sheets（シート）の略で、
HTMLの視覚的な表現を行うコンピュータ言語。
視覚的な表現はHTMLでは行わず、CSSで行う。

開発環境テキストエディタと、
ブラウザで開発できる。

CSSもテキストエディタと呼ばれる文書が書けるソフトと、ブラウザがあれば開発できる。

テキストエディタ

文書を書くためのソフト。
Windowsの「メモ帳」や、Macの「テキストエディット」でも開発できる。以下は、よりHTMLを開発しやすい無料のテキストエディタ。

Visual Studio Code
Visual Studio Codeのダウロードページ
Atom
Atomのダウロードページ
Brackets
Bracketsのダウロードページ

ブラウザ

ホームページを閲覧するためのソフト。
Windowsの「Internet Explorer」や、Macの「Safari」でよい。以下は、その他のよく利用されているブラウザ。

Google Chrome
Google Chromeのダウンロードページ
Firefox
Firefoxのダウンロードページ

CSSの宣言方法セレクタ、プロパティ、値
これが全て。

CSSは、セレクタ（どこに）、プロパティ（何を）、値（どうするか）で、
デザインを定義する。

CSSの宣言

セレクタ（どこに） { ・・・・・・・ 宣言ブロックの開始
  プロパティ（何を）: 値（どうするか）;  ・・・・・・・ 宣言
} ・・・・・・・ 宣言ブロックの終了

サンプル

p {
  color: red;
}

書き方のルール

CSSを記述する際は、記述方法をルール化することで、ケアレスミスを発見しやすくなる。
また、複数人でCSSを記述する際にも見やすくなる。

CSSのコードフォーマット

 : 半角スペース
 : 改行

h1 { 
  color: #333; 
  font-size: 200%; 
  background-color: #eee; 
}

CSSの記述場所タグに書くか、`head`内に書くか、
外部ファイルに書くか。

CSSは、タグに直接記述する、Inline（インライン） Stylesheet（スタイルシート）か、
head要素内に記述する、Embedding（エンベディング） Stylesheet（スタイルシート）か、
外部ファイルに記述する、Linkng（リンキング） Stylesheet（スタイルシート）の3つの記述場所がある。

	Inline（インライン） Stylesheet（スタイルシート）	Embedding（エンベディング） Stylesheet（スタイルシート）	Linkng（リンキング） Stylesheet（スタイルシート）
概要	`style`属性の属性値としてCSSを記述する方法	HTMLの`style`要素内にCSSを記述する方法	CSS専用のファイルを作成し、HTMLに読み込む方法
メリット	特定の要素のみのデザイン管理が容易	特定のページ内のデザイン管理が容易	複数ページのデザイン管理が容易
デメリット	要素ごとに記述が必要	ページごとに記述が必要	特定の要素ごとの記述が複雑

メンテナンス性低い高い

インラインスタイル HTMLの開始タグに、
`style`属性で指定。

インラインスタイルは、HTMLのグローバル属性である、style 属性を使い、
その属性値として、「プロパティと値」を指定する。

インラインスタイルの記述方法

<要素名 style="プロパティ: 値;">

インラインスタイルを使ってみよう

「css-lessons」 › 「chapter01」 › 「inline」フォルダ内の「index.html」をテキストエディタで開く
p要素に、style属性を指定

chapter01/inline/index.html

<p style="color: red;">ここの文字を赤文字にする</p>

上書き保存
「css-lessons」 › 「chapter01」› 「inline」フォルダ内の「index.html」をダブルクリック。
p要素の文字が赤くなったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

エンベディングスタイル `head`要素内に、
`style`要素で指定。

HTMLのhead要素内に、style 要素記述し、
その中に、「セレクタ {プロパティ: 値;}」を記述。

エンベディングスタイルの記述方法

<head>
  <style>
    セレクタ {
      プロパティ: 値;
    }
  </style>
</head>

エンベディングスタイルを使ってみよう

「css-lessons」 › 「chapter01」 › 「embedding」フォルダ内の「index.html」をテキストエディタで開く
head要素内に、style要素を追加し、CSSを記述

chapter01/embedding/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>エンベディングスタイルの練習</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h1>エンベディングスタイルの練習</h1>
  <p>ここの文字を赤文字にする</p>
</body>
</html>

上書き保存
「css-lessons」 › 「chapter01」› 「embedding」フォルダ内の「index.html」をダブルクリック。
p要素の文字が赤くなったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンキングスタイル CSS専用ファイルを作成し、
`link`要素で読み込む。

CSS専用のファイルを作成しそのファイルにCSSを記述しておく。（拡張子: 「.css」）
読み込むには、head要素内に、link 要素記述し、
href 属性で読み込むファイルを指定する。

リンキングスタイルの記述方法（CSS）

セレクタ {
  プロパティ: 値;
}

リンキングスタイルの記述方法（HTML）

<head>
  <link rel="stylesheet" href="CSSファイルのパス">
</head>

リンキングスタイルを使ってみよう

「css-lessons」 › 「chapter01」 › 「linking」フォルダ内に「style.css」を作成
p要素を赤文字にするCSSを記述

chapter01/linking/style.css

p {
  color: red;
}

上書き保存
「css-lessons」 › 「chapter01」 › 「linking」フォルダ内の「index.html」をテキストエディタで開く
head要素内に、link要素で、「style.css」を読み込む

chapter01/linking/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンキングスタイルの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>リンキングスタイルの練習</h1>
  <p>ここの文字を赤文字にする</p>
</body>
</html>

上書き保存
「css-lessons」 › 「chapter01」› 「linking」フォルダ内の「index.html」をダブルクリック。
p要素の文字が赤くなったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

タイプセレクタ特定の要素全てにスタイルを適用。

どこにデザインするかを識別するセレクタにも種類がある。
まずは、特定の要素全てにスタイルを適用するタイプセレクタを理解する。
タイプセレクタは、セレクタにスタイルを適用したい要素名を記述すれば良い。

タイプセレクタの使い方

要素名 {
  プロパティ: 値;
}

タイプセレクタを使ってみよう

「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「index.html」をテキストエディタで開く
HTMLを確認する

chapter01/selector/index.html

<ul>
  <li>りんご</li>
  <li>コーラ</li>
  <li>コーヒー</li>
  <li>いちご</li>
  <li>メロン</li>
  <li>抹茶</li>
  <li>チェリー</li>
</ul>

「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「style.css」をテキストエディタで開く
li要素の文字の色を青にするCSSを記述

chapter01/selector/style.css

li {
  color: blue;
}

上書き保存
「css-lessons」 › 「chapter01」› 「selector」フォルダ内の「index.html」をダブルクリック。
li要素の文字が青くなったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

classセレクタ特定の分類にスタイルを適用。

HTMLのclass属性に指定されている値に対して適用するセレクタ。
class属性は同じ属性値を1ページの中で何回でも使用できる。
また、半角スペース区切りで複数の属性値を指定する事もできる。

class属性の使い方

<要素名 class="分類名">

classセレクタの使い方

.分類名 {
  プロパティ: 値;
}

classセレクタを使ってみよう

「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「index.html」をテキストエディタで開く
果物のリスト項目に、「fruit」というクラス名を付ける。

chapter01/selector/index.html

<ul>
  <li class="fruit">りんご</li>
  <li>コーラ</li>
  <li>コーヒー</li>
  <li class="fruit">いちご</li>
  <li class="fruit">メロン</li>
  <li>抹茶</li>
  <li class="fruit">チェリー</li>
</ul>

上書き保存
「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「style.css」をテキストエディタで開く
「fruit」クラスの文字の色を赤にするCSSを記述

chapter01/selector/style.css

li {
  color: blue;
}

.fruit {
  color: red;
}

上書き保存
「css-lessons」 › 「chapter01」› 「selector」フォルダ内の「index.html」をダブルクリック。
「fruit」クラスの文字が赤くなったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

IDセレクタ特定の要素だけにスタイルを適用。

HTMLのid属性に指定されている値に対して適用するセレクタ。
id属性は同じ属性値は1ページの中で1回しか使用できない。

id属性の使い方

<要素名 id="固有名">

idセレクタの使い方

#固有名 {
  プロパティ: 値;
}

idセレクタを使ってみよう

「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「index.html」をテキストエディタで開く
メロンのリスト項目に、「melon」という固有名を付ける。

chapter01/selector/index.html

<ul>
  <li class="fruit">りんご</li>
  <li>コーラ</li>
  <li>コーヒー</li>
  <li class="fruit">いちご</li>
  <li class="fruit" id="melon">メロン</li>
  <li>抹茶</li>
  <li class="fruit">チェリー</li>
</ul>

上書き保存
「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「style.css」をテキストエディタで開く
ID名「melon」の文字の色を緑にするCSSを記述

chapter01/selector/style.css

li {
  color: blue;
}

.fruit {
  color: red;
}

#melon {
  color: green;
}

上書き保存
「css-lessons」 › 「chapter01」› 「selector」フォルダ内の「index.html」をダブルクリック。
ID「melon」の文字が緑になったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

詳細度: CSSの優先順位は記述した順番ではなく、セレクタの種類によって決定する。
具体的には、タイプセレクタより、classセレクタの方が優先順位が高く、
classセレクタより、IDセレクタの方が優先順位が高い。
（同じセレクタの場合は、後から記述した方が優先度が高い）
CSSではこのような適用する優先順位のことを、詳細度と呼んでいる。

コメントコード上にメモを残すことが出来る。

CSSはコードを後で見返した時、「どこに何を書いたか」分かりづらくなることがある。
出来る限りそういった状況を避けるため、コードの中にコメントという
メモを残すほうが好ましい。

CSSのコメント

/* コメント */

コメント記述してみよう。

「css-lessons」 › 「chapter01」 › 「selector」フォルダ内の「style.css」をテキストエディタで開く
各セレクタの上にコメントを記述

chapter01/selector/style.css

/* タイプセレクタ */
li {
  color: blue;
}

/* classセレクタ */
.fruit {
  color: red;
}

/* IDセレクタ */
#melon {
  color: green;
}

上書き保存
「css-lessons」 › 「chapter01」› 「selector」フォルダ内の「index.html」をダブルクリック。
表示に影響しないことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter01」 › 「training」フォルダ内に「style.css」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

chapter01」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： style.css
上記で作成したCSSファイルを、「training」フォルダ内にある「index.html」にリンクして下さい。
下記の文字列の色を、タイプセレクタを使って「green」にして下さい。
- 文字列： "ここは緑色で表示されます。"
下記の文字列の色を、classセレクタを使って「blue」にして下さい。
- 文字列： "ここは青色で表示されます。"
下記の文字列の色を、IDセレクタを使って「red」にして下さい。
- 文字列： "セレクタの練習"

解答例

chapter01/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>セレクタの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="page-title">セレクタの練習</h1>
  <p class="blue">ここは青色で表示されます。</p>
  <ul>
    <li>ここは緑色で表示されます。</li>
    <li>ここは緑色で表示されます。</li>
    <li>ここは緑色で表示されます。</li>
    <li>ここは緑色で表示されます。</li>
    <li>ここは緑色で表示されます。</li>
  </ul>
  <p class="blue">ここは青色で表示されます。</p>
  <p>ここは文字の色が変更されません。</p>
</body>
</html>

chapter01/training/style.css

li {
  color: green;
}

.blue {
  color: blue;
}

#page-title {
  color: red;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ CSSはHTMLをデザインする言語。

CSSは、セレクタ {プロパティ: 値；}で、HTMLをデザインする言語です。

CSSは、セレクタ {プロパティ: 値；}で記述する
CSSの記述場所はインラインスタイル、
エンベディングスタイル、リンキングスタイルがある
基本となるセレクタとして、タイプセレクタ、
classセレクタ、IDセレクタがある

Chapter01 CSSの基本

テキストエディタ

ブラウザ

書き方のルール

インラインスタイルを使ってみよう

エンベディングスタイルを使ってみよう

リンキングスタイルを使ってみよう

タイプセレクタを使ってみよう

classセレクタを使ってみよう

idセレクタを使ってみよう

コメント記述してみよう。