【ホームページ作成】入門！スタイルシートを使う3つの方法

スタイルシートに挑戦し始めたばかりの方々から、
よく頂くご質問：

当「ホームページ作成」ガイドサイトでは、スタイルシートを活用する様々なテクニックをご紹介してきました。 例えば、
・「画像上の自由な位置に文字を重ねて表示させる方法」や、
・「ノートのように罫線（下線）を引くデザインを作る方法」、
・「キャプション付き画像を横に並べて配置する方法」や、
・「箱形のページ移動リンクを作る方法」 などです。

その際、次のようなご質問を頂くことがあります。

そのスタイルシートは、一体どのようにして
HTMLに組み込めば良いのか？

多くの記事では、「スタイルシートをHTMLに加える方法」（＝HTMLにスタイルシートを適用させる方法）は、知っていることが前提になっています。 そのため、スタイルシートを記述するためのHTMLソースまでは掲載していない記事が大半です。
そこで今回は、スタイルシートをHTMLに組み込む方法をご紹介致します。

スタイルシートの書き方の基礎をご紹介

スタイルシートをHTMLに適用させる記述方法は3通りあります。 どの方法を使っても同じように実現できますので、目的に合った方法を選択してみて下さい。

スタイルシートを使ったテクニックの紹介では、記述するスタイルシートソースとして、例えば以下のような記述が出てきます。

p {
   margin-left: 30px;
   font-size: smaller;
}

上記のソースでは、各段落（p要素）について、「左側に30ピクセルの余白を設け、文字サイズを1段階小さくする」という装飾を加えています。
このようなスタイルシートソースを、「一体HTML内のどこに記述すればよいのか？」という点を、ご紹介いたします。

スタイルシートを記述する3つの方法

3通りの方法について詳しく解説する前に、それぞれの方法の概要をご紹介しておきます。

■１．style要素（<style>～</style>）の中に記述する

HTMLには、スタイルシートを記述するための「style」という要素が用意されています。 これを使ってスタイルシートを記述することができます。
この場合は、「その1ページに限って有効」な記述になります。

■２．style属性（<TAG style="～">）の中に記述する

あるHTMLタグの中に、「style」という属性を追記して、その中にスタイルシートを記述することもできます。
この場合は、「そのタグだけに対して有効」な記述になります。 臨時に一カ所にだけスタイルを適用させたい場合などに使えます。

■３．スタイルシートは別ファイルに記述し、link要素で読み込む

HTMLの中にスタイルシートを書かず、別途独立したファイルにスタイルシートを記述しておくこともできます。 HTML内では「link」という（他のファイルを参照するための）要素を使って、スタイルシートファイルを読み込むように記述します。
この場合は、複数のページに同じスタイルを適用させたい際に使えます。

どの方法を使おうか迷った場合は、とりあえず「1」の方法を採用されると良いでしょう。
※複数のページに共通するスタイルを作成するには「3」の方法を使用するのが一般的ですが、 紹介されているテクニックを一時的に試してみるだけなら「3」の方法は面倒ですので「1」の方法を使うのが楽です。

[準備] スタイルシートソースを記述（編集）するには

スタイルシートソースを作成・編集するには、「テキストエディタ」や「ホームページ作成ソフトのスタイルシート編集機能」を使います。 それらの操作方法については、別の記事「HTML・スタイルシートのソースを編集する方法」で解説していますので、別途ご参照下さい。

それでは、順番に見ていきましょう。

【この記事の目次】

1. スタイルシートの書き方 概要 （このページ）
2. 記述方法(1) style要素を使って記述する方法
3. 記述方法(2) style属性を使って記述する方法
4. 記述方法(3) 別ファイルに独立させ、link要素で読み込む方法