演習 - CSS を使用して HTML をスタイル設定する - Training

10 分

カスケードスタイルシート (CSS) を使用して、ページの表示方法を指定できます。基本的な考え方は、HTML ページ内で使用する要素をどのようなスタイルにするかを定義することです。 HTML 要素がコンテンツを定義するのに対し、CSS スタイルはこのコンテンツの外観を定義します。

たとえば、要素の角を丸くしたり、背景をグラデーションにしたりできます。または、CSS を使用して、ユーザーが操作するときのハイパーリンクの外観や応答方法を指定することもできます。また、高度なページレイアウトやアニメーション効果を実行することもできます。

特定の要素や、特定の種類のすべての要素にスタイルを適用したり、クラスを使用して多くの異なる要素のスタイルを指定したりできます。

この演習では、HTML ページ要素に CSS スタイルを適用し、ライトテーマとダークテーマを定義するための CSS コードを追加します。次に、ブラウザーの開発者ツールで結果を確認します。

外部 CSS

HTML に関する前のユニットでは、HTML から外部 CSS ファイルにリンクしました。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

外部 CSS の 1 つの利点は、複数の HTML ページを同じ CSS ファイルにリンクできることです。 CSS を変更した場合は、ページごとにスタイル設定が更新されます。ページコンテンツには HTML ファイル、スタイルの設定には CSS ファイル、対話には JavaScript ファイルを使うことを、"関心の分離" といいます。

先に説明したように、HTML に直接 CSS を記述することもできます。これは、"内部 CSS" と呼ばれます。基本的な Web サイトの場合でも非常に多くの CSS 規則があり、HTML ページはすぐに乱雑になる可能性があります。複数のページでは、多くの場合、同じ CSS が繰り返され、管理するのが難しくなります。

CSS 規則

CSS 規則は、HTML 要素にスタイルを適用する方法です。 CSS 規則には、スタイルを適用する必要がある要素 (1 つまたは複数) を表すために使われるセレクターがあります。

Visual Studio Code で、main.css ファイルを開き、以下のように入力します。

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

このコードスニペットには、2 つの規則が含まれています。各規則には次のものが含まれます。

"セレクター"。 body と ul は、2 つの規則のセレクターであり、スタイルが適用される要素を選択するために使われます。
左中かっこ ({)。
選択した要素の外観を決定するスタイルの "宣言" のリスト。
右中かっこ (})。

たとえば、ul セレクターは、スタイルの適用対象としてページ内の <ul> HTML 要素を選択します。宣言は font-family: helvetica で、どのスタイルにするかを示します。 プロパティ名 は font-family で、値は helvetica です。

次に示すように、要素に対して独自のカスタム名を定義できます。

セレクター

ID と "クラス" セレクターを使用すると、HTML 内のカスタム属性名にスタイルを適用することができます。 ID は 1 つの要素のスタイルを設定するために使用されるのに対し、クラスは複数の要素のスタイルを設定するために使用できます。

次のコードをコピーし、CSS ファイルに追加します。これを、先ほど追加した ul セレクターの閉じ中かっこの後に貼り付けます。
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
上記のコードには 3 つの CSS 規則が含まれており、最後の 2 つの規則ではカスタム属性を使用して要素 .list と #msg が選択されています。
- .list は "クラスセレクター" です。 list に設定された class 属性を含む各 HTML 要素は、このセレクターで定義されているスタイルを取得します。
- #msg は "ID セレクター" です。 id 属性が msg に設定されている HTML 要素は、このセレクター内で定義されているスタイルを取得します。
セレクターに使用する名前は、HTML で定義されているものに一致している限り、任意の名前にすることができます。
Windows の Ctrl + S キーまたは macOS の Command + S キーを選択して、作業内容を保存します。

ブラウザーで表示

Visual Studio Code を使ってプレビューするには、ファイル名 index.html を右クリックして、[標準設定のブラウザーで開く] を選びます。

重要

main.css ファイルを編集するだけであっても、変更をプレビューするには、index.html ファイルを選択する必要があります。

既定のブラウザーで Web ページが開きます。

フォントスタイルは期待どおりになっていますか。 <body> に適用されたスタイルは、興味深い方法で <h1> 要素に継承されます。 <h1> に対しては何も定義しませんでしたが、それでも <body> で定義されているフォントを取得しました。親要素から子孫へのこの継承メカニズムは、CSS の重要な側面の 1 つです。ただし、<li> 要素のフォントは異なります。 <li> 要素は、スタイルを定義した <ul> 要素の子孫であるため、<li> 要素のスタイルは <body> に設定したスタイルをオーバーライドします。

Visual Studio Code で [既定のブラウザーで開く] を使うと、毎回ブラウザーで新しいタブが開きます。新しいタブが開かないようにするには、代わりに Web サイトが既に含まれているタブを再度読み込みます。

タブを再度読み込むには、表示更新のキーボードショートカットである F5 キーを押すか、Windows または Linux では Ctrl + R キー、Mac では Command + R キーを押します。

ライトテーマを追加する

次に、Web サイトの配色テーマのサポートを追加します。まず、16 進カラーコードを使用して明るい色のテーマを定義します。

CSS ファイル (main.css) で、ファイルの末尾に次のコードを追加します。
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
この例では、#000000 がフォントの色の黒を指定し、#00FF00 が背景色の緑を指定します。
HTML ファイル (index.html) で、<body> 要素をクラス名 light-theme で更新します。これで、ライトテーマのクラスセレクターを使ってスタイルが正しく適用されるようになりました。
```
<body class="light-theme">
```

ブラウザーで表示

Visual Studio Code を使用してプレビューするには、index.html を右クリックして [既定のブラウザーで開く] を選択するか、F5 キーを押して前のタブを再度読み込みます。

背景が緑色のライトテーマが表示されていることがわかります。

適用された CSS を表示する

ブラウザービューで、開発者ツールを開きます。

ページを右クリックして [検査] を選択するか、ショートカットの F12 キーまたは Ctrl + Shift + I キーを押します。
[要素] タブを選択し、[要素] タブの内部にある [スタイル] タブを選択します (既定で既に選択されているはずです)。
さまざまな HTML 要素をポイントして選択し、それらにどのスタイルが適用されるかが開発者ツールの [スタイル] タブにどのように表示されるかに注目してください。
<body> 要素を選択します。 light-theme が適用されていることに注目してください。
順序のないリストである <ul> 要素を選択します。カスタムスタイル font-family: helvetica; に注目してください。<body> 要素のスタイルがオーバーライドされています。

開発者ツールでの CSS スタイルの表示の詳細については、「CSS の表示と変更の概要」を参照してください。

ダークテーマを追加する

ダークテーマの場合は、Web ページ上でのテーマの切り替えを有効にする次のユニットに備えて、インフラストラクチャを設定します。

CSS にダークテーマのサポートを追加するには、次の手順を使用します。

CSS ファイル (main.css) で、ファイルの先頭のページルートにいくつか定数を追加します。
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
:root セレクターは、HTML ページの <html> 要素を表します。この種のタスクでのベストプラクティスは、CSS 規則で :root セレクターを使用してグローバル CSS 変数のセットを定義することです。この例では、3 つの色変数を定義しています。これで、これらの変数を他の CSS 規則で使用できるようになりました。
CSS ファイルの末尾で、light-theme 規則を次のコードに置き換えて更新し、dark-theme セレクターを追加します。
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
上記のコードでは、背景とフォントの色を指定する 2 つの新しい変数 bg と fontColor を定義しています。これらの変数では、var キーワードを使用して、:root セレクターで前に指定した変数にプロパティ値を設定します。
次に、CSS ファイルで、現在の body セレクターを次のコードに置き換えます。
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
この例では、body セレクターを使って background および color プロパティを設定しており、Web ページに表示される要素はすべて <body> 要素内にあるため、<body> で設定されている色を継承します。
CSS ファイルで、同じフォントを <body> から継承するように、#msg および ul セレクターを含む規則を削除します。

忘れずに Ctrl + S キーまたは Command + S キーを押してファイルを保存してください。

これで CSS ファイル (main.css) は次の例のようになるはずです。

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

ダークテーマを表示するには、ファイル index.html を開き、<body> クラス属性の既定のテーマを手動でダークテーマ (dark-theme) に編集します。ファイルを保存し、ブラウザーでページを再度読み込みます。
<body> クラス属性を編集して、既定値をライトテーマに戻します。

次のユニットでは、JavaScript を使って対話機能を提供し、テーマの切り替えをサポートします。

続行

演習 - CSS を使用して HTML をスタイル設定する

外部 CSS

CSS 規則

セレクター

ブラウザーで表示

ライト テーマを追加する

ブラウザーで表示

適用された CSS を表示する

ダーク テーマを追加する

フィードバック

ライトテーマを追加する

ダークテーマを追加する