HTML 入門
スタイルシートでデザインを作ろう
ここでは HTML 文書のデザインを変更してみよう．まずスタイルシートを使用せずに見出しのデザインを次のような方法で変更できます．
index.html（抜粋）
<h2 style="color: blue;">最初の見出し</h2>
<h2 style="color: blue;">2個目の見出し</h2>
<h2 style="color: blue;">最後の見出し</h2>
ブラウザでの表示結果
最初の見出し
2個目の見出し
最後の見出し
しかしながら，HTML 文書（あるいは大きな Web サイト全体）の至る所にある見出しのデザインを一つひとつ変更することは大変な作業です．また変更し忘れたり，異なった設定を行った箇所があると，デザインの統一感が失われてしまうことになります．このようなことから現在は HTML 文書には構造化したコンテンツ（内容）のみを記述し，デザインはスタイルシート（カスケーディング・スタイル・シート： Cascading Style Sheets, CSS）にまとめることが主流になっています．
このセクションではスタイルシートを用いてサイトのデザインを整える方法について説明します．
CSS ファイルを準備して読み込む
まず，CSS ファイルを準備して HTML ファイルに読み込むコードを入力します．さまざまな方法が考えられますが，Visual Studio Code を使うことを想定して次の2種類の方法を説明します．
空のCSSファイルを作成して，HTMLファイルにコードを入力する
次の手順のとおり Visual Studio Code のエクスプローラを使って，index.html と同じフォルダに拡張子が .css のファイルを作成します．ファイル名に決まりはありませんが，今回は style.css にします．
下図の通り Visual Studio Code のエクスプローラーにある「新しいファイル」アイコンをクリックします．
ファイル名の入力ボックスが表示されたので，「style.css」と入力して Enter を押下します．
「style.css」ファイルが作成されました．
style.css ファイルの作成ができたら，index.html などすべての html ファイルを編集して，次のとおりヘッダー部に <link rel="stylesheet" href="style.css"> というコードを追加します．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>スタイルシート</title>
</head>
<body>
</body>
</html>
このとき，Visual Studio Code では Emmet によって簡単にコードを生成できます．具体的には，コードを入力したい箇所にカーソルを移動します．
link:css と入力して Enter や Tab を押下します．
これによって CSS ファイルの読み込みコードが生成されました．このとき，エクスプローラーで作成した「style.css」のファイル名と，コードの6行目に生成された href="style.css" の部分のファイル名が一致していることを確認し，もし異なるようなら確実に書き換えてください．
HTMLファイルに読み込みコードを入力して，CSSファイルを作成する
HTML ファイルに読み込みコードを入力してから Visual Studio Code で簡単に CSS ファイルを生成する方法もあります．まず，読みコードを入力したいヘッダー部の空行にカーソルを移動します．
link:css と入力すると，Visual Studio Code が Emmet 省略記法の候補を表示するので Enter や Tab を押下します．
これによって次のような読み込みコードが生成されます．
生成されたコードを確認しておきます．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>スタイルシート</title>
</head>
<body>
</body>
</html>
次に，CSS ファイルを生成します．Visual Studio Code で読み込みコードが入力された6行目の "style.css" の上にマウスカーソルを移動します．すると，図の通り「リンク先を表示」というツールチップが表示されるので，これをクリックします．あるいは， Ctrl を押しながら "style.css" をクリックします（macOS の場合は ⌘）．
まだファイルがなければ次のようなメッセージが表示されるので「ファイルの作成」をクリックします．
この作業によって CSS ファイルが作成されました．
相対的な指定
大きな Web サイトを構築するときには CSS ファイルをフォルダに保存したり，HTML ファイルもいくつかのフォルダに分けて保存することも少なくありません．そのような場合は相対的な位置で CSS ファイルを指定する必要があります．ここで説明した方法と同じですが，フォルダの区切りが / で，../ がひとつ上のフォルダを意味することが分かれば良いでしょう．
たとえば次の図のとおり，スタイルファイルは css フォルダに保存し，ルートフォルダにある index.html と projects フォルダにある page1.html から css ファイルを読み込む方法を示します．
index.html からは同じ階層にある css フォルダの中に移動して style.css を参照できるので，css/style.css と指定します．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
projects フォルダにある page1.html からは，いったん1つ上の階層に移動して css フォルダに入り，その中の style.css ファイルを参照することになります．したがって，../css/style.css と指定します．
projects/page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<title>Document</title>
</head>
<body>
</body>
</html>