CSS スタイリング：HTML に外部スタイルシートをリンクする

はじめに

初めての CSS 実験へようこそ！CSS（Cascading Style Sheets）は、HTML ドキュメントをスタイル設定するために使用される言語です。画面、紙、その他のメディアで HTML 要素がどのように表示されるかを記述します。

CSS を HTML ドキュメントに含める方法は 3 つあります：インライン、内部、外部です。最も一般的で推奨される方法は、外部スタイルシートを使用することです。このアプローチは、コンテンツ（HTML）とプレゼンテーション（CSS）を分離するため、コードがよりクリーンで、保守が容易になり、複数のページで再利用可能になります。

この実験では、外部スタイルシートを使用してウェブページをスタイル設定する基本的なプロセスを学びます。以下のことを行います：

新しい CSS ファイルを作成します。
その CSS ファイルを既存の HTML ドキュメントにリンクします。
ページ全体のフォントを変更するための基本的な CSS ルールを記述します。
ライブウェブブラウザで変更を確認します。

始めましょう！

styles.css という名前の外部 CSS ファイルを作成する

このステップでは、すべての CSS ルールを保持するための専用ファイルを作成します。これは外部スタイルシートとして知られています。セットアップスクリプトは既に index.html ファイルを作成しています。次に、それをスタイル設定する CSS ファイルを作成する必要があります。

WebIDE の左側パネルにあるファイルエクスプローラーを使用して：

project フォルダ内の空のスペースを右クリックします。
コンテキストメニューから「New File」を選択します。
新しい入力ボックスが表示されます。styles.css と入力して Enter キーを押します。

ファイルエクスプローラーに styles.css という名前の新しい空のファイルが表示されているはずです。次のステップでここに CSS コードを記述します。

new file

link タグを使用して CSS ファイルを HTML ドキュメントにリンクする

このステップでは、styles.css ファイルを index.html ファイルに接続します。CSS ファイルを作成しただけでは不十分です。HTML ドキュメントにそれを使用するように明示的に指示する必要があります。これは <link> タグを使用して行われます。

<link> タグは、HTML ドキュメントの <head> セクション内に配置されます。これには 2 つの重要な属性が必要です：

rel="stylesheet"：これは、リンクされたファイルがスタイルシートであることをブラウザに伝えます。
href="styles.css"：これは、CSS ファイルへのパスを指定します。

それでは、HTML に追加しましょう。

ファイルエクスプローラーから index.html ファイルを開きます。
<head> セクション内に、次の行を追加します：

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

行を追加した後、index.html ファイルは次のようになります：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

ファイルを保存してください（Ctrl+S または File > Save）。

body 要素に基本的なセレクターを追加する

このステップでは、最初の CSS ルールを記述します。CSS ルールは、セレクターと宣言ブロックで構成されます。セレクターは、スタイルを設定したい HTML 要素を指します。宣言ブロック（波括弧 {} の内側）には、適用される実際のスタイルである 1 つ以上の宣言が含まれます。

まず <body> 要素を対象とします。<body> のスタイル設定は、ページ全体の背景色やフォントなどのデフォルトスタイルを設定するための一般的なプラクティスです。

styles.css ファイルを開きます。まだ空のはずです。
body 要素のルールを作成するために、次のコードを入力します：

body {
}

このコードは <body> 要素を選択し、次のステップでスタイルプロパティを追加する空の宣言ブロック（波括弧）を準備します。

body セレクターに font-family プロパティを設定する

このステップでは、body ルールにスタイル宣言を追加します。宣言とは、プロパティと値のペア（例：property: value;）であり、特定のスタイルを定義します。

font-family プロパティを使用して、ページのテキストの書体を変更します。これを body に適用すると、body 内のすべてのテキスト要素（<h1> や <p> など）がこのフォントを継承します。「フォントスタック」を提供することは良い習慣です。これはカンマで区切られたフォントのリストです。ブラウザは最初のフォントを試行し、利用できない場合は次のフォントを試行します。

styles.css ファイルが開いていることを確認してください。
body セレクターの波括弧の中に、font-family プロパティを追加します。

font-family: Arial, sans-serif;

これで、styles.css ファイル全体は次のようになります：

body {
  font-family: Arial, sans-serif;
}

このルールは、<body> 内のすべてのテキストを Arial フォントでレンダリングするようにブラウザに指示します。ユーザーのシステムに Arial がインストールされていない場合、システムのデフォルトのサンセリフフォントにフォールバックします。

ファイルを保存してブラウザをリフレッシュし、変更を確認する

この最終ステップでは、作業の結果を確認します。コードを記述した後、ファイルを保存し、ブラウザで変更を表示する必要があります。

index.html と styles.css の両方が保存されていることを確認してください。Ctrl+S キーボードショートカットを使用するか、メニューの File > Save に移動してください。
LabEx インターフェースの上部にある Web 8080 タブに移動します。このタブは、環境で実行されている Web サーバーの出力を表示します。
最新の変更を確認するために、ブラウザタブをリフレッシュする必要がある場合があります。

font change

ページ上のテキストを観察してください。通常ブラウザが使用するデフォルトのセリフフォント（Times New Roman など）とは異なり、Arial フォント（または類似のサンセリフフォント）で表示されるはずです。変更はわずかかもしれませんが、外部スタイルシートが正しくリンクされ、適用されていることを確認できます。

自由に実験してみてください！ styles.css ファイルの Arial を Verdana または Georgia に変更し、保存して、Web 8080 タブをリフレッシュして、フォントの変更が即座に表示されるのを確認してください。