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

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 ファイルを使うことを、"関心の分離" といいます。

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

CSS 規則

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

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 内のカスタム属性名にスタイルを適用できます。 1 つの要素にスタイルを適用するには ID を使い、複数の要素にスタイルを適用するにはクラスを使います。

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

.list {
  list-style: square;
}

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

ブラウザーで表示

Visual Studio Code を使用してプレビューするには、エクスプローラーで index.html ファイルを右クリックし、[ 既定のブラウザーで開く] を選択します。

重要

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

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

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

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 ファイルで、同じフォントを #msg から継承するように、ul および <body> セレクターを含む規則を削除します。

Control + 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 を使って対話機能を提供し、テーマの切り替えをサポートします。

GitHub Copilot を使用してテーマを追加する

IDE で GitHub Copilot を使用して CSS を生成し、新しいテーマを追加できます。プロンプトをカスタマイズして、要件に従って HTML 要素のスタイルを定義するプロパティを指定できます。

次のテキストは、Copilot Chat のプロンプトの例を示しています。

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot は AI を利用しているため、驚きや間違いが起こりうる可能性があります。詳細については、 Copilot に関する FAQ を参照してください。

Visual Studio Code での GitHub Copilot の詳細を確認します。

フィードバック

このページはお役に立ちましたか?

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

外部 CSS

CSS 規則

セレクター

ブラウザーで表示

ライト テーマを追加する

ブラウザーで表示

適用された CSS を表示する

ダーク テーマを追加する

GitHub Copilot を使用してテーマを追加する

フィードバック

ライトテーマを追加する

ダークテーマを追加する