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

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

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

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

そのスタイルシートは、一体どのようにして
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」の方法を使うのが楽です。